/* Общая механика: сцены этапов, анимация слоёв SVG, калькулятор, появление блоков.
   Оформление сайта — в site.css (цвета, шрифты, сетка). */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h,72px) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip}
img,svg{display:block;max-width:100%}

/* сцены: липкая сцена, этапы меняются при прокрутке */
.scene{position:relative;height:calc(var(--n) * 38vh + 100vh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage-in{height:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:auto minmax(0,1fr) auto;gap:18px 44px;padding-top:calc(var(--nav-h,72px) + 22px);padding-bottom:22px}
.stage-head{grid-column:1/-1}
.stage-art{min-height:0;display:flex;align-items:center;justify-content:center}
.stage-art .art{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:640/440}
.chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden;align-self:center}
.chapter{display:flex;gap:14px;cursor:pointer;transition:background .35s,opacity .35s,color .35s}
.chapter p,.chapter .ch-inc{overflow:hidden;opacity:0;max-height:0;transition:opacity .3s}
.chapter.on p,.chapter.on .ch-inc{opacity:1;max-height:200px}
.scene-bar{grid-column:1/-1;display:flex;align-items:center;gap:18px}
.scene-dots{display:flex;gap:6px;flex:1;max-width:520px}
.scene-dots i{flex:1;cursor:pointer}
.scene-count{white-space:nowrap}
.scene-hint::after{content:" ↓";display:inline-block;animation:bob 1.6s infinite}
.scene.last .scene-hint{display:none}
.scene-skip{margin-left:auto;cursor:pointer;white-space:nowrap}
@keyframes bob{50%{transform:translateY(4px)}}
@media (max-width:900px){
  .scene{height:calc(var(--n) * 32vh + 100vh)}
  .stage-in{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;padding-top:calc(var(--nav-h,72px) + 10px);padding-bottom:14px}
  .stage-art .art{max-height:38vh}
  .chapters{align-self:start}
  .chapter{display:none}
  .chapter.on{display:flex}
}
@media (max-width:700px){.stage-in{padding-bottom:84px}}
@media (max-width:560px){.scene-dots{display:none}}
html:not(.js) .scene{height:auto}
html:not(.js) .stage{position:static;height:auto}
html:not(.js) .stage-in{grid-template-rows:auto auto auto;padding-top:60px}
html:not(.js) .chapter{opacity:1;display:flex}
html:not(.js) .chapter p,html:not(.js) .chapter .ch-inc{opacity:1;max-height:none}
html:not(.js) .ly{opacity:1}
html:not(.js) .ly[data-to],html:not(.js) .scene-bar{display:none}

/* слои SVG: data-at — с какого этапа видно */
.art .sky{fill:#DCEBF5}
.svg-t{font:600 12px var(--f-body)}
.svg-b{font:600 16px var(--f-display)}
.svg-neon{font:700 28px var(--f-display);letter-spacing:.04em;filter:drop-shadow(0 0 6px #FF5A1F) drop-shadow(0 0 14px #FF5A1F)}
.ly{opacity:0;transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1),clip-path 1s cubic-bezier(.6,0,.2,1);transform-box:fill-box}
.ly.on{opacity:1;transform:none}
.ly.rise{transform:translateY(26px)}
.ly.drop{transform:translateY(-80px)}
.ly.grow{transform:scaleY(0);transform-origin:50% 100%}
.ly.pop{transform:scale(.4);transform-origin:center}
.ly.rise.on,.ly.drop.on,.ly.grow.on,.ly.pop.on{transform:none}
.ly.wipe{clip-path:inset(0 100% 0 0);opacity:1}
.ly.wipe.on{clip-path:inset(0 0 0 0)}
.ly.wipe:not(.on){transition:clip-path .5s ease}
.ly.draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.ly.draw.on path{stroke-dashoffset:0}
.ly.draw.on path[stroke-dasharray="1"]{stroke-dasharray:.02 .015}
.ly.dusk.on{opacity:.45}
.ly.glow.on{animation:flick 4s ease-in-out infinite}
@keyframes flick{50%{opacity:.82}}
.neon.on text{animation:neon 3s infinite}
@keyframes neon{0%,18%,22%,100%{opacity:1}20%{opacity:.4}}
.rec{animation:recb 1.2s steps(2,start) infinite}
@keyframes recb{to{visibility:hidden}}
.ly.waves.on path{animation:wave 2s ease-out infinite}
.ly.waves.on path:nth-child(2){animation-delay:.3s}
@keyframes wave{0%{opacity:.15}40%{opacity:1}100%{opacity:.15}}

/* калькулятор: скрытые радиокнопки, ползунок */
.seg input,.opts input,.pick input{position:absolute;opacity:0;pointer-events:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(to right,var(--accent) var(--fill,30%),var(--range-bg,#ddd) var(--fill,30%));outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 4px 10px rgb(0 0 0/.2);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:grab}
.calc-chip-t{flex:1}
.hp{position:absolute;left:-9999px}
.form-ok:empty{display:none}

/* кнопка на телефоне */
.fab{display:none}
@media (max-width:700px){
  .fab{display:flex;position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;justify-content:center;text-decoration:none;transform:translateY(140%);transition:transform .35s}
  .fab.show{transform:none}
}

/* появление при прокрутке */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv{opacity:1;transform:none}
}