/* Cinebrowser — Site v9 "The Edit Bay".
   Homepage-only styles. css/site.css remains untouched for the other pages (contract §3.5).
   CRT chrome recipe + effect params derive from docs/superpowers/research (§1.3, §5.2). */

/* Award-school pairing: Clash Display (ITF FFL) + Satoshi (ITF FFL) + Geist Mono (OFL). Self-hosted. */
@font-face{font-family:'Clash Display';src:url(../assets/fonts/ClashDisplay-Variable.woff2) format('woff2');
  font-weight:200 700;font-display:swap}
@font-face{font-family:'Satoshi';src:url(../assets/fonts/Satoshi-Variable.woff2) format('woff2');
  font-weight:300 900;font-display:swap}

:root{
  --page:#101013; --ink:#ECEAE4; --ink-75:rgba(236,234,228,.78); --ink-60:rgba(236,234,228,.6); --ink-35:rgba(236,234,228,.35);
  --amber:#E8A33D; --amber-deep:#B97A1E; --rec:#39ff7b; --rec-glow:rgba(60,255,123,.25);
  --hairline:rgba(255,255,255,.12); --hairline-strong:rgba(255,255,255,.3);
  --surface-light:#8d8a83; --black-beat:#0a0a0b;
  --radius:.5vw; --columns:20;
  --display:'Clash Display',ui-sans-serif,sans-serif;
  --body:'Satoshi',ui-sans-serif,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:clamp(16px,1.7vw,24px); line-height:1.45;
  overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--amber); color:#111}

/* JS-gated reveal targets (noscript un-hides; see index.html) */
html.js [data-fx]{opacity:0}
html.js [data-fx="parallax"],html.js [data-fx="overlayIn"],html.js [data-fx="separatorIn"]{opacity:1}

/* ---------- CRT chrome (fixed, pointer-events:none) ---------- */
.scanlines{position:fixed;inset:0;z-index:22;opacity:.25;pointer-events:none;overflow:hidden}
.scanlines::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3) 51%);
  background-size:100% .4vw;animation:scanjit 1s steps(60) infinite}
.scanlines::before{content:"";position:absolute;left:0;width:100%;
  height:clamp(2px,.1vw,3px);background:#000000b3;opacity:.8;will-change:transform;
  animation:scanbar 8s linear infinite}
@keyframes scanbar{0%{transform:translate3d(0,110vh,0)}to{transform:translate3d(0,-200vh,0)}}
@keyframes scanjit{0%{background-position:0 50%}}

.gloom{position:fixed;inset:0;z-index:23;pointer-events:none;overflow:hidden}
.gloom::before{content:"";position:absolute;inset:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:.15}

.vignette{position:fixed;inset:0;z-index:100;pointer-events:none}
.vignette::before{content:"";position:absolute;inset:0;
  background:url(../assets/crt-frame.png) 0 0/100% 100% no-repeat;opacity:.7;transform:scale(1.02)}

.grain{position:fixed;top:-10rem;left:-10rem;width:calc(100% + 20rem);height:calc(100% + 20rem);
  z-index:100;pointer-events:none;background:url(../assets/grain.png);
  mix-blend-mode:overlay;opacity:.3;animation:grainjump .5s steps(1) infinite}
@keyframes grainjump{
  0%{transform:translate3d(0,0,0)} 9%{transform:translate3d(-6rem,4rem,0)}
  18%{transform:translate3d(5rem,-7rem,0)} 27%{transform:translate3d(-8rem,-3rem,0)}
  36%{transform:translate3d(3rem,8rem,0)} 45%{transform:translate3d(-4rem,-9rem,0)}
  54%{transform:translate3d(9rem,2rem,0)} 63%{transform:translate3d(-2rem,6rem,0)}
  72%{transform:translate3d(7rem,-5rem,0)} 81%{transform:translate3d(-9rem,1rem,0)}
  90%{transform:translate3d(2rem,-4rem,0)} 100%{transform:translate3d(0,0,0)}}

/* ---------- Type system ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:560;margin:0}
.marquee h1{font-size:12vw;line-height:.96;letter-spacing:-.1vw;white-space:nowrap;font-weight:600}
h2{font-size:6vw;line-height:.9;letter-spacing:-.15vw}
h3{font-size:3vw;line-height:1}
.mono,.label,.button,.terminal,code{font-family:var(--mono);letter-spacing:-.02em}
.label{font-size:clamp(12px,.9vw,15px);text-transform:uppercase;color:var(--ink-75);letter-spacing:.04em}
.label .dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--ink-60);margin-right:.6em;vertical-align:baseline}
/* readability audit: killed the 20vw text-indent scatter; lead reads as one clean block */
.lead{font-size:clamp(22px,2.6vw,42px);line-height:1.22;font-weight:380;max-width:56vw;margin-left:20vw}
.lead::before{content:"→ ";font-family:var(--mono);color:var(--amber)}
.lead .w,.fineprint .w,.terminal .w,.card p .w{display:inline!important}
.opacity50{opacity:.5}

/* ---------- Fixed header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:21;display:flex;align-items:center;gap:2.2vw;
  padding:1.1vw 2vw;font-family:var(--mono);font-size:clamp(12px,.95vw,15px)}
.hdr .wordmark{font-family:var(--display);font-stretch:87%;font-size:clamp(17px,1.4vw,22px);font-weight:600;margin-right:auto}
.hdr .wordmark .wm-light{font-weight:200;opacity:.75}
.hdr a{position:relative;padding:.2em 0}
.hdr a:hover{color:var(--amber)}
.hdr .rec{color:var(--rec);margin-left:.45em;
  text-shadow:0 0 .35em var(--rec-glow),0 0 .8em var(--rec-glow),0 0 1.4em var(--rec-glow);
  filter:drop-shadow(0 0 .18em var(--rec-glow));animation:recblink 2.4s steps(2) infinite}
@keyframes recblink{50%{opacity:.55}}
.hdr .hairline{position:absolute;left:2vw;right:2vw;top:calc(100% + .2vw);height:1px;background:var(--hairline);transform-origin:left}

/* ---------- Fixed marquee ---------- */
.marquee{position:fixed;top:3.5vw;left:0;width:100%;height:17vw;z-index:3;overflow:hidden;pointer-events:none}
.marquee .track{display:flex;align-items:center;height:100%;width:max-content;will-change:transform}
.marquee h1{padding-right:2vw}
.marquee .sep{padding:0 2vw;font-family:Arial,sans-serif}
.marquee .rule{position:absolute;left:0;right:0;height:1px;background:var(--hairline-strong);transform-origin:left}
.marquee .rule.top{top:0}.marquee .rule.bot{bottom:0}

/* ---------- Hero ---------- */
#hero{position:relative;height:350vh;z-index:4}
#hero .stage{position:sticky;top:0;height:100vh;overflow:clip}
#gl{position:absolute;inset:0;width:100%;height:100%}
#hero-dom-layer{position:absolute;inset:0;z-index:5;opacity:0;visibility:hidden;
  display:grid;place-items:center;background:var(--page)}
#hero-dom-layer img{width:100%;height:100%;object-fit:cover;opacity:.92}
.portal-bezel{position:absolute;inset:0;border-radius:1.2vw;box-shadow:inset 0 0 0 1.4vw #17161a,inset 0 0 6vw rgba(0,0,0,.9);pointer-events:none}
.terminal{position:absolute;right:2vw;bottom:2.4vw;z-index:7;max-width:36vw;
  font-size:clamp(12px,.95vw,15px);line-height:1.6;color:var(--ink);white-space:pre-wrap;
  background:rgba(8,8,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:1.2em 1.4em;border-radius:.6vw;border:1px solid var(--hairline);
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
.terminal .hl{color:var(--amber)}
.terminal .speed{color:var(--amber);cursor:pointer;border-bottom:1px solid var(--amber)}
.minivid{position:fixed;left:2vw;bottom:2.4vw;z-index:6;width:15vw}
.minivid .frame{border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.minivid img{width:100%;aspect-ratio:16/9;object-fit:cover}
.minivid .cap{font-family:var(--mono);font-size:clamp(11px,.8vw,13px);color:var(--ink);
  text-transform:uppercase;margin-top:.6vw;line-height:1.5;max-width:11em;
  text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* ---------- Sections ---------- */
section.scene{position:relative;padding:12vw 2vw 10vw;z-index:4;background:var(--bg,var(--page))}
section.scene .topfade{position:absolute;inset:0 0 auto 0;height:8vw;
  background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);pointer-events:none}
.overlay{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);pointer-events:none;z-index:2}
.overlay i{background:var(--wipe,#0a0a0b);transform:scaleY(0);transform-origin:top}
/* content always above the transition wipes so a stuck overlay can never black out a section */
section.scene > :not(.overlay):not(.topfade){position:relative;z-index:3}
footer.scene > *{position:relative;z-index:3}
.sechead{display:grid;grid-template-columns:1fr 2fr;gap:2vw;align-items:end;margin-bottom:5vw}
.rule-x{height:1px;background:var(--hairline);margin:2.5vw 0;clip-path:inset(0 100vw 0 0)}

/* Tools cards */
.cards{display:grid;gap:0;border-top:1px solid var(--hairline)}
.card{display:grid;grid-template-columns:8vw 47vw 1fr;gap:2vw;align-items:center;
  padding:2.6vw 0;border-bottom:1px solid var(--hairline)}
.card .no{font-family:var(--mono);font-size:clamp(11px,.85vw,14px);color:var(--ink-35)}
.card h3{font-size:2.6vw;margin-bottom:.5vw}
.card p{color:var(--ink-75);font-weight:360;max-width:34vw;margin:0;font-size:clamp(15px,1.15vw,19px);line-height:1.5}
.card .art{justify-self:end;width:100%;max-width:22vw;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 0 0 1px var(--hairline)}
.card .art img{aspect-ratio:16/10;object-fit:cover;width:100%;filter:saturate(.92)}

/* Filmstrip */
#trim{overflow:clip}
.strip-zone{position:relative;margin:4vw -2vw 0;cursor:none}
.strip{display:flex;gap:1vw;width:max-content;will-change:transform;padding:1vw 0}
.strip figure{margin:0;width:26vw;flex:none;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 0 0 1px var(--hairline);position:relative}
.strip img{width:100%;aspect-ratio:16/9;object-fit:cover}
.strip figcaption{position:absolute;left:.8vw;bottom:.6vw;font-family:var(--mono);
  font-size:clamp(11px,.8vw,13px);text-transform:uppercase;color:var(--ink);
  background:rgba(0,0,0,.55);padding:.25em .7em;border-radius:99px;text-shadow:0 1px 4px #000}
.skim-pill{position:fixed;z-index:50;pointer-events:none;opacity:0;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:.8vw;text-transform:uppercase;background:var(--amber);color:#111;
  padding:.55em 1em;border-radius:99px;white-space:nowrap}

/* LUT wipe */
#color{--bg:#141210}
.lutwipe{position:relative;margin-top:4vw;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 0 0 1px var(--hairline)}
.lutwipe img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lutwipe .lut-graded{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.lutwipe .tag{position:absolute;top:1.2vw;font-family:var(--mono);font-size:clamp(10px,.8vw,13px);
  text-transform:uppercase;padding:.4em .8em;background:rgba(0,0,0,.55);border:1px solid var(--hairline)}
.lutwipe .tag.log{left:1.2vw}
.lutwipe .tag.look{right:1.2vw;color:var(--amber);border-color:var(--amber)}
.lutwipe .seam{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);opacity:.7}

/* Find */
.matches{display:grid;grid-template-columns:repeat(4,1fr);gap:1vw;margin-top:3vw}
.matches .m{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px var(--hairline)}
.matches img{width:100%;aspect-ratio:16/9;object-fit:cover}
.matches .pct{position:absolute;left:.7vw;top:.7vw;font-family:var(--mono);color:var(--rec);
  background:rgba(0,0,0,.6);padding:.2em .5em;font-size:clamp(11px,.9vw,14px)}

/* Formats */
#formats{--bg:var(--black-beat)}
.pkgs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hairline);margin-top:4vw}
.pkg{padding:2.2vw;border-bottom:1px solid var(--hairline);position:relative}
.pkg:nth-child(odd){border-right:1px solid var(--hairline)}
.pkg .name{font-family:var(--mono);font-size:clamp(15px,1.6vw,26px)}
.pkg .name em{color:var(--amber);font-style:normal}
.pkg p{color:var(--ink-75);font-weight:360;margin:.8vw 0 0;font-size:clamp(14px,1.1vw,18px);line-height:1.5}
.pill{display:inline-block;font-family:var(--mono);font-size:clamp(10px,.75vw,12px);text-transform:uppercase;
  border:1px solid var(--amber);color:var(--amber);border-radius:99px;padding:.35em .9em;margin-left:1em;vertical-align:middle}

/* Download */
#download{--bg:var(--black-beat);text-align:left}
.dl-price{font-family:var(--mono);font-size:clamp(18px,2vw,30px);margin:3vw 0 1vw}
.dl-price s{opacity:.4}
.dl-ctas{display:flex;flex-wrap:wrap;gap:1vw;margin:2vw 0}
.fineprint{font-family:var(--mono);font-size:clamp(13px,.95vw,15px);color:var(--ink-75);max-width:56vw;line-height:1.75}

/* Buttons */
.button{display:inline-block;position:relative;font-size:clamp(13px,1vw,16px);text-transform:uppercase;
  border:1px solid var(--hairline-strong);padding:.9em 1.6em;border-radius:99px;overflow:hidden;
  --anim:0;isolation:isolate;cursor:pointer;background:none;color:var(--ink)}
.button::before{content:"";position:absolute;inset:0;background:var(--amber);z-index:-1;
  transform:scaleX(var(--anim));transform-origin:var(--o,left)}
.button:hover{color:#111;border-color:var(--amber)}
.button .arrow{display:inline-block;margin-left:.6em}
.button.primary{background:var(--amber);color:#111;border-color:var(--amber)}
.button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* Footer */
footer.scene{padding:10vw 2vw 4vw;overflow:clip;position:relative;z-index:4;background:var(--page)}
.bigwordmark{position:relative;line-height:.8}
.bigwordmark .wm{font-family:var(--display);font-stretch:87%;font-weight:640;
  font-size:15.5vw;letter-spacing:-.3vw;display:block}
.bigwordmark .trail{position:absolute;left:0;top:0;width:100%;opacity:.16;pointer-events:none;
  clip-path:inset(0 0 var(--trail-crop,90%) 0)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:5vw;align-items:start}
.f-company{font-family:var(--mono);font-size:clamp(11px,.9vw,14px);color:var(--ink-60);line-height:1.8;text-transform:uppercase}
.f-links{display:grid;grid-template-columns:1fr 1fr;gap:0 3vw}
.f-links a{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);
  font-size:clamp(13px,1.05vw,17px);padding:1.1vw .2vw;border-bottom:1px solid var(--hairline)}
.f-links a:hover{color:var(--amber)}
.f-legal{margin-top:4vw;font-family:var(--mono);font-size:clamp(10px,.75vw,12px);color:var(--ink-35)}

/* Skip link */
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--amber);color:#111;
  padding:.7em 1.2em;border-radius:6px;font-family:var(--mono);transition:top .2s}
.skip:focus{top:1rem}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  .grain{display:none}
  .gloom::before{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:.2}
  .scanlines::after{background-size:100% .4vh}
  .scanlines::before{opacity:.5}
  .marquee{top:14vw;height:24vw}
  .marquee h1{font-size:20vw}
  .lead{font-size:30px;text-indent:0;max-width:100%}
  .overlay{grid-template-columns:repeat(10,1fr)}
  #hero{height:220vh}
  .terminal{max-width:88vw;right:4vw}
  .minivid{display:none}
  .sechead{grid-template-columns:1fr}
  .card{grid-template-columns:1fr;gap:3vw}
  .card h3{font-size:24px}
  .card p{max-width:100%}
  .card .art{max-width:100%;justify-self:start}
  .strip figure{width:70vw}
  .matches{grid-template-columns:repeat(2,1fr)}
  .pkgs{grid-template-columns:1fr}
  .pkg:nth-child(odd){border-right:none}
  .fineprint{max-width:100%}
  .f-grid,.f-links{grid-template-columns:1fr}
  .bigwordmark .wm{font-size:18vw}
  .hdr{font-size:12px;gap:4vw}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .scanlines::before,.scanlines::after,.grain,.hdr .rec{animation:none}
  html.js [data-fx]{opacity:1}
  #hero{height:100vh}
}