/* ============================================================================
   site/show.css — «Смена»: одна прикнопленная сцена показа приложения.

   Два состояния одной разметки — тот же приём, что у фильма:

   • БЕЗ класса .show-on (нет JS или prefers-reduced-motion) — главы лежат
     столбиком, все сцены СРАЗУ в конечном состоянии: панель собрана, счётчики
     с числами, точки на карте. Законченный разворот, а не обломок.
   • С классом .show-on — липкая сцена 100svh: телефон стоит на месте, скролл
     листает главы, экраны сменяются внутри рамки, свет секции проживает день.
     Прозрачности и сдвиги глав считает show.js (каждый кадр, без transition);
     внутренние фазы сцен — классы .p-* c CSS-переходами, поэтому они играют
     и вперёд, и назад.

   Движение только transform и opacity. Ничего не мигает вечно: единственная
   «пульсация» (кольцо руки) детерминирована прогрессом скролла.
   ========================================================================== */

/* ── общее ──────────────────────────────────────────────────────────── */

.show-track{ position:relative }

.show-frame{ position:relative; height:100% }

.show-ch{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(30px,4.5vw,72px);
  align-items:center;
}
.show-copy{ display:grid; gap:15px; align-content:center; max-width:52ch }
.show-copy h3{ font-size:clamp(25px,2.6vw,44px); line-height:1.06; max-width:17ch }
.show-copy .show-p{ color:var(--muted); max-width:44ch }

.show-stagebox{ position:relative; display:flex; justify-content:center }

/* столбик-фолбэк: главы с воздухом, чётные — телефон слева */
.show-sect:not(.show-on) .show-track{ display:grid; gap:clamp(64px,9vh,120px); padding:clamp(36px,5vh,72px) var(--pad) 0 }
.show-sect:not(.show-on) .show-stage{ display:contents }
.show-sect:not(.show-on) .show-light,
.show-sect:not(.show-on) .show-rail{ display:none }
.show-sect:not(.show-on) .show-frame{ display:grid; gap:clamp(64px,9vh,120px); max-width:var(--maxw); margin:0 auto }
.show-sect:not(.show-on) .show-ch:nth-child(even) .show-stagebox{ order:-1 }

/* ── телефон ────────────────────────────────────────────────────────── */

.show-phone{
  position:relative;
  width:clamp(268px, min(23vw, 44svh), 348px);
  padding:10px;
  border-radius:clamp(42px,3.6vw,54px);
  background:linear-gradient(165deg,#232E28,#0A100D 62%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 48px 90px -38px rgba(0,0,0,.72),
    0 18px 40px -22px rgba(0,0,0,.5);
}
/* Экраны сняты без статус-бара — фальшивый «остров» закрывал бы настоящую
   шапку приложения, поэтому его нет: рамка, экран, один статичный блик. */
.show-phone::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(112deg,
    transparent 40%, rgba(255,255,255,.085) 46%,
    rgba(255,255,255,.02) 54%, transparent 59%);
}
/* Подложка экрана — пятно самого снимка (site/lqip.css), а не светлая
   плоскость: снимок помечен lazy и весит под сотню килобайт, и раньше на его
   месте секунду-две висел белый прямоугольник. Пятно двадцать пикселей
   шириной, растянутое до трёхсот, читается как «картинка грузится», а не как
   «здесь пусто». Позиция и обрезка — те же, что у самого <img> ниже, иначе
   подмена заметна прыжком. */
.show-screen{
  position:relative; overflow:hidden;
  border-radius:clamp(32px,2.9vw,44px);
  aspect-ratio:390/844;
  background:var(--bg) var(--lqip, none) top center / cover no-repeat;
}
.show-screen img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:top center;
  will-change:transform;
}

/* ── панель-сцена (тёмное стекло) ───────────────────────────────────── */

.show-panel{
  position:relative;
  border-radius:20px;
  padding:15px 17px 13px;
  background:linear-gradient(165deg, rgba(23,37,30,.94), rgba(12,20,16,.9));
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:var(--hair);
  box-shadow:var(--bevel), 0 26px 52px -22px rgba(0,0,0,.66);
  display:grid; gap:11px;
}
.show-panel.on-phone{
  position:absolute; z-index:5;
  left:50%; bottom:-22px;
  width:min(322px,106%);
  transform:translateX(-50%);
}
.show-copy .show-panel{ margin-top:6px; max-width:390px }

.sp-voice{ display:flex; gap:10px; align-items:center }
.sp-mic{
  flex:0 0 34px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--acc-lit),var(--acc-d));
  color:var(--ink-on-acc);
  box-shadow:0 6px 14px -6px rgba(29,158,117,.75);
}
.sp-mic .ic{ width:17px; height:17px; stroke-width:2.2 }
.sp-say{ font-weight:600; font-size:15px; line-height:1.35; min-height:2.7em; margin:0 }
/* каретка — псевдоэлемент: печать переписывает textContent каждый кадр,
   и дочерний <span> она бы стирала */
.show-on .sp-say.typing::after{
  content:""; display:inline-block; width:2px; height:1em; margin-left:2px;
  background:var(--acc-lit); vertical-align:-2px;
}

.sp-rows{ list-style:none; margin:0; padding:0; display:grid; gap:7px }
.sp-rows li{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:13px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
  font-size:14.5px;
}
.sp-rows .ic{ width:17px; height:17px; color:var(--acc-lit); flex:0 0 auto }
.sp-rows b{ font-weight:600 }
.sp-rows span{ margin-left:auto; color:var(--muted); font-size:13.5px; white-space:nowrap }

.sp-foot{
  display:flex; align-items:center; gap:7px;
  color:var(--muted); font-size:13px; margin:0;
}
.sp-foot .ic{ width:14px; height:14px; color:var(--acc-lit) }

.sp-chips{ display:flex; flex-wrap:wrap; gap:8px }
.sp-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  font-weight:600; font-size:13.5px; letter-spacing:.01em;
  background:rgba(63,211,162,.13); color:var(--acc-lit);
  border:1px solid rgba(63,211,162,.28);
}
.sp-chip.is-gold{
  background:var(--gold-soft); color:var(--gold);
  border-color:var(--gold-edge);
}

.sp-stat{ display:grid; gap:2px }
.sp-stat-l{ color:var(--muted); font-size:13px }
.sp-num{
  font-family:"Space Grotesk", Manrope, sans-serif;
  font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(26px,2.2vw,34px); letter-spacing:-.02em; line-height:1.1;
  white-space:nowrap;
}
.sp-num small{ font-size:.52em; font-weight:600; color:var(--muted); letter-spacing:0 }
.sp-num.is-gold{ color:var(--gold) }

.sp-done{
  display:flex; align-items:center; gap:7px;
  color:var(--muted); font-size:13px; margin:0;
}
.sp-done .ic{ width:14px; height:14px; color:var(--acc-lit) }

.sp-grid3{ display:grid; grid-template-columns:1fr 1fr; gap:12px 18px }
.sp-grid3 .sp-stat:last-child{ grid-column:1 / -1 }

/* ── карта зала ─────────────────────────────────────────────────────── */

.zal-wrap{
  position:relative; overflow:hidden;
  width:min(640px,100%);
  border-radius:22px;
  border:var(--hair);
  box-shadow:var(--shadow), var(--bevel);
  background:var(--bg) var(--lqip, none) top center / cover no-repeat;
}
/* height:auto обязателен: атрибут height="616" без него срабатывает как
   презентационный height:616px, и карта растягивается на любой ширине. */
.zal-wrap img{ width:100%; height:auto; display:block }

.zal-dot{
  position:absolute; z-index:2;
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--paper-ink);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.85), 0 2px 6px rgba(0,0,0,.3);
}
.zal-dot.is-staff{
  background:transparent;
  box-shadow:inset 0 0 0 2.6px var(--acc), 0 0 0 2.5px rgba(255,255,255,.85), 0 2px 6px rgba(0,0,0,.28);
}

.zal-ring{
  position:absolute; z-index:2;
  width:36px; height:36px; margin:-18px 0 0 -18px; border-radius:50%;
  border:3px solid var(--gold);
  opacity:0;
}

.zal-badge{
  position:absolute; z-index:3;
  transform:translate(-50%,-135%);
  display:flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:999px;
  background:rgba(10,17,14,.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.6);
  font-size:13px; font-weight:600; color:var(--ink);
  white-space:nowrap;
}
.zal-badge i{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:0 0 auto }
/* без .show-on показываем финал истории: официант уже подошёл */
.zal-badge .t1{ display:none }
.zal-badge.done i,
.show-sect:not(.show-on) .zal-badge i{ background:var(--acc-lit) }
.show-on .zal-badge .t1{ display:inline }
.show-on .zal-badge .t2{ display:none }
.show-on .zal-badge.done .t1{ display:none }
.show-on .zal-badge.done .t2{ display:inline }

/* подпись честности */
.show-note{
  margin-top:clamp(28px,4vh,48px);
  color:var(--dim); font-size:13.5px; max-width:64ch;
}

/* ════════════════════ ЛИПКАЯ СЦЕНА (.show-on) ══════════════════════ */

.show-on .show-track{ height:540svh }
.show-on .show-stage{
  position:sticky; top:0;
  height:100svh;
  overflow:clip;
}

/* свет времени суток: четыре слоя, прозрачность ведёт show.js.

   Слои живут внутри липкой сцены, а у сцены overflow:clip — значит свет
   кончается ровно по её кромке. Пока сцена приколота, кромка за экраном и
   этого не видно, но в самом начале и в самом конце раздела она въезжает в
   кадр, и по всей ширине встаёт горизонтальная линия: сверху и снизу от неё
   зелень разного оттенка. Гасим свет маской у обоих краёв — тогда сцена не
   кончается, а растворяется. */
.show-light{ position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, #000 clamp(56px,9vh,110px),
    #000 calc(100% - clamp(56px,9vh,110px)), transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0, #000 clamp(56px,9vh,110px),
    #000 calc(100% - clamp(56px,9vh,110px)), transparent 100%) }
.show-light .sl{ position:absolute; inset:-10%; opacity:0; will-change:opacity }
.sl-1{ background:
  radial-gradient(120% 90% at 14% 108%, rgba(242,198,98,.16), transparent 55%),
  radial-gradient(100% 80% at 82% -8%, rgba(63,211,162,.13), transparent 60%) }
.sl-2{ background:
  radial-gradient(110% 85% at 78% -6%, rgba(63,211,162,.17), transparent 58%),
  radial-gradient(90% 70% at 12% 112%, rgba(63,211,162,.09), transparent 60%) }
.sl-3{ background:
  radial-gradient(120% 95% at 16% 112%, rgba(242,198,98,.13), transparent 55%),
  radial-gradient(110% 85% at 86% -4%, rgba(21,128,96,.2), transparent 62%) }
.sl-4{ background:
  radial-gradient(130% 100% at 80% 112%, rgba(63,211,162,.13), transparent 60%),
  radial-gradient(100% 80% at 12% -6%, rgba(10,16,13,.55), transparent 70%) }

.show-on .show-frame{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad);
}

/* главы друг на друге; прозрачность и сдвиг ставит show.js инлайном */
.show-on .show-ch{
  position:absolute; inset:0;
  padding:clamp(70px,9vh,110px) var(--pad) clamp(28px,4vh,56px);
  left:0; right:0;
  opacity:0; pointer-events:none;
  will-change:opacity,transform;
}
.show-on .show-ch.is-live{ pointer-events:auto }
/* рамки телефонов у всех глав в одном месте — читается как ОДИН телефон */
.show-on .show-ch .show-stagebox{ order:2 }

.show-on .show-copy{ will-change:transform }

/* внутренние фазы: до классов .p-* всё спрятано, классы включают каскады.
   Переходы двусторонние — снял класс, и сцена играет назад. */
.show-on .show-panel{
  opacity:0; transform:translate3d(0,22px,0) scale(.98);
  transition:opacity .5s var(--e-reveal), transform .5s var(--e-reveal);
}
.show-on .show-panel.on-phone{ transform:translate(-50%,18px) scale(.97) }
.show-on .show-ch.p-panel .show-panel{ opacity:1; transform:translate3d(0,0,0) scale(1) }
.show-on .show-ch.p-panel .show-panel.on-phone{ transform:translate(-50%,0) scale(1) }

/* до заполнения строки видны призраками — панель не выглядит пустой,
   и видно, ЧТО сейчас появится */
.show-on .sp-rows li{
  opacity:.13; transform:translate3d(-14px,0,0);
  transition:opacity .4s var(--e-micro), transform .4s var(--e-micro);
}
.show-on .p-typed .sp-rows li:nth-child(1){ opacity:1; transform:none; transition-delay:.05s }
.show-on .p-typed .sp-rows li:nth-child(2){ opacity:1; transform:none; transition-delay:.2s }
.show-on .sp-foot{ opacity:0; transition:opacity .45s var(--e-micro) .45s }
.show-on .p-typed .sp-foot{ opacity:1 }

.show-on .sp-chip{
  opacity:0; transform:translate3d(0,-20px,0) scale(.9);
  transition:opacity .45s var(--e-reveal), transform .45s var(--e-reveal);
}
.show-on .p-chips .sp-chip:nth-child(1){ opacity:1; transform:none; transition-delay:.02s }
.show-on .p-chips .sp-chip:nth-child(2){ opacity:1; transform:none; transition-delay:.16s }
.show-on .sp-done{ opacity:0; transition:opacity .4s var(--e-micro) }
.show-on .p-done .sp-done{ opacity:1 }
.show-on .p-chip3 .sp-chips .sp-chip{ opacity:1; transform:none }

.show-on .zal-dot{
  transform:scale(0);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.show-on .p-dots .zal-dot:nth-of-type(1){ transform:scale(1); transition-delay:.02s }
.show-on .p-dots .zal-dot:nth-of-type(2){ transform:scale(1); transition-delay:.12s }
.show-on .p-dots .zal-dot:nth-of-type(3){ transform:scale(1); transition-delay:.22s }
.show-on .p-dots .zal-dot:nth-of-type(4){ transform:scale(1); transition-delay:.32s }
.show-on .p-dots .zal-dot:nth-of-type(5){ transform:scale(1); transition-delay:.42s }

.show-on .zal-badge{
  opacity:0; transform:translate(-50%,-135%) scale(.9);
  transition:opacity .4s var(--e-micro), transform .4s var(--e-micro);
}
.show-on .p-badge .zal-badge{ opacity:1; transform:translate(-50%,-135%) scale(1) }
.zal-badge i{ transition:background .3s }

/* рельса времени */
.show-rail{
  position:absolute; z-index:6;
  right:calc(var(--pad)*.4); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:16px; align-items:flex-end;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.show-rail-bar{
  position:absolute; right:-14px; top:-6px; bottom:-6px;
  width:2px; border-radius:1px; background:rgba(255,255,255,.12);
  overflow:hidden;
}
.show-rail-bar b{
  position:absolute; inset:0;
  background:var(--acc-lit);
  transform-origin:top;
  transform:scaleY(0);
}
.show-rail-i{ transition:color .3s, opacity .3s; opacity:.75 }
.show-rail-i.is-on{ color:var(--ink); opacity:1 }
.show-rail-i.is-past{ color:var(--muted) }

/* ── узкий экран ────────────────────────────────────────────────────── */

@media (max-width:880px){
  /* Четыре главы на 5,4 экрана — это полтора экрана прокрутки на каждую,
     и телефон половину пути стоит неподвижно. Даём главе экран с небольшим
     запасом: анимация внутри та же, просто без простоя между сценами. */
  .show-on .show-track{ height:420svh }

  .show-ch{ grid-template-columns:1fr; gap:22px }
  .show-sect:not(.show-on) .show-ch:nth-child(even) .show-stagebox{ order:-1 }
  .show-copy{ max-width:none }
  .show-copy .show-panel{ max-width:none }
  .show-copy h3{ font-size:clamp(24px,6.4vw,30px) }

  /* сцена: телефон сверху, текст прижат к низу */
  .show-on .show-ch{
    display:block;
    padding:64px var(--pad) calc(14px + env(safe-area-inset-bottom));
  }
  .show-on .show-ch .show-stagebox{
    position:absolute; top:56px; left:0; right:0;
    display:flex; justify-content:center;
  }
  .show-on .show-phone{ width:min(calc(56svh / 2.32), 63vw) }
  /* панель шириной от экрана, не от телефона — иначе на узком телефоне
     она сжимается в столбик слов */
  .show-on .show-panel.on-phone{ bottom:-26px; width:min(324px, 88vw) }
  .show-on .show-copy{
    position:absolute; left:var(--pad); right:var(--pad);
    bottom:calc(14px + env(safe-area-inset-bottom));
    gap:9px;
  }
  .show-on .show-copy .show-p{ font-size:14.5px }
  .show-on .show-copy .show-panel{ display:none }  /* сцену несёт телефон */
  .show-on .show-ch[data-scene="sklad"] .show-copy .show-panel,
  .show-on .show-ch[data-scene="pulse"] .show-copy .show-panel{
    display:grid; margin-top:4px;
  }
  .show-on .show-ch[data-scene="pulse"] .sp-grid3{ grid-template-columns:1fr 1fr; gap:8px 14px }
  .show-on .show-ch[data-scene="pulse"] .sp-num{ font-size:22px }
  .show-on .show-ch[data-scene="sklad"] .sp-num{ font-size:24px }
  /* на телефоне текст глав 2–3 короче: абзац прячем, говорит панель */
  .show-on .show-ch[data-scene="sklad"] .show-p,
  .show-on .show-ch[data-scene="pulse"] .show-p{ display:none }
  .show-on .show-ch-zal .show-stagebox{ top:96px }
  .show-on .zal-wrap{ width:min(92vw, 520px) }
  .show-rail{ display:none }
}

/* при «уменьшить движение» JS не включает .show-on — столбик-фолбэк уже
   стоит в конечных состояниях, добивать ничего не нужно */