@font-face{font-family:Bebas;src:url(assets/fonts/BebasNeue-Bold.woff2);font-weight:700;font-display:swap}
@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-Light_0.woff2);font-weight:300;font-display:swap}
@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-Medium_0.woff2);font-weight:500;font-display:swap}
@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-Semibold_0.woff2);font-weight:600;font-display:swap}
@font-face{font-family:Gilroy;src:url(assets/fonts/Gilroy-Bold_0.woff2);font-weight:700;font-display:swap}

:root{
  --bg:#050607; --fg:#fff; --mute:rgba(255,255,255,.52); --dim:rgba(255,255,255,.14);
  --green:#DCFF00; --blue:#00C4FF;
  --glass:rgba(12,16,20,.72); --line:rgba(255,255,255,.16); --line2:rgba(255,255,255,.28);
  --ease:cubic-bezier(.16,1,.3,1); --soft:cubic-bezier(.45,0,.25,1);
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
body{background:var(--bg);font-family:Gilroy,system-ui,sans-serif;font-weight:500;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#000}

.bebas{font-family:Bebas,Impact,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:.86}
.br{font-weight:300;color:var(--mute);letter-spacing:.02em;white-space:nowrap}
.g{color:var(--green)}

/* фон: сетка + голубое пятно */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg::before{content:"";position:absolute;inset:0;background:url(assets/bg-grid.png) center/1440px auto repeat;opacity:.35}
.bg i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,rgba(0,196,255,.22),transparent 62%);filter:blur(60px);left:50%;top:0;transform:translate(-50%,-55%);transition:transform 1.6s var(--soft)}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.85))}

/* навигация */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);width:min(760px,calc(100% - 32px))}
.nav__logo{font-weight:300;font-size:14px;margin-right:auto;white-space:nowrap}
.nav__logo b{font-weight:600}
.nav a.l{font-size:14px;padding:10px 14px;border-radius:999px;color:var(--mute);transition:color .3s,background .3s}
.nav a.l:hover{color:#fff;background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#000;font-weight:700;font-size:14px;padding:11px 18px;border-radius:999px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn:hover{box-shadow:0 0 0 6px rgba(220,255,0,.15),0 0 40px rgba(220,255,0,.35)}
.progress{position:fixed;left:0;top:0;height:2px;background:var(--green);z-index:60;width:100%;transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--green)}

/* reveal */
.rv{opacity:0;transform:translateY(40px) scale(.98);filter:blur(12px);transition:opacity 1s var(--ease),transform 1.2s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:none}
.mask{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.mask>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.in .mask>span,.mask.in>span{transform:none}

section{position:relative}
.wrap{padding:0 var(--pad)}
.kicker{font-size:clamp(14px,1.3vw,18px)}

/* HERO */
.hero{min-height:100svh;display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:var(--pad);padding:120px var(--pad) 56px}
.hero__title{font-size:clamp(96px,17.5vw,300px);margin:18px 0 28px}
.hero__lead{font-size:clamp(18px,1.7vw,24px);font-weight:600;line-height:1.3;max-width:30ch}
.hero__lead em{font-style:normal;color:var(--mute)}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.chip{border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:300;white-space:nowrap}
.chip b{font-weight:700;color:#fff}
.photo-wrap{justify-self:end;width:min(100%,420px)}
.about .photo-wrap{justify-self:start;width:100%;max-width:480px}
.photo{position:relative;width:100%;width:min(100%,420px);aspect-ratio:1089/1445;border-radius:32px;overflow:hidden;border:1px solid var(--line2);transform:rotate(3deg);box-shadow:0 40px 120px rgba(0,196,255,.18),0 20px 60px rgba(0,0,0,.6);transition:transform 1.2s var(--ease)}
.photo:hover{transform:rotate(0) scale(1.02)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .tag{position:absolute;left:14px;bottom:14px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:300;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:12px;font-weight:300;color:var(--mute);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue::after{content:"";width:1px;height:36px;background:linear-gradient(var(--green),transparent);animation:cue 2.2s var(--soft) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* STATEMENT */
.statement{height:260vh}
.statement__in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad)}
.statement p{font-size:clamp(56px,9.5vw,170px);max-width:12ch}
.statement .w{display:inline-block;color:rgba(255,255,255,.12);transition:color .5s var(--ease),text-shadow .5s}
.statement .w.on{color:#fff}
.statement .w.acc.on{color:var(--green);text-shadow:0 0 40px rgba(220,255,0,.35)}

/* CASES */
.cases-head{padding:16vh var(--pad) 6vh;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.cases-head h2{font-size:clamp(72px,12vw,200px)}
.win__bar{display:flex;align-items:center;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line);font-size:12px;font-weight:300;color:var(--mute)}
.win__bar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.win__bar i:first-child{background:#ff5f57}.win__bar i:nth-child(2){background:#febc2e}.win__bar i:nth-child(3){background:#28c840}
.win__bar span{margin-left:10px}

/* ПУТЬ: таймлайн монтажки */
.path{height:520vh}
.path__in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px);padding:80px 0 24px;overflow:hidden}
.path__head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:0 var(--pad)}
.path__head h2{font-size:clamp(64px,9vw,150px);margin-top:12px}
.tc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(18px,2vw,28px);color:var(--green);text-shadow:0 0 20px rgba(220,255,0,.4);letter-spacing:.04em}

.editor{margin:0 var(--pad);border-radius:24px;background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;position:relative}
.editor .win__bar{justify-content:flex-start}
.editor__view{position:relative;height:clamp(190px,30vh,280px);overflow:hidden}
.track{position:absolute;left:0;top:0;height:100%;will-change:transform}
.ruler{position:absolute;left:0;right:0;top:0;height:30px;border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 20px) bottom/100% 7px no-repeat}
.ruler span{position:absolute;top:6px;font-size:11px;font-weight:300;color:var(--mute);transform:translateX(4px)}
.ruler span::before{content:"";position:absolute;left:-4px;top:-6px;width:1px;height:30px;background:rgba(255,255,255,.3)}
.lane{position:absolute;left:0;right:0;display:flex;align-items:center}
.lane-label{position:absolute;left:0;z-index:3;width:44px;height:100%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--mute);background:rgba(8,10,12,.9);border-right:1px solid var(--line)}
.clip{position:absolute;height:100%;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.05);padding:10px 12px;overflow:hidden;transition:background .5s var(--ease),border-color .5s,box-shadow .5s,color .5s}
.clip small{display:block;font-size:11px;font-weight:300;color:var(--mute);transition:color .5s}
.clip b{display:block;font-family:Bebas,sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,34px);line-height:1;margin-top:6px;white-space:nowrap}
.clip.on{background:var(--green);border-color:var(--green);color:#000;box-shadow:0 0 40px rgba(220,255,0,.35)}
.clip.on small{color:rgba(0,0,0,.6)}
.clip.now::after{content:"[ сейчас ]";position:absolute;right:10px;top:10px;font-size:11px;font-weight:300}
.vclip{position:absolute;height:100%;border-radius:8px;overflow:hidden;border:1px solid var(--line);opacity:.7}
.vclip img{width:100%;height:100%;object-fit:cover}
.wave{position:absolute;height:100%;border-radius:8px;background:rgba(0,196,255,.08);border:1px solid rgba(0,196,255,.35);display:flex;align-items:center;gap:2px;padding:0 6px;overflow:hidden}
.wave i{flex:0 0 2px;background:var(--blue);border-radius:2px;opacity:.75}
.playhead{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--green);z-index:5;box-shadow:0 0 16px var(--green)}
.playhead::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);border:8px solid transparent;border-top:10px solid var(--green)}

.detail{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,64px);align-items:end;padding:0 var(--pad);min-height:clamp(150px,22vh,220px)}
.detail__year{font-size:clamp(90px,14vw,230px);color:var(--green);min-width:3.2ch}
.detail__txt h3{font-size:clamp(40px,5vw,84px);margin-bottom:12px}
.detail__txt p{font-size:clamp(16px,1.4vw,20px);line-height:1.45;color:rgba(255,255,255,.8);max-width:52ch}
.swap{transition:opacity .45s var(--soft),transform .6s var(--ease),filter .45s var(--soft)}
.swap.out{opacity:0;transform:translateY(20px);filter:blur(10px)}

/* ОБО МНЕ */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--pad);padding:18vh var(--pad);align-items:center}
.about .photo{transform:rotate(-3deg)}
.about h2{font-size:clamp(64px,9vw,150px);margin:16px 0 28px}
.about p{font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:rgba(255,255,255,.85);max-width:40ch}
.about p+p{margin-top:18px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:40px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--line)}
.facts div{background:var(--bg);padding:20px 22px}
.facts .br{display:block;font-size:13px}
.facts b{display:block;font-family:Bebas,sans-serif;font-size:clamp(32px,3.2vw,48px);line-height:1;margin-top:8px}

/* КОНТАКТ */
.contact{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12vh var(--pad) 40px;gap:36px}
.contact h2{font-size:clamp(72px,15vw,270px)}
.big{font-size:clamp(18px,2vw,26px);padding:22px 36px}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.socials a{transition:border-color .3s,color .3s}
.socials a:hover{border-color:var(--green);color:var(--green)}
footer{display:flex;justify-content:space-between;gap:16px;padding:28px var(--pad);border-top:1px solid var(--line);font-size:13px;font-weight:300;color:var(--mute)}

/* МОБИЛКА */
@media (max-width:860px){
  .nav a.l{display:none}
  .hero{grid-template-columns:1fr;padding-top:100px;align-items:start}
  .photo-wrap{justify-self:start;width:62%;margin-top:8px;order:-1}
  .info,.about,.mini,.players{grid-template-columns:1fr}
  .meta{grid-template-columns:repeat(2,auto)}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:44vw}
  .bento figure{grid-column:span 1!important;grid-row:span 1!important}
  .bento figure.wide{grid-column:span 2!important}
  .zoom__title{flex-direction:column;align-items:flex-start}
  .detail{grid-template-columns:1fr;gap:6px}
  .detail__year{font-size:96px}
  .path__head{flex-direction:column;align-items:flex-start;gap:8px}
  .tc{font-size:16px}
  .about .photo-wrap{max-width:72%}
  footer{flex-direction:column}
  .scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv,.mask>span{transition:none;opacity:1;transform:none;filter:none}
}