/* Стенд сюжета: одна липкая сцена, всё ведёт прогресс скролла (--p от 0 до 1) из js/syuzhet.js */

.syu{background:#0E0E0C}
.story{position:relative;height:780vh;background:#0E0E0C;color:#FBF6EA}
.story__pin{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,40fr) minmax(0,60fr);grid-template-rows:auto minmax(0,1fr)}
.story .topbar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter);position:relative;z-index:6}
.topbar__logo{font:500 13px/1 var(--f-mono);letter-spacing:.14em}
.topbar__note{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(251,246,234,.5)}

/* весь мир сначала выцветший; цвет возвращается вместе с прогрессом */
.acts{filter:grayscale(var(--gray,1)) sepia(calc(var(--gray,1) * .35)) brightness(calc(.82 + (1 - var(--gray,1)) * .18))}

/* акты слева: один на экране, сменяются кроссфейдом */
.acts{position:relative;z-index:5;align-self:center;padding:0 0 6vh var(--gutter);min-height:340px}
.act{position:absolute;left:var(--gutter);right:0;top:50%;max-width:560px;opacity:0;transform:translateY(calc(-50% + 30px));
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.act.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.act .kicker{display:block;margin-bottom:16px}
.act h1,.act h2{font-size:clamp(36px,3.8vw,60px);line-height:1.05;margin:0}
.act p{font-size:clamp(16px,1.2vw,18px);line-height:1.55;color:#D9D2C2;max-width:46ch;margin:18px 0 0}

/* шкала AI-native */
.meter{position:absolute;left:var(--gutter);bottom:26px;z-index:6;display:flex;align-items:center;gap:12px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.meter__bar{width:clamp(140px,18vw,260px);height:6px;border-radius:9px;background:rgba(251,246,234,.12);overflow:hidden}
.meter__bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--gold),#C6FF00)}
.meter b{font-weight:500;color:#C6FF00;min-width:4ch}

/* часы руками */
.clock{position:absolute;right:var(--gutter);top:76px;z-index:6;display:flex;align-items:center;gap:10px;font:500 11px/1.25 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,234,.7)}
.clock b{font:500 44px/1 var(--f-display);color:#FF7A59;min-width:2ch;text-align:right;transition:color .4s}
.clock.good b{color:#C6FF00}

/* сцена */
.stage{position:relative;z-index:2;height:100%}
.stage__glow{position:absolute;inset:10% -10% -10% 0;background:radial-gradient(55% 50% at 50% 72%,rgba(230,190,104,var(--glow,.18)),transparent 70%);pointer-events:none}
.tm{position:absolute;bottom:4%;height:80%;aspect-ratio:704/1248;transform:translateX(-50%)}
.tm__body{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}
.st{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:opacity .35s ease}
.st--posle{opacity:0}
.tm.after .st--do{opacity:0}
.tm.after .st--posle{opacity:1}
.shadow{position:absolute;left:18%;right:18%;bottom:-1%;height:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}

/* метки: красная — узкое место, лаймовая — результат */
.pain,.gain{position:absolute;left:50%;top:5%;z-index:4;white-space:nowrap;padding:9px 14px;border-radius:999px;font:500 13px/1 var(--f-body,inherit);
  transform:translate(-50%,-10px) scale(.7);opacity:0;transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.pain{background:#FF5A3C;color:#fff;box-shadow:0 0 0 6px rgba(255,90,60,.18)}
.gain{background:#C6FF00;color:#16171A;box-shadow:0 0 0 6px rgba(198,255,0,.18)}
.tm.marked .pain{opacity:1;transform:translate(-50%,0) scale(1)}
.tm.after .pain{opacity:0;transform:translate(-50%,-20px) scale(.6)}
.tm.after.shown.now .gain{opacity:1;transform:translate(-50%,0) scale(1)}

/* бумага, улетающая в агента; вспышка смены; конфетти */
.papers,.confetti{position:absolute;inset:0;pointer-events:none;z-index:5}
.paper{position:absolute;width:26px;height:34px;background:#F3EFE6;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.paper::before{content:"";position:absolute;left:5px;right:5px;top:7px;height:14px;background:repeating-linear-gradient(#bbb 0 1px,transparent 1px 4px)}
.flash{position:absolute;inset:0;background:radial-gradient(circle at var(--fx,50%) 60%,rgba(255,255,255,.95),rgba(230,190,104,.4) 30%,transparent 60%);opacity:0;pointer-events:none;z-index:6}
.bit{position:absolute;width:9px;height:14px;border-radius:2px}

.hint{position:absolute;right:var(--gutter);bottom:26px;margin:0;z-index:6;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(251,246,234,.5);transition:opacity .4s}

@media (max-width:899px){
  .story__pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,52svh) minmax(0,1fr)}
  .stage{grid-row:2}
  .acts{grid-row:3;padding:0 var(--gutter);min-height:0;align-self:stretch}
  .act{left:var(--gutter);right:var(--gutter);top:8px;transform:translateY(20px)}
  .act.on{transform:none}
  .act h1,.act h2{font-size:clamp(28px,7.6vw,36px)}
  .act p{font-size:15px;margin-top:10px}
  .clock{top:64px}
  .clock b{font-size:32px}
  .tm{height:88%}
  .pain,.gain{font-size:11px;padding:7px 10px}
  .meter{bottom:14px}
  .hint{display:none}
  .topbar__note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .act,.st,.pain,.gain{transition:none}
}

/* ── 30.10, правки по записи владельца ── */
/* счётчик часов — главная цифра сюжета, крупно */
.clock{top:70px;gap:14px}
.clock b{font-size:clamp(64px,6vw,96px);letter-spacing:-.02em}
.clock span{font-size:12px}

/* акт 1: бумага сыплется сверху, пока команда работает руками */
.rain{position:absolute;inset:-10% 0 0;overflow:hidden;pointer-events:none;z-index:0;opacity:var(--rain,1);transition:opacity .4s}
.drop{position:absolute;top:-60px;width:22px;height:30px;background:#E9E3D6;border-radius:2px;opacity:.55;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(115vh) rotate(var(--r,360deg))}}

/* ноутбук прилетает к герою; в него засасывает бумагу */
.lap{position:absolute;left:0;top:0;width:120px;height:84px;z-index:7;pointer-events:none;opacity:0;will-change:transform}
.lap__scr{position:absolute;left:8px;right:8px;top:0;height:64px;border-radius:7px 7px 2px 2px;background:#1c1d21;border:3px solid #3a3b40;
  box-shadow:0 0 0 0 rgba(198,255,0,0),inset 0 0 18px rgba(198,255,0,var(--glowL,0));transition:box-shadow .3s}
.lap__scr::after{content:"";position:absolute;inset:8px;border-radius:3px;background:linear-gradient(180deg,rgba(198,255,0,var(--glowL,0)),rgba(230,190,104,calc(var(--glowL,0) * .6)))}
.lap__base{position:absolute;left:0;right:0;bottom:6px;height:12px;border-radius:2px 2px 9px 9px;background:linear-gradient(#55565c,#2b2c30)}

/* 30.10: метки — над героем, на полу у него ничего не лежит; бумаги «бума» поверх сцены */
.confetti .paper{z-index:8}

/* 30.10: вспышка живёт на весь экран, а не внутри сцены — иначе в момент «бума» виден её левый край */
.story__pin>.flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--fx,60%) var(--fy,55%),rgba(255,255,255,.9),rgba(230,190,104,.35) 22%,rgba(230,190,104,0) 55%)}

/* 30.10: вся команда. Задний ряд выше и мельче, передний ближе. Ролики играют по очереди. */
.team{position:absolute;inset:0}
.tm--back{height:52%;bottom:33%;z-index:1}
.tm--front{height:62%;bottom:1%;z-index:2}
.tm[data-id="ray"]{left:9%}.tm[data-id="atan"]{left:24.5%}.tm[data-id="tyrna"]{left:40%}.tm[data-id="zanbek"]{left:55.5%}.tm[data-id="arai"]{left:71%}.tm[data-id="kyran"]{left:86.5%}
.tm[data-id="saya"]{left:15%}.tm[data-id="esep"]{left:32.5%}.tm[data-id="barsuk"]{left:50%}.tm[data-id="mira"]{left:67.5%}.tm[data-id="barys"]{left:85%}
video.st{opacity:0;transition:none}
.tm.run-do video.st--do,.tm.run-posle video.st--posle{opacity:1}
.tm.playing img.st{visibility:hidden}
.tm .pain,.tm .gain{top:9%}
.tm:not(.playing) .tm__body{animation:breathe 4.6s ease-in-out infinite alternate}
.tm:nth-child(even):not(.playing) .tm__body{animation-delay:-2.3s}
@keyframes breathe{to{scale:1 1.012}}
@media (max-width:899px){
  .tm--back{display:none}
  .tm--front{height:82%;bottom:1%}
  .tm[data-id="saya"]{left:12%}.tm[data-id="esep"]{left:31%}.tm[data-id="barsuk"]{left:50%}.tm[data-id="mira"]{left:69%}.tm[data-id="barys"]{left:88%}
}
@media (prefers-reduced-motion:reduce){ .tm .tm__body{animation:none!important} }

/* сообщение в чате финала не вылезает за окно */
.w--chat p:last-child{width:auto;margin-left:0}

/* ── финал: центр управления на весь экран ── */
.stage{pointer-events:none}
.tm{transform:translateX(-50%) translate(var(--dx,0),var(--dy,0)) scale(var(--s,1));transform-origin:50% 100%;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.stage:not(.final) .tm{--dx:0;--dy:0;--s:1}
.stage.final .tm{z-index:var(--tmz,2)}
.stage.final{translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 6px);transition:translate .4s ease-out}
.stage__glow{transition:opacity .6s}.stage.final .stage__glow{opacity:0}
.acts,.clock,.meter,.topbar__note,.hint{transition:opacity .45s}
.finale .acts,.finale .clock,.finale .meter,.finale .hint{opacity:0;pointer-events:none}

.wall{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 100%,rgba(230,190,104,.2),transparent 70%),radial-gradient(50% 45% at 50% 28%,rgba(198,255,0,.07),transparent 72%)}
.wall.on{opacity:1}
.wall__sun{position:absolute;left:50%;top:-40vh;width:120vw;height:120vh;translate:-50% 0;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 50%,transparent 0 20deg,rgba(230,190,104,.05) 26deg,transparent 34deg 70deg,rgba(198,255,0,.04) 78deg,transparent 88deg 150deg,rgba(230,190,104,.05) 160deg,transparent 170deg 360deg);
  animation:spin 60s linear infinite}
@keyframes spin{to{rotate:360deg}}
.wires{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.wire,.pulse{fill:none;stroke-linecap:round}
.wire{stroke:rgba(198,255,0,.22);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease var(--d)}
.wall.on .wire{stroke-dashoffset:0}
.pulse{stroke:#C6FF00;stroke-width:3;stroke-dasharray:.06 .94;filter:drop-shadow(0 0 5px #C6FF00);opacity:0}
.wall.on .pulse{opacity:1;animation:run 2.4s linear var(--d) infinite}
@keyframes run{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.wall__grid{position:absolute;z-index:2;left:2.2vw;right:2.2vw;top:2.4vh;height:58vh;display:grid;gap:10px;
  grid-template-columns:repeat(24,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr)) minmax(0,1.35fr);
  translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -8px);transition:translate .4s ease-out}
.wall__hero{grid-column:9/17;grid-row:1/5;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:10px 20px;pointer-events:auto;opacity:0;transform:scale(.8);transition:opacity .5s .2s,transform .9s cubic-bezier(.34,1.56,.64,1) .2s}
.wall.on .wall__hero{opacity:1;transform:none}
.wall__hero .kicker{margin:0 0 8px}
.wall__hero h2{font-size:clamp(34px,min(4.3vw,7.4vh),76px);line-height:1;margin:0;color:var(--gold-2);text-shadow:0 0 40px rgba(230,190,104,.35)}
.wall__hero p{margin:1vh 0 0;color:#D9D2C2;font-size:clamp(14px,1.05vw,17px)}
.wall__stats{display:flex;gap:clamp(18px,3vw,52px);margin:1.2vh 0 1.4vh}
.wall__stats b{display:block;font:500 clamp(26px,min(3vw,5vh),52px)/1 var(--f-display);color:#C6FF00}
.wall__stats span{display:block;margin-top:6px;font:500 10px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,234,.65)}
.pnl{position:relative;display:flex;flex-direction:column;min-height:0;padding:9px 11px;border-radius:14px;overflow:hidden;color:#FBF6EA;
  background:linear-gradient(160deg,rgba(32,34,30,.92),rgba(14,15,13,.92));border:1px solid rgba(198,255,0,.26);
  box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 0 26px rgba(198,255,0,.04);
  opacity:0;transform:translateY(34px) scale(.8) rotateX(18deg);transition:opacity .4s ease var(--d),transform .8s cubic-bezier(.34,1.56,.64,1) var(--d)}
.wall.on .pnl{opacity:1;transform:none}
.pnl header{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex:none}
.pnl header img{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#F3EFE6}
.pnl header b{font:500 10px/1.1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#C6FF00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnl header em{margin-left:auto;flex:none;width:7px;height:7px;border-radius:50%;background:#C6FF00;box-shadow:0 0 8px #C6FF00;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.pnl__body{flex:1;min-height:0;font:400 12px/1.4 var(--f-mono);overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pnl__body svg{width:100%;flex:1;min-height:0}
.ck{list-style:none;margin:0;padding:0}.ck li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#D9D2C2;animation:in .35s ease}.ck li i{font-style:normal;color:#C6FF00}
@keyframes in{from{opacity:0;transform:translateX(-8px)}}
.foot{margin:4px 0 0;font-size:11px;color:#D9D2C2;white-space:nowrap}.foot i{font-style:normal;color:#C6FF00}
.spark{fill:none;stroke:#C6FF00;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px rgba(198,255,0,.6))}
.wall.on .spark{transition:stroke-dashoffset 1.8s ease 1s;stroke-dashoffset:0}
.spark--route{stroke:var(--gold-2,#E6BE68)}.pnl circle{fill:#C6FF00}
.msg{padding:4px 8px;border-radius:9px;background:rgba(251,246,234,.09);width:max-content;max-width:100%;font-size:11px}
.msg.me{margin:4px 0 0 auto;background:rgba(198,255,0,.17)}
.cand{position:relative;padding:3px 7px;margin-bottom:3px;border-radius:5px;background:rgba(251,246,234,.06);overflow:hidden}
.cand u,.step u{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(198,255,0,.22);transition:width 1.3s ease 1s}
.wall.on .cand u,.wall.on .step u{width:var(--w)}
.cand span,.step span{position:relative}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;flex:1;min-height:0}.heat i{border-radius:3px;background:#C6FF00;opacity:.45;transition:opacity .5s}
.big{display:flex;align-items:baseline;gap:8px}.big b{font:500 34px/1 var(--f-display);color:#C6FF00}.big span{font-size:11px;color:#D9D2C2}
.prog{height:6px;margin-top:6px;border-radius:9px;background:rgba(251,246,234,.1);overflow:hidden}.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#C6FF00);transition:width 1.6s ease 1s}
.wall.on .prog i{width:100%}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;flex:1;min-height:0}
.thumbs i{border-radius:4px;background:linear-gradient(135deg,hsl(var(--h) 80% 62%),hsl(calc(var(--h) + 60deg) 80% 50%));opacity:0;transform:scale(.6)}
.wall.on .thumbs i{opacity:1;transform:none;transition:opacity .3s calc(1s + var(--d)),transform .5s cubic-bezier(.34,1.56,.64,1) calc(1s + var(--d))}
.step{position:relative;padding:2px 7px;margin-bottom:3px;border-radius:5px;background:rgba(251,246,234,.06);overflow:hidden;font-size:11px}

/* сетка стены: слева и справа по четыре, снизу три, центр — заголовок */
.pnl--1{grid-column:1/5;grid-row:1/3}.pnl--2{grid-column:5/9;grid-row:1/3}.pnl--3{grid-column:1/5;grid-row:3/5}.pnl--4{grid-column:5/9;grid-row:3/5}
.pnl--6{grid-column:17/21;grid-row:1/3}.pnl--7{grid-column:21/25;grid-row:1/3}.pnl--8{grid-column:17/21;grid-row:3/5}.pnl--9{grid-column:21/25;grid-row:3/5}
.pnl--5{grid-column:1/9;grid-row:5/6}.pnl--10{grid-column:9/17;grid-row:5/6}.pnl--11{grid-column:17/25;grid-row:5/6}
.topbar{transition:opacity .45s}.finale .topbar{opacity:0}

@media (max-width:899px){
  .wall__grid{left:12px;right:12px;top:10px;height:66svh;grid-template-rows:repeat(6,minmax(0,1fr))}
  .wall__hero{grid-column:1/-1;grid-row:1/5;padding:0}
  .wall__stats span{font-size:8px}
  .pnl{display:none}.pnl--6,.pnl--7{display:flex;grid-row:5/7}.pnl--6{grid-column:1/13}.pnl--7{grid-column:13/25}
}
@media (prefers-reduced-motion:reduce){ .wall__sun,.pulse,.pnl header em{animation:none!important} }

/* у .stage из v2.css своя рамка и обрезка: в сцене они не нужны */
.story .stage{overflow:visible;background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:0;aspect-ratio:auto;max-width:none;width:auto}

/* план Кырана — две колонки недель: в нижнем ряду мало высоты */
.pnl--11 .pnl__body{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;align-content:center}
.pnl--11 .step{margin:0;padding:4px 7px}

/* 30.10: цвет возвращается к каждому герою в момент его «бума», ряды не меняются местами */
.tm .tm__body{filter:none;transition:filter .5s ease}
.tm:not(.after) .tm__body{filter:grayscale(1) sepia(.35) brightness(.82)}