/* ============================================================
   motion.css — слой движения для premium-landing-animated
   Только визуальное усиление. Палитру/типографику/верстку не меняет.
   Подключается ПОСЛЕ инлайн-<style> (чтобы переходы reveal включали filter).
   Заказ 3 из GEMINI_DESIGN_BRIEF.md: hero-видео + параллакс + усиленные reveal,
   тихий темп, prefers-reduced-motion, lazy-load, fallback на poster.
   ============================================================ */

/* --- HERO: слой-медиа (фото + видео) с овэрскэном под параллакс --- */
/* база .hero-media = inset-0 задаётся в разметке (Tailwind), постер не зависит от этого файла.
   Овэрскэн под параллакс вешаем через [data-parallax] — выше специфичность Tailwind .inset-0. */
.hero-media[data-parallax]{
  inset:-13% 0;                 /* запас под сдвиг параллакса (amp 0.08 · 1.26 ≈ 10% < 13%), край не оголяется */
  will-change:transform;
  transform:translate3d(0,var(--py,0),0);
}
/* видео поверх .hero-photo (постер). Появляется только когда реально играет. */
.hero-video{
  opacity:0;
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.hero-video.is-playing{opacity:1}
/* эхо-видео финала: тот же veo.mp4 (из кэша) внутри .hand-echo — наследует параллакс
   и opacity .85; до старта прозрачно (фото-постер под ним), играет только на экране */
.echo-video{opacity:0;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);pointer-events:none;object-position:60% 45%}
.echo-video.is-playing{opacity:1}
@media (max-width:640px){.echo-video{object-position:60% 42%}}

/* --- Параллакс атмосферных слоёв (сохраняем их scale, добавляем сдвиг) --- */
.breather-img[data-parallax]{
  transform:scale(1.12) translate3d(0,var(--py,0),0);  /* ближе к исходному 1.1; запас 6% > сдвиг 0.05·1.12≈5.6% */
  will-change:transform;
}
.hand-echo[data-parallax]{
  transform:scale(1.10) translate3d(0,var(--py,0),0);  /* запас 5% > сдвиг 0.04·1.1≈4.4% */
  will-change:transform;
}

/* --- Blur-in оставлен ТОЛЬКО заголовкам актов (.reveal--act, 5 мест: I–V).
   Рядовые .reveal — тихий opacity+translateY из инлайн-стиля (0.6s/14px), без блюра:
   одна хореография на акт, движение не «шумит». --- */
.reveal--act{
  filter:blur(3px);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1),
    filter .6s cubic-bezier(.16,1,.3,1);
}
.reveal--act.in{filter:blur(0)}

/* --- Бегущее золото по контуру CTA (адаптация механики 21st.dev
   animated-glowing-search-bar: вращающийся conic-gradient; вместо неона и hover —
   латунная палитра проекта и постоянное медленное вращение, работает и на мобиле).
   Кольцо: conic на ::after, ring-маска оставляет только линию границы.
   Гало: тот же conic на ::before, блюр, чуть шире — мягкое свечение за искрой. --- */
@property --orbit{syntax:'<angle>';initial-value:0deg;inherits:false}
/* Единственное движущееся золото страницы — луп на champagne-CTA 7 900 (.btn-orbit--loop),
   останавливается вне экрана (IO в motion.js). Разовые проходы (orbit-once) и рамки карточек
   (card-orbit) удалены: эксклюзивность жеста = премиум, золото ведёт к точке решения. */
.btn-orbit{position:relative;isolation:isolate}
.btn-orbit::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--orbit),
    transparent 0deg, rgb(var(--bright) / .95) 16deg, rgb(var(--accent) / .40) 38deg, transparent 64deg,
    transparent 180deg, rgb(var(--accent) / .50) 206deg, transparent 240deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0;
  pointer-events:none;
}
.btn-orbit::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;padding:4px;z-index:-1;
  background:conic-gradient(from var(--orbit),
    transparent 0deg, rgb(var(--accent) / .55) 18deg, transparent 60deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  filter:blur(6px);
  opacity:0;
  pointer-events:none;
}
.btn-orbit--loop.anim-live::after{opacity:1;animation:orbit-spin 6s linear infinite}
.btn-orbit--loop.anim-live::before{opacity:.65;animation:orbit-spin 6s linear infinite}
@keyframes orbit-spin{to{--orbit:360deg}}

/* === МОБИЛА: подложки секций тоньше (статичные радиалы фона просвечивают),
   карточки — стекло с читаемой кромкой. Тон-иерархия сохранена:
   champagne-прайс > card--map > card--quote > .card. Без backdrop-blur (перф). === */
@media (max-width:640px){
  /* подложка секций тоньше — свет фона проходит сквозь */
  .bg-surface\/60{background-color:rgb(var(--surface) / .45)!important}
  /* карточки-стекло: полупрозрачное тело + светлая кромка */
  .card{
    background:linear-gradient(150deg, rgb(255 255 255 / .07), transparent 40%),
               linear-gradient(155deg, rgb(var(--panel2) / .32), rgb(var(--panel) / .20));
    border-color:rgb(var(--ivory) / .20);
    /* стекло читается и без подсветки сзади: верхняя световая кромка */
    box-shadow:inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -1px 0 rgb(0 0 0 / .22), 0 26px 56px -34px rgba(0,0,0,.7);
  }
  .card--quote{background:linear-gradient(150deg, rgb(var(--accent) / .14), transparent 54%),
               linear-gradient(155deg, rgb(var(--panel2) / .30), rgb(var(--panel) / .20))}
  .card--map{background:radial-gradient(125% 95% at 14% -12%, rgb(var(--accent) / .22), transparent 56%),
             linear-gradient(155deg, rgb(var(--panel2) / .44), rgb(var(--panel) / .30))}
  .card-start{background:radial-gradient(120% 72% at 50% -12%, rgb(var(--accent) / .08), transparent 58%),
              linear-gradient(160deg, rgb(var(--panel2) / .38), rgb(var(--panel) / .34))}
}

/* --- Доступность: всё спокойно, без движения и без видео --- */
/* --- Мобильный hero: landscape-ролик (16:9) проявляется из темноты по центру экрана.
   cover на весь экран зумил в центр (видно ~32% кадра: только руки, ткань за кадром).
   Теперь: слой высотой 74vw (виден ~76% кадра — руки крупно + рубашка) с ЭЛЛИПТИЧЕСКОЙ
   маской-виньеткой: края растворяются по кривой во всех направлениях — никаких ровных
   горизонтальных границ, кадр «всплывает» из тьмы (как anchor-вуаль премиум-карточек).
   Параллакс/овэрскэн off. --- */
@media (max-width:640px){
  .hero-media[data-parallax]{
    inset:auto 0;
    top:57%;                       /* в нижней половине: ниже абзаца, в пустой зоне */
    height:80vw;
    transform:translateY(-50%);
    will-change:auto;
    -webkit-mask-image:radial-gradient(120% 68% at 50% 50%,#000 52%,rgba(0,0,0,.5) 64%,transparent 73%);
    mask-image:radial-gradient(120% 68% at 50% 50%,#000 52%,rgba(0,0,0,.5) 64%,transparent 73%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
  /* кадр сдвинут к узлу рук (клэсп ~46/52 кадра): руки читаются мгновенно, ткань в кадре */
  .hero-video{object-fit:cover!important;object-position:46% 52%}
  /* постер (квадрат 1:1) в той же зоне: руки по центру кадра */
  .hero-photo{background-size:cover!important;background-position:46% 52%}
  /* вуаль: десктопная (тёмный центр-радиал + плотная середина) глушила ролик в полосе.
     На мобиле: текст вверху → держим затемнение до конца абзаца (~44%), чтобы строки
     не ложились на светлую кисть; зона видео — почти прозрачна; к низу — в ink,
     чтобы слиться со стеклянной панелью ниже. Без радиала. */
  .hero-veil{background:linear-gradient(to bottom,
    rgb(var(--ink) / .80) 0%,
    rgb(var(--ink) / .58) 30%,
    rgb(var(--ink) / .38) 44%,
    rgb(var(--ink) / .14) 56%,
    rgb(var(--ink) / .20) 72%,
    rgb(var(--ink) / .9) 88%,
    rgb(var(--ink)) 100%)}
}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal--act,.stagger>*{filter:none!important}
  .btn-orbit::before,.btn-orbit::after{animation:none;content:none}
  /* постер во весь hero, без виньетки (маска нужна только мобильной видео-зоне) */
  .hero-media[data-parallax]{transform:none!important;inset:0!important;will-change:auto;-webkit-mask-image:none!important;mask-image:none!important}
  .breather-img[data-parallax]{transform:scale(1.12)!important}
  .hand-echo[data-parallax]{transform:scale(1.10)!important}
  .hero-video,.echo-video{display:none}
}