/* ============================================================
   sections/cat-journey.css — «Котик уже не ждёт» (блок3).
   Подключается после final.css, до adaptive.css — порядок
   sections/* трогать нельзя (см. шапку story.css).

   Десктоп (≥981px) не меняется вообще: .final__panel--desktop —
   это прежний .final__panel, final.css им и рулит. Здесь только
   его скрытие на мобильном + вся раскладка .cat-journey.

   Прогрессивное усиление, без второго источника состояния:
   - по умолчанию (без JS / prefers-reduced-motion) — обычный
     статичный стек: первый кадр кота, все три акта текстом друг
     под другом, сразу QR и кнопки. Ничего не закреплено, скроллится
     как обычный контент.
   - assets/js/modules/cat-journey/index.js добавляет класс
     .cat-journey--live только когда сам ScrollTrigger-пин реально
     запущен (≤768px, без reduced-motion) — тогда сцена закрепляется,
     и видимость акта переключает data-cat-act на .cat-journey__scene
     (тот же приём, что data-order-phase в story.css).
   QR/кнопки в конце — обычный [data-reveal] (base.css), тот же
   fade-up, что и у остальных секций сайта, отдельной логики не надо.
   ============================================================ */

.cat-journey{display:none}

@media (max-width:980px){
  .final__panel--desktop{display:none}
  .cat-journey{display:block;padding:64px 0 24px}

  .cat-journey__intro{text-align:center;padding:0 24px 36px}
  .cat-journey__intro h2{
    font-family:var(--font-display);font-size:clamp(32px,9vw,46px);
    text-transform:uppercase;line-height:1.05;color:var(--ink)
  }
  .cat-journey__intro .lead{margin-top:10px;color:var(--ink-2)}

  /* ---- Сцена: по умолчанию обычный статичный блок ---- */
  .cat-journey__scene{position:relative;padding:0 24px}

  /* Атмосферные пятна за карточкой — тот же приём, что у .final__panel::after
     (радиальный градиент + keyframe floaty), просто мягче и дальше от глаз. */
  .cat-journey__ambient{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
  .cat-journey__ambient--a{
    left:8%;top:6%;width:46%;aspect-ratio:1;
    background:radial-gradient(circle,rgba(255,154,61,.16),transparent 70%);
    animation:floaty 8s ease-in-out infinite;
  }
  .cat-journey__ambient--b{
    right:4%;bottom:10%;width:56%;aspect-ratio:1;
    background:radial-gradient(circle,rgba(255,90,31,.12),transparent 70%);
    animation:floaty 10s ease-in-out infinite reverse;
  }

  .cat-journey__visuals{
    position:relative;z-index:1;aspect-ratio:4/5;width:min(100%,320px);margin:0 auto 28px;
    border-radius:var(--r-lg);overflow:hidden;background:var(--fire-soft);
    box-shadow:0 0 0 0 rgba(255,90,31,0);
  }
  /* Обёртка — то, чем управляет таймлайн (autoAlpha/y/scale/rotation при
     смене акта). Сам <img> внутри — постоянно «дышит» независимо, поэтому
     у двух твинов разные элементы и они не спорят за transform. */
  .cat-journey__cat-wrap{
    position:absolute;inset:0;opacity:0;transform-origin:50% 100%;
  }
  .cat-journey__cat-wrap[data-cat-frame="1"]{opacity:1}
  .cat-journey__cat{
    display:block;width:100%;height:100%;
    object-fit:contain;object-position:center bottom;
    transform-origin:50% 100%;
  }

  /* Направляющая для следов лапок ниже — чистая геометрия для MotionPath,
     на экране её не видно (не рисуем ни линию, ни точку — рисованная
     кривая поверх иллюстрации смотрелась искусственно). */
  .cat-journey__route-guide{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
  .cat-journey__route-guide-path{fill:none;stroke:none}

  /* Следы лапок — index.js расставляет их по направляющей выше и
     проявляет по одному вслед за скроллом, будто кот идёт по сцене.
     Свежий след ярче, предыдущие приглушаются (see index.js). */
  .cat-journey__paws{position:absolute;inset:0;z-index:2;pointer-events:none}
  .cat-journey__paw{position:absolute;top:0;left:0;width:17px;height:17px;color:var(--fire);opacity:0}

  /* Разовая «вспышка» экрана телефона при получении заказа (акт 2) —
     мягкий радиальный градиент, не постоянный blur. */
  .cat-journey__flash{
    position:absolute;z-index:2;left:50%;top:38%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.5);
    border-radius:50%;pointer-events:none;opacity:0;
    background:radial-gradient(circle,rgba(255,205,140,.9) 0%,rgba(255,154,61,.4) 45%,transparent 72%);
  }

  /* Сердечки акта 3 — добавка к тем, что уже нарисованы в самом кадре
     cat-happy-full.webp: эти летают и гаснут по stagger, а не стоят статично. */
  .cat-journey__hearts{position:absolute;inset:0;z-index:3;pointer-events:none}
  .cat-journey__heart{position:absolute;width:20px;height:20px;color:var(--fire);opacity:0}
  .cat-journey__heart--1{top:10%;right:14%}
  .cat-journey__heart--2{top:22%;right:2%;width:15px;height:15px}
  .cat-journey__heart--3{top:2%;right:28%;width:13px;height:13px}

  .cat-journey__acts{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0 0 32px;padding:0}
  .cat-journey__act{
    display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:var(--r-md);
    background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);
  }
  /* Unbounded подключён только в 700/800/900 — вес задаём явно, иначе
     браузер синтезирует начертание из ближайшего и буквы «плывут». */
  .cat-journey__act-num{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--fire)}
  .cat-journey__act h3{
    font-family:var(--font-display);font-weight:800;font-size:19px;
    line-height:1.16;letter-spacing:-.02em;margin:2px 0 6px;color:var(--ink);
  }
  .cat-journey__act p{margin:0;color:var(--ink-2);font-size:14.5px}

  .cat-journey__actions{display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 24px;text-align:center}
  .cat-journey__buttons{display:flex;flex-direction:column;gap:14px;width:100%;max-width:320px}
  .cat-journey__status{
    display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:100px;
    background:var(--lime-bg);border:1px solid rgba(91,191,23,.4);font-weight:800;color:#4a9c12;
  }
  .cat-journey__status .ck{
    width:22px;height:22px;border-radius:50%;background:var(--lime);color:#fff;
    display:grid;place-items:center;font-size:14px;
  }

  /* ============================================================
     ЖИВОЙ РЕЖИМ — только когда JS реально запустил ScrollTrigger-пин
     (≤768px, без prefers-reduced-motion). Класс ставит и снимает
     assets/js/modules/cat-journey/index.js через gsap.matchMedia().
     ============================================================ */
  /* Живая сцена выходит за 18px-гаттеры .container: сцена красит фон
     (тёплеет к акту 3), и внутри колонки он обрывался, оставляя по краям
     экрана холодные вертикальные полосы. Full-bleed делаем на обёртке, а не
     на самой сцене — сцену пинит ScrollTrigger и обнуляет ей margin. */
  .cat-journey--live{width:100vw;margin-left:calc(50% - 50vw)}

  .cat-journey--live .cat-journey__scene{
    height:100svh;box-sizing:border-box;overflow:hidden;
    padding:calc(20px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;justify-content:center;gap:24px;
    /* Атмосфера теплеет к акту 3 — значение по кадрам пишет GSAP-таймлайн
       (index.js, уже сглажено scrub'ом), здесь только стартовый цвет. */
    background-color:var(--bg);
  }
  /* Ширина карточки ограничена ещё и высотой экрана: пропорция 4/5 значит
     height = width * 1.25, и на низких экранах (360×640, 375×667, SE)
     фиксированные 280px давали карточку, верх которой уезжал под
     фиксированную шапку — котику срезало уши. 34svh держит верхний край
     ниже шапки на любом телефоне, а на высоких (390×844+) ограничение не
     срабатывает вовсе и раскладка остаётся прежней. */
  .cat-journey--live .cat-journey__visuals{margin:0 auto;width:min(100%,280px,34svh);flex-shrink:0}
  .cat-journey--live .cat-journey__hearts,
  .cat-journey--live .cat-journey__ambient,
  .cat-journey--live .cat-journey__paws{display:block}
  .cat-journey__hearts,.cat-journey__ambient,.cat-journey__paws{display:none}

  .cat-journey--live .cat-journey__acts{position:relative;min-height:150px;margin-bottom:0}
  .cat-journey--live .cat-journey__act{
    position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.96);
    transition:opacity .35s var(--ease),transform .4s cubic-bezier(.34,1.56,.64,1);
    pointer-events:none;background:transparent;border:0;box-shadow:none;padding:0 8px;text-align:center;
  }
  .cat-journey--live .cat-journey__scene[data-cat-act="1"] .cat-journey__act[data-act="1"],
  .cat-journey--live .cat-journey__scene[data-cat-act="2"] .cat-journey__act[data-act="2"],
  .cat-journey--live .cat-journey__scene[data-cat-act="3"] .cat-journey__act[data-act="3"]{
    opacity:1;transform:translateY(0);pointer-events:auto;
  }

  /* Низкие экраны (SE-класс, Android 640, развёрнутый браузерный UI):
     резерв под шапку сверху + собранная типографика акта. Тот же приём и
     тот же порог логики, что у короткого брейкпоинта .ways выше. */
  @media (max-height:680px){
    .cat-journey--live .cat-journey__scene{
      padding-top:calc(64px + env(safe-area-inset-top));gap:16px;
    }
    .cat-journey--live .cat-journey__acts{min-height:126px}
    .cat-journey--live .cat-journey__act-num{font-size:17px}
    .cat-journey--live .cat-journey__act h3{font-size:17px}
    .cat-journey--live .cat-journey__act p{font-size:13.5px}
  }
}