/* NNA1618 — scroll-scrub storyworld. Токены Brand Code, шрифты Kharkiv Tone + DM Mono. */

@font-face{font-family:"Kharkiv Tone";src:url("../fonts/kar.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/DMMono-Medium.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --canvas:#0B0B0B;
  --panel:#161616;
  --line:#434343;
  --steel:#808080;
  --ash:#C8C8C8;
  --white:#FFFFFF;
  --blood:#5E1119;
  --signal:#8C1A25;
  --chrome-flat:#B8BDC2;
  --display:"Kharkiv Tone",Inter,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  /* шкала Фибоначчи */
  --s3:3px;--s5:5px;--s8:8px;--s13:13px;--s21:21px;--s34:34px;--s55:55px;--s89:89px;--s144:144px;--s233:233px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--canvas);scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  background:var(--canvas);color:var(--ash);
  font-family:var(--mono);font-size:14px;line-height:1.618;
  text-transform:uppercase;-webkit-font-smoothing:antialiased;
}
a{color:var(--white);text-decoration:none}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}
img,video{max-width:100%;display:block}

.skip{position:fixed;top:-89px;left:var(--s13);z-index:99;background:var(--canvas);color:var(--white);
  padding:var(--s13) var(--s21);border:1px solid var(--line);border-radius:999px;transition:top .25s var(--ease)}
.skip:focus{top:var(--s13)}

/* ---------- фиксированная среда страницы ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(255,255,255,.045),transparent 70%);
  animation:envdrift 89s var(--ease-io) infinite alternate}
.env::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes envdrift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,1.5%,0)}}

/* ---------- шапка ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;height:71px;
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--s34)}
.top .star-mark{height:34px;width:auto;display:block;color:var(--white)}
.top .tg{color:var(--steel);font-size:13px;letter-spacing:.14em;transition:color .3s var(--ease)}
.top .tg:hover{color:var(--white)}

/* ---------- hero scrub ---------- */
.hero{position:relative;height:1000vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;overflow:hidden}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;transform:translateZ(0);opacity:0;transition:opacity .8s var(--ease)}
.stage.video-ready video{opacity:1}
.stage .poster{position:absolute;inset:0;background-size:cover;background-position:center}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(8,8,12,0) 35%,rgba(8,8,12,.62) 100%)}

.ring{position:absolute;right:var(--s34);bottom:var(--s34);width:34px;height:34px;color:var(--steel);
  transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .2s linear}

/* полосы текста */
.band{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--s55);opacity:0;pointer-events:none;text-shadow:var(--tshadow)}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at var(--bx,32%) 50%,rgba(5,5,10,.62) 0%,rgba(5,5,10,.4) 46%,rgba(5,5,10,0) 76%)}
.band>*{position:relative}
.band h2{font-family:var(--display);font-weight:400;color:var(--white);
  font-size:clamp(34px,5.2vw,68px);line-height:1.236;max-width:16ch}
.band .turn{font-family:var(--display);color:var(--white);font-size:clamp(42px,6.4vw,86px);line-height:1}
.band .sub{margin-top:var(--s13);color:var(--ash);font-size:14px;max-width:44ch}
.band.right{align-items:flex-end;text-align:right}
.band.right h2{max-width:14ch}
.band.center{align-items:center;text-align:center}
.band .stitchline{display:inline-block;height:3px;width:var(--s89);margin-top:var(--s13);
  background:repeating-linear-gradient(90deg,var(--signal) 0 8px,transparent 8px 13px)}

/* финальная посадка */
.settle .kicker{color:var(--steel);font-size:13px;letter-spacing:.14em;margin-bottom:var(--s13)}
.settle h1{font-family:var(--display);font-weight:400;color:var(--white);
  font-size:clamp(42px,7vw,110px);line-height:1}
.settle .cta-row{display:flex;gap:var(--s13);flex-wrap:wrap;justify-content:center;margin-top:var(--s34);pointer-events:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;color:var(--white);
  background:rgba(139,139,139,.12);border:1px solid var(--line);border-radius:999px;
  padding:var(--s13) var(--s34);cursor:pointer;text-shadow:none;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:rgba(139,139,139,.24);transform:translateY(-1px)}
.btn.ghost{color:var(--steel)}
@media (pointer:coarse){.btn{min-height:44px}}

/* слова-символы: сборка по --k */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;
  --kc:clamp(0,calc((var(--k,0) - var(--th,0))*2.8),1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
           rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- секции ниже ---------- */
main{position:relative;z-index:2;background:var(--canvas)}
.section{position:relative;padding:var(--s144) var(--s34);max-width:1220px;margin:0 auto}
.greek{color:var(--steel);font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:lowercase}
.section h2{font-family:var(--display);font-weight:400;color:var(--white);
  font-size:clamp(28px,3.8vw,55px);line-height:1.236;margin-top:var(--s13);max-width:24ch}
.section p{margin-top:var(--s21);max-width:62ch;color:var(--ash)}
.section .cap{color:var(--steel);font-size:13px}
.divider{height:1px;background:var(--line);max-width:1220px;margin:0 auto;transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease-io)}
.divider.in{transform:scaleX(1)}

.section .media{margin-top:var(--s34);border-radius:8px;overflow:hidden;background:var(--panel)}
.section .media img{width:100%;height:auto}

/* въезды */
.rise{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .rise{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:.09s}
.in .rise:nth-child(3){transition-delay:.18s}
.in .rise:nth-child(4){transition-delay:.27s}
.in.done .rise{transition-delay:0s}

/* manifesto */
.manifesto{background:var(--blood);color:var(--white)}
.manifesto .inner{max-width:1220px;margin:0 auto;padding:var(--s144) var(--s34)}
.manifesto p.q{font-family:var(--display);font-size:clamp(24px,3.4vw,42px);line-height:1.236;
  max-width:26ch;color:var(--white)}
.manifesto .ref{margin-top:var(--s21);color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.14em}

footer{border-top:1px solid var(--line);padding:var(--s34);display:flex;flex-wrap:wrap;gap:var(--s13);
  align-items:baseline;justify-content:space-between;color:var(--steel);font-size:13px;letter-spacing:.14em}
footer .phi{font-family:var(--display)}

@media (max-width:720px){
  .band{padding:0 var(--s21)}
  .section{padding:var(--s89) var(--s21)}
  .top{padding:0 var(--s21)}
}
@media (max-height:560px){.ring{display:none}}

/* reduced motion: финальные состояния, без анимаций */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  .divider{transform:scaleX(1)}
  html{scroll-behavior:auto}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}