/* ============================================================
   FOXES ANIMATION KIT
   Переиспользуемые классы для scroll-reveal / hero-reveal /
   page-transition эффектов. Разбор источника — см. ANIMATION_TABLE.md
   Стек: GSAP + ScrollTrigger (CDN) + нативный View Transitions API.
   Тема: тёмный графит/обсидиан + бронза-золото, без "игрового" визуала.
   ============================================================ */

:root{
  --fx-obsidian: #16110d;
  --fx-obsidian-2: #1e1712;
  --fx-bronze: #b9793f;
  --fx-bronze-bright: #d99a55;
  --fx-gold: #d4a24c;
  --fx-parchment: #ece3d1;
}

/* ---------- Базовое "до-анимационное" состояние ----------
   Элементы с data-reveal стартуют скрытыми — их проявляет JS
   (initReveal). Если JS не выполнился (CDN недоступен) или
   пользователь просит меньше анимаций — контент остаётся видимым.
   ВАЖНО: opacity:0 навешивается только на типы "up" и "stagger" —
   их сам элемент прячет через opacity. Типы "mask" (прячется через
   clip-path/filter) и "chars" (прячутся только дочерние .fx-char)
   всегда остаются видимыми на уровне контейнера — иначе после
   анимации clip-path/filter контейнер так и останется невидимым
   (opacity родителя не сбрасывается автоматически). */
[data-reveal="up"],
[data-reveal="stagger"]{
  opacity: 0;
}
html.no-js [data-reveal],
html.reduced-motion [data-reveal]{
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
}
html.no-js [data-reveal="chars"] .fx-char,
html.reduced-motion [data-reveal="chars"] .fx-char{
  opacity: 1 !important;
  transform: none !important;
}
html.no-js [data-reveal="stagger"] > *,
html.reduced-motion [data-reveal="stagger"] > *{
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- [data-reveal="up"] — фейд + подъём снизу ---------- */
[data-reveal="up"]{
  transform: translateY(28px);
}

/* ---------- [data-reveal="mask"] — раскрытие от центра ----------
   Источник: п.1 таблицы — hero-изображение раскрывается тонкой
   вертикальной полосой от центра до полной ширины + brightness fade. */
[data-reveal="mask"]{
  clip-path: inset(0 50% 0 50%);
  filter: brightness(0.35);
  overflow: hidden;
}

/* ---------- [data-reveal="chars"] — посимвольное появление ----------
   Источник: п.3 таблицы — буквы логотипа/заголовка появляются
   последовательно, ~50мс между буквами. JS оборачивает каждый
   символ в <span class="fx-char">. */
[data-reveal="chars"] .fx-word{
  display: inline-block;
  white-space: nowrap;
}
[data-reveal="chars"] .fx-char{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  will-change: transform, opacity;
}

/* ---------- [data-reveal="stagger"] — список/грид карточек ---------- */
[data-reveal="stagger"] > *{
  opacity: 0;
  transform: translateY(20px);
}

/* ---------- .fx-kenburns — бесконечный медленный zoom фона ----------
   Источник: п.5 таблицы — камера непрерывно и очень плавно
   наезжает на композицию на протяжении всего ролика. */
.fx-kenburns{
  animation: fx-kenburns-move 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fx-kenburns-move{
  0%{ transform: scale(1) translate3d(0, 0, 0); }
  100%{ transform: scale(1.12) translate3d(-1.5%, -2%, 0); }
}
html.reduced-motion .fx-kenburns{ animation: none; }

/* ---------- .fx-breathe — едва заметное ambient-движение ----------
   Источник: п.4 таблицы — статуя/герой чуть шевелится в петле
   (рука медленно поднимается). Обобщено как лёгкое дыхание элемента. */
.fx-breathe{
  animation: fx-breathe-move 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes fx-breathe-move{
  0%, 100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.015); }
}
html.reduced-motion .fx-breathe{ animation: none; }

/* ---------- View Transitions — wipe-переход между страницами/секциями ----------
   Источник: п.7 таблицы (по духу) — диагональный свайп в видео
   переосмыслен как горизонтальный wipe между состояниями страницы.
   Работает как для cross-document переходов (реальные разные
   HTML-страницы — см. @view-transition ниже), так и для
   document.startViewTransition() внутри одной страницы (см. animations.js). */
@view-transition{
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
::view-transition-old(root){
  animation-name: fx-wipe-out;
}
::view-transition-new(root){
  animation-name: fx-wipe-in;
}
@keyframes fx-wipe-out{
  to{ clip-path: inset(0 0 0 100%); }
}
@keyframes fx-wipe-in{
  from{ clip-path: inset(0 100% 0 0); }
  to{ clip-path: inset(0 0 0 0); }
}

/* Уменьшенное движение — переход схлопывается до короткого fade */
html.reduced-motion::view-transition-old(root),
html.reduced-motion::view-transition-new(root){
  animation: fx-fade 0.25s ease both;
}
@keyframes fx-fade{ from{ opacity: 0; } to{ opacity: 1; } }

/* CSS-фолбэк для браузеров без View Transitions API (см. animations.js) */
.fx-fallback-fade{
  animation: fx-fade 0.4s ease both;
}