/* ============================================================
   BUDNI · ANIMATIONS · 11 ТОЧЕК
   ============================================================
   Архитектура:
   - Общий движок: .anim-in[data-anim="..."] + --d (delay) +
     --dist (translateY дистанция). Финальное состояние
     задаётся ВСЕГДА. Стартовое — только пока нет .in.
     Сцена анимируется одним переходом transform/opacity.
   - Сигнатурные приёмы (Hero kinetic 350, Шашлык split,
     Шашлык дым/угли/glow, Таймлайн scrub, Counter 2000+) —
     отдельные секции ниже + кастомная логика в animations.js
   - prefers-reduced-motion: глобальный override в самом конце
   - mobile (<=768px): уменьшенные дистанции и длительности
   ============================================================ */

/* ============ ОБЩИЙ ДВИЖОК .anim-in ============ */
.anim-in{
  --d: 0ms;            /* per-element delay (stagger) */
  --dist: 30px;        /* translate distance */
  --dur: 500ms;        /* duration */
  opacity: 0;
  transform: translateY(var(--dist));
  transition:
    opacity var(--dur) cubic-bezier(.16,1,.3,1) var(--d),
    transform var(--dur) cubic-bezier(.16,1,.3,1) var(--d),
    filter var(--dur) cubic-bezier(.16,1,.3,1) var(--d);
  will-change: transform, opacity;
}
.anim-in.in{
  opacity: 1;
  transform: none;
  filter: none;
}
/* варианты движения */
.anim-in[data-anim="up"]       { transform: translateY(var(--dist)); }
.anim-in[data-anim="up-sm"]    { --dist: 15px; transform: translateY(var(--dist)); }
.anim-in[data-anim="up-md"]    { --dist: 20px; transform: translateY(var(--dist)); }
.anim-in[data-anim="left"]     { transform: translateX(calc(var(--dist) * -1)); }
.anim-in[data-anim="right"]    { transform: translateX(var(--dist)); }
.anim-in[data-anim="scale-in"] { transform: scale(.9); }
.anim-in[data-anim="scale-in"].in{ transform: scale(1); }
/* back.out 1.7 — для bounce CTA */
.anim-in[data-anim="bounce-in"]{
  transform: scale(.9);
  transition:
    opacity 400ms cubic-bezier(.34,1.56,.64,1) var(--d),
    transform 400ms cubic-bezier(.34,1.56,.64,1) var(--d);
}
.anim-in[data-anim="bounce-in"].in{ transform: scale(1); }

/* ============ HERO · KEN BURNS НА ВИДЕО-ФОНЕ ============ */
/* Запускается на page load (не через IO), 8s ease-out */
@keyframes heroKenBurns{
  0%   { transform: scale(1.10); }
  100% { transform: scale(1.00); }
}
.hero-video-bg{
  animation: heroKenBurns 8s ease-out both;
  transform-origin: center center;
}

/* ============ HERO · СТУПЕНЧАТОЕ ПОЯВЛЕНИЕ ============ */
/* Все .hero-* стартуют в скрытом состоянии и появляются
   по фиксированной шкале от загрузки */
.hero .hero-eyebrow,
.hero .hero-h1,
.hero .hero-h2,
.hero .hero-benefits,
.hero .hero-cta-row,
.hero .hero-micro{
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}
.hero.hero-anim-ready .hero-eyebrow{
  animation: heroFadeIn 400ms cubic-bezier(.16,1,.3,1) 200ms forwards;
  --enterY: -10px;
}
.hero.hero-anim-ready .hero-h1{
  animation: heroFadeIn 500ms cubic-bezier(.16,1,.3,1) 350ms forwards;
  --enterY: 30px;
}
.hero.hero-anim-ready .hero-h2{
  animation: heroFadeIn 400ms cubic-bezier(.16,1,.3,1) 650ms forwards;
  --enterY: 20px;
}
.hero.hero-anim-ready .hero-benefits{
  animation: heroFadeIn 350ms cubic-bezier(.16,1,.3,1) 900ms forwards;
  --enterY: 15px;
}
/* CTA-строка появляется как блок (не stagger по кнопкам) */
.hero.hero-anim-ready .hero-cta-row{
  animation: heroFadeIn 400ms cubic-bezier(.16,1,.3,1) 1100ms forwards;
  --enterY: 20px;
}
.hero.hero-anim-ready .hero-micro{
  animation: heroFadeIn 400ms cubic-bezier(.16,1,.3,1) 1300ms forwards;
  --enterY: 10px;
}
/* стартовая translateY задаётся на каждом элементе уникально */
.hero .hero-eyebrow  { transform: translateY(-10px); }
.hero .hero-h1       { transform: translateY(30px); }
.hero .hero-h2       { transform: translateY(20px); }
.hero .hero-benefits { transform: translateY(15px); }
.hero .hero-cta-row  { transform: translateY(20px); }
.hero .hero-micro    { transform: translateY(10px); }

@keyframes heroFadeIn{
  to { opacity: 1; transform: none; }
}

/* HERO · «350» kinetic: свопится в JS на SVG, тут только
   контейнер. Знак ₽ — отдельный span. */
.hero-h1 .price-acc{
  display: inline-flex;
  align-items: baseline;
  gap: .08em;
  white-space: nowrap;
}
.hero-price-svg{
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: baseline;
  overflow: visible;
}
.hero-price-svg text{
  font-family: "Geologica", sans-serif;
  font-weight: 800;
  letter-spacing: -.04em;
  fill: transparent;
  stroke: var(--orange-500);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* dasharray/dashoffset выставляются в JS по реальной длине */
}
.hero-price-svg.drawn text{
  animation: heroPriceFill 300ms ease-out 800ms forwards;
}
@keyframes heroPriceFill{
  0%   { fill: transparent; stroke-opacity: 1; }
  100% { fill: var(--yellow-500); stroke-opacity: 0; }
}
.hero-price-rub{
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  color: var(--yellow-500);
  font-weight: 800;
  letter-spacing: -.04em;
  margin-left: .04em;
}
.hero-price-rub.in{
  animation: heroRub 300ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes heroRub{
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* Mobile fallback для kinetic 350 */
@media (max-width: 768px){
  .hero-price-svg text{
    fill: var(--yellow-500);
    stroke: transparent;
    stroke-width: 0;
    opacity: 0;
    transform-origin: center;
    transform: scale(.7);
    transition: opacity 400ms ease-out 800ms, transform 400ms ease-out 800ms;
  }
  .hero-price-svg.drawn text{
    animation: none;
    opacity: 1;
    transform: scale(1);
  }
}

/* ============ ШАШЛЫК · ВСЕ 5 СЛОЁВ (block 8 oживление v2) ============ */


/* (B) Разгорание (ignition) — ТОЛЬКО CSS filter, one-way (не реверсит на скролл вверх).
   Старт тёмный-тёплый (читается как угли), финал — золотой. */
.sh-photo .ph .sh-video-el,
.sh-photo .ph .poster-fallback{
  filter: brightness(.30) saturate(.80) sepia(.35) contrast(1.05); /* старт: силуэт в углях; дальше filter гонит scrub инлайном (без transition) */
}
/* финал разгорания (.sh-lit) больше не классом — его выставляет scrub-инлайн в upd() по прогрессу */
/* параллакс двигает видео (transform) + scrub пишет filter — промотируем оба свойства */
.sh-photo .ph .sh-video-el{ will-change: transform, filter; }


/* (C) Типографика-удар — каждое предложение со своей стороны */
.sh-h2.sh-split{
  /* отключаем общий flow — в JS оборачиваем 3 предложения в .sh-line-N */
}
.sh-line{
  display: block;
  opacity: 0;
  filter: blur(15px);
  will-change: transform, opacity, filter;
  transition: none; /* запускается через .sh-active .sh-line-N */
}
.shashlyk.sh-active .sh-line-1{
  animation: shLineDownIn 700ms cubic-bezier(.16,1,.3,1) 0ms forwards;
  --fromY: 80px;
}
.shashlyk.sh-active .sh-line-2{
  animation: shLineRightIn 700ms cubic-bezier(.16,1,.3,1) 200ms forwards;
}
.shashlyk.sh-active .sh-line-3{
  animation: shLineUpIn 700ms cubic-bezier(.16,1,.3,1) 400ms forwards;
}
@keyframes shLineDownIn{
  from { opacity: 0; transform: translateY(80px); filter: blur(15px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes shLineRightIn{
  from { opacity: 0; transform: translateX(120px); filter: blur(15px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes shLineUpIn{
  from { opacity: 0; transform: translateY(-80px); filter: blur(15px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* (D) Жар на заголовок — .sh-glow переиспользован: тёплый under-glow
   под словом «Шашлык» (.sh-line-1), fade-in + пульс синхронно углям. */
.sh-copy{ position: relative; }
.sh-glow{
  position: absolute;
  pointer-events: none;
  z-index: -1;                       /* ЗА словом «Шашлык», не поверх — читаемость сохранена */
  width: 460px; height: 320px;       /* ×0.7 — режем блюр-площадь (главный остаточный блюр блока 8) */
  left: 0; top: 50px;                /* центр СЛОЯ сохранён: +half от уменьшения w/h (left+100, top+70) */
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 32% 68%,
    rgba(255,176,72,.78) 0%,
    rgba(255,128,34,.42) 40%,
    rgba(255,112,26,.12) 64%,
    rgba(255,112,26,0) 78%
  );
  filter: blur(22px);
  opacity: 0;          /* opacity гонит scrub инлайном: импульс-вспышка к p≈0.55, затем оседание (без transition) */
  will-change: opacity;   /* промоция слоя — opacity-scrub на компоζиторе дешевле */
}
@keyframes shHeatPulse{
  0%,100% { opacity: .72; transform: scale(1); }
  50%     { opacity: .85; transform: scale(1.06); }
}

/* (E) CTA — обычный fade+up через .anim-in[data-anim="up-md"] */

/* ============ БЛОК 12 · ТАЙМЛАЙН SCRUB ============ */
/* Существующий .qc-line-fill уже работает по scroll progress.
   Дополнительно — узлы .qc-node активируются по достижении
   их Y-позиции и пульсируют. Текст приходит со своей стороны. */
.qc-step .qc-text{
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 500ms ease-out 200ms, transform 500ms ease-out 200ms;
  will-change: transform, opacity;
}
.qc-step:nth-child(odd) .qc-text{ transform: translateX(-30px); }
.qc-step:nth-child(even) .qc-text{ transform: translateX(30px); }
.qc-step.active .qc-text{ opacity: 1; transform: none; }
/* mobile: одна сторона — все тексты слева от линии (которая уезжает к левому краю) */
@media (max-width: 780px){
  .qc-step:nth-child(odd) .qc-text,
  .qc-step:nth-child(even) .qc-text{ transform: translateX(-20px); }
  .qc-step.active .qc-text{ transform: none; }
}

/* Узел: появление + pulse через 800ms */
.qc-node{
  transform: scale(.5);
  opacity: 0;
  transition: transform 400ms ease-out, opacity 400ms ease-out, background-color 300ms ease-out;
  will-change: transform, opacity;
}
.qc-node.active{
  transform: scale(1);
  opacity: 1;
}
.qc-node.active.pulsed{
  animation: qcNodePulse 800ms ease-out forwards;
}
@keyframes qcNodePulse{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ============ БЛОК 14 · 2000+ COUNTER ============ */
.counter-num{
  position: relative;
  display: inline-block;
}
.counter-plus{
  display: inline-block;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  margin-left: .03em;
  color: inherit;
}
.counter-plus.in{
  animation: counterPlus 300ms cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes counterPlus{
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
.counter-num.flash{
  animation: counterFlash 500ms ease-out forwards;
}
@keyframes counterFlash{
  0%   { text-shadow: 0 0 0 transparent; }
  30%  { text-shadow: 0 0 30px var(--yellow-500); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* ============ БЛОК 6 · СРАВНЕНИЕ — ПОСТРОЧНОЕ ПОЯВЛЕНИЕ ============ */
/* class .cmp-row-anim навешивается из animations.js на каждый
   <tr> в tbody таблицы и на каждый .cmp2-acc-row (мобильный
   аккордеон). IO с threshold 0.5 добавляет .in. */
.cmp-row-anim{
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  will-change: transform, opacity;
}
.cmp-row-anim.in{
  opacity: 1;
  transform: none;
}
/* group-row (заголовок группы) — без translateX, только fade,
   чтобы не дёргалась подложка */
.cmp2-table .group-row.cmp-row-anim{
  transform: none;
  transition: opacity 400ms ease-out;
}

/* ============ БЛОК 9 · INC-NUM count-up flash ============ */
.inc-num{
  display: inline-block;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.inc-num.flash{
  animation: incNumFlash 500ms ease-out forwards;
}
@keyframes incNumFlash{
  0%   { text-shadow: 0 0 0 transparent; }
  40%  { text-shadow: 0 0 24px var(--yellow-500); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* ============ FAQ · АДАПТИРОВАННЫЕ ТАЙМИНГИ ============ */
/* Существующая разметка: .faq-item.open .faq-a { max-height:600px }
   Перебиваем переход на 350ms cubic-bezier(.25,.46,.45,.94),
   стрелку — на 300ms, текст — fade-in 200ms с delay 100ms. */
.faq-item .faq-a{
  transition: max-height 350ms cubic-bezier(.25,.46,.45,.94);
}
.faq-item .faq-a-inner{
  opacity: 0;
  transition: opacity 200ms ease-out 0ms;
}
.faq-item.open .faq-a-inner{
  opacity: 1;
  transition: opacity 200ms ease-out 100ms;
}
/* стрелка ::after на .faq-q уже rotate(180) — синхронизируем easing */
.faq-q::after{
  transition: transform 300ms cubic-bezier(.25,.46,.45,.94) !important;
}

/* ============ БЛОК 10 · ПОДСВЕТКА ДНЯ В ЦЕНТРЕ (мобайл) ============ */
/* .in-center навешивается из animations.js только когда трек
   .menu-week скроллится горизонтально (<=760px). Анимируется
   существующим transition:transform на .menu-day. */
.menu-day.in-center{ transform: scale(1.02); }

/* ============ БЛОК 13 · ПАРАЛЛАКС ПОРТРЕТА ============ */
.chef-photo{
  will-change: transform;
}
@media (max-width: 768px){
  .chef-photo{ transform: none !important; }
}

/* ============ MOBILE АДАПТАЦИЯ (<=768px) ============ */
@media (max-width: 768px){
  .anim-in{
    --dist: 15px;
    --dur: 400ms; /* −20% к 500ms */
  }
  /* Шашлык: убираем motion-blur c типографики */
  .shashlyk.sh-active .sh-line-1,
  .shashlyk.sh-active .sh-line-2,
  .shashlyk.sh-active .sh-line-3{
    animation-duration: 560ms;
  }
  @keyframes shLineDownIn{
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes shLineRightIn{
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes shLineUpIn{
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: none; }
  }
  /* Hero Ken Burns: меньше амплитуда */
  @keyframes heroKenBurns{
    0%   { transform: scale(1.05); }
    100% { transform: scale(1.00); }
  }
}

/* ============ PREFERS-REDUCED-MOTION (ГЛОБАЛЬНЫЙ) ============ */
@media (prefers-reduced-motion: reduce){
  /* всё мгновенно в финальном состоянии */
  .anim-in,
  .anim-in.in,
  .anim-in[data-anim]{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .hero .hero-eyebrow,
  .hero .hero-h1,
  .hero .hero-h2,
  .hero .hero-benefits,
  .hero .hero-cta-row,
  .hero .hero-micro{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-video-bg{ animation: none !important; transform: none !important; }
  .hero-price-svg text{
    fill: var(--yellow-500) !important;
    stroke: transparent !important;
    animation: none !important;
  }
  .hero-price-rub{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* .sh-glow остаётся видимым — статичный жар, opacity ставит reduceMotion-ветка инлайном */
  .sh-line{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .qc-step .qc-text,
  .qc-node{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .counter-plus{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .counter-num.flash,
  .inc-num.flash{ animation: none !important; }
  .cmp-row-anim{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .chef-photo{ transform: none !important; }
  .hero-marquee-track,.trust-mar-track,.hero-video-anim,.hero-video-anim--2,.hero-video-anim--3,.scale-video-anim,.scale-video-anim--2,.scale-video-anim--3,.sh-stamp,.hero-glow,.hero-glow-2{ animation:none!important; }
}