/* ============================================================================
   FTD.team — слой движения. Подключается ПОСЛЕ core.css и theme.css и ничего
   в них не меняет: базовую версию сайта можно собрать без этого файла.

   Кривые и длительности — фиксированные токены, не подбирались на глаз.
   ============================================================================ */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-micro: 160ms;   /* нажатие, мелкая обратная связь */
  --t-ui: 220ms;      /* наведение, состояния */
  --t-reveal: 420ms;  /* появление секции при скролле — маркетинговый темп */
}

/* ------------------------------------------------- фон героя

   Три слоя поверх фотографии, все декоративные и неинтерактивные.
   Двигается только transform и opacity — никакого layout и paint в кадре. */

.fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* техническая сетка, проявляется к центру */
.fx__grid {
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(rgba(0, 225, 255, .07) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(0, 225, 255, .07) 1px, transparent 1px) 0 0 / 64px 64px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 0%, transparent 72%);
  opacity: .9;
}

/* медленный блик поперёк экрана — постоянное движение, поэтому linear */
.fx__scan {
  position: absolute;
  top: -20%;
  left: -40%;
  width: 40%;
  height: 140%;
  background: linear-gradient(100deg, transparent 0%, rgba(0, 225, 255, .055) 50%, transparent 100%);
  transform: translate3d(0, 0, 0);
  animation: fx-scan 14s linear infinite;
}
@keyframes fx-scan {
  to { transform: translate3d(360%, 0, 0); }
}

/* ------------------------------------------------- появление при скролле */

/* Скрываем только когда JS жив и сам поставил флаг: без него и при сбое
   наблюдателя страница остаётся видимой. */
.fx-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.fx-ready [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* линии-разделители прочерчиваются, а не проявляются целиком */
.src__row[data-reveal]::after,
.rack__item[data-reveal]::after { content: none; }

/* ------------------------------------------------- микровзаимодействия */

.btn,
.fork__row,
.chips__list li,
.src__row,
.social a,
.nav a,
.foot__col a {
  transition-timing-function: var(--ease-out);
}

/* нажатие: короткая обратная связь, одинаковая у всех кнопок и строк */
.btn:active,
.fork__row:active {
  transform: translate3d(0, 1px, 0) scale(.985);
  transition-duration: var(--t-micro);
}

@media (hover: hover) and (pointer: fine) {
  .chips__list li {
    transition: border-color var(--t-ui) var(--ease-out),
                color var(--t-ui) var(--ease-out),
                transform var(--t-ui) var(--ease-out);
  }
  .chips__list li:hover {
    border-color: var(--accent);
    transform: translate3d(0, -2px, 0);
  }

  /* строка источника: подсветка названия и бегущая линия снизу */
  .src__row { transition: background var(--t-ui) var(--ease-out); }
  .src__row::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 225, 255, 0) 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 320ms var(--ease-out);
  }
  .src__row:hover::before { transform: scaleX(1); }
  .src__row:hover .src__name { color: var(--accent); }
  .src__name { transition: color var(--t-ui) var(--ease-out); }

  .social a:hover { transform: translate3d(0, -2px, 0); }
}

.src__row { position: relative; }

/* ------------------------------------------------- доступность

   Меньше и мягче, а не «ничего»: смысловые переходы остаются,
   уходит только перемещение. core.css уже гасит @keyframes. */

@media (prefers-reduced-motion: reduce) {
  .fx-ready [data-reveal] { transform: none; transition: opacity 200ms ease; }
  .fx__scan { display: none; }
  .btn:active, .fork__row:active { transform: none; }
  .chips__list li:hover, .social a:hover { transform: none; }
  .src__row::before { transition: none; }
}