/* ============================================================
   PRIMETIME — Brutalist Statement
   Light/paper brutalism · ink on bone · one acid signal color
   (the bottle's own UV-C light). Anton mega-type + Archivo +
   Space Mono. Hard edges, broken grid, oversized numerals.
   ============================================================ */

/* ---------- fonts (self-hosted, no CDN) ---------- */
@font-face{font-family:'Anton';src:url('../assets/fonts/anton-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin-900-normal.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/space-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/space-mono-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#e7e3d8;          /* bone paper */
  --bg2:#dedad0;         /* slightly deeper bone for panels */
  --ink:#0c0c0b;         /* near-black */
  --ink-soft:#2a2924;
  --mut:#78766b;         /* muted mono */
  --acid:#c2f000;        /* electric lime — the UV-C signal color (use on DARK) */
  --acid-deep:#a4cf00;
  --acid-ink:#5f7a00;    /* dark lime — readable accent on the BONE background */
  --dark:#0c0c0b;        /* dark section bg */
  --on-dark:#e7e3d8;
  --line:rgba(12,12,11,.16);
  --line-2:rgba(12,12,11,.30);
  --hair:1px;
  --mega:'Anton',sans-serif;
  --disp:'Archivo',sans-serif;
  --mono:'Space Mono',monospace;
  --pad:clamp(18px,4.5vw,64px);
  --maxw:1680px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--disp);font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.loading{overflow:hidden;height:100vh}
::selection{background:var(--acid);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:3px solid var(--acid);outline-offset:3px}

/* hide native cursor only where custom cursor runs */
body.cursor-on,body.cursor-on *{cursor:none}

/* ---------- type utilities ---------- */
.mono{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(10px,.78vw,12.5px);line-height:1}
.mega{font-family:var(--mega);font-weight:400;line-height:.84;text-transform:uppercase;letter-spacing:-.005em}
.disp{font-family:var(--disp);font-weight:900;line-height:.96;letter-spacing:-.02em}
.acid{color:var(--acid-deep)}
.hl{background:var(--acid);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* mask wrapper for line/word reveals */
.mask{overflow:hidden;display:block}
.mask>*{display:block;will-change:transform}

/* ============================================================
   FIXED CHROME (outside smooth-content)
   ============================================================ */

/* grain */
.grain{position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,4%)}80%{transform:translate(4%,-3%)}100%{transform:translate(0,0)}}

/* preloader */
.pre{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad)}
.pre__row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.pre__count{font-family:var(--mega);font-size:clamp(5rem,26vw,22rem);line-height:.8;letter-spacing:-.02em}
.pre__count small{font-size:.28em;vertical-align:super;color:var(--acid)}
.pre__tag{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:12px;text-align:right;line-height:1.6;color:var(--mut);padding-bottom:.6em}
.pre__bar{height:3px;background:rgba(231,227,216,.16);margin-top:var(--pad)}
.pre__bar i{display:block;height:100%;width:0;background:var(--acid)}
.pre.done{transform:translateY(-100%);transition:transform 1s cubic-bezier(.76,0,.24,1)}

/* nav (theme-switched, no blend to avoid colour artefacts) */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);color:var(--ink);transition:color .5s ease}
body.dark .nav{color:var(--on-dark)}
.nav__brand{font-family:var(--mega);font-size:19px;letter-spacing:.02em;text-transform:uppercase}
.nav__links{display:flex;gap:22px}
.nav__links a{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;position:relative}
.nav__links a::after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.76,0,.24,1)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:11px;border:1.5px solid currentColor;padding:9px 16px}
@media(max-width:720px){.nav__links{display:none}}

/* side index rail — vertical, right edge */
.rail{position:fixed;right:calc(var(--pad) - 26px);top:50%;z-index:35;color:var(--ink);
  transform:translateY(-50%) rotate(90deg);transform-origin:center;transition:color .5s ease}
body.dark .rail{color:var(--on-dark)}
.rail__idx{font-family:var(--mono);font-size:11px;letter-spacing:.28em;white-space:nowrap}
.rail__idx b{font-weight:700}
@media(max-width:900px){.rail{display:none}}

/* custom cursor */
.cur{position:fixed;top:0;left:0;z-index:60;width:14px;height:14px;border:1.5px solid var(--ink);
  pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .3s,height .3s}
body.dark .cur{border-color:var(--on-dark)}
.cur.big{width:70px;height:70px;background:var(--acid);border-color:var(--acid)}
.cur__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;color:var(--ink);opacity:0;text-transform:uppercase}
.cur.big .cur__label{opacity:1}
@media(pointer:coarse){.cur{display:none}}

/* ============================================================
   LAYOUT
   ============================================================ */
#smooth-wrapper{position:relative}
.wrap{padding:0 var(--pad)}
.inner{max-width:var(--maxw);margin:0 auto}
section{position:relative}

/* section header block */
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  border-top:2px solid var(--ink);padding-top:16px;margin-bottom:clamp(30px,6vw,80px)}
.shead__no{font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.shead__t{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-align:right;color:var(--mut)}

/* ---------- HERO ---------- */
.hero{height:100vh;position:relative;overflow:hidden;background:var(--bg)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
#heroCanvas{width:100%;height:100%;object-fit:cover}
.hero__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1;transition:opacity .6s ease}
.hero__poster.hidden{opacity:0}
.hero__grid{position:absolute;inset:0;z-index:2;padding:clamp(84px,12vh,138px) var(--pad) clamp(24px,5.5vh,54px);pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between}
.hero__kicker{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:clamp(10px,.85vw,13px);
  display:flex;gap:14px;align-items:center;color:var(--ink)}
.hero__kicker i{display:inline-block;width:34px;height:8px;background:var(--acid)}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem}
.hero__lead{max-width:min(43vw,600px)}
.hero__h{font-family:var(--mega);text-transform:uppercase;line-height:.9;letter-spacing:-.005em;
  font-size:clamp(2.4rem,6.9vw,7.6rem);color:var(--ink)}
.hero__h .ln{display:block;overflow:hidden;padding-bottom:.03em}
.hero__h .ln>span{display:block}
.hero__h em{font-style:normal;color:var(--acid-ink)}
.hero__sub{margin-top:clamp(16px,2vw,26px);max-width:44ch;font-family:var(--disp);font-weight:500;
  font-size:clamp(15px,1.3vw,19px);line-height:1.55;color:var(--ink-soft)}
@media(max-width:820px){.hero__lead{max-width:100%}.hero__foot{flex-direction:column;align-items:flex-start;gap:16px}}
.hero__scroll{flex:none;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll b{display:block;width:1px;height:44px;background:var(--ink);transform-origin:top;animation:scrolln 1.9s cubic-bezier(.76,0,.24,1) infinite}
@keyframes scrolln{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* hero beat captions (gsap-eased fade + slide) */
.beats{position:absolute;inset:0;z-index:3;pointer-events:none}
.beat{position:absolute;left:var(--pad);bottom:clamp(120px,20vh,220px);max-width:22ch;opacity:0;will-change:transform,opacity}
.beat__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--acid-ink);margin-bottom:8px}
.beat__t{font-family:var(--mega);text-transform:uppercase;font-size:clamp(1.6rem,4.4vw,3.4rem);line-height:.96;color:var(--ink)}
.beat.right{left:auto;right:var(--pad);text-align:right}
.beat.on-dark .beat__t{color:var(--on-dark)}
.beat.on-dark .beat__n{color:var(--acid)}

/* ---------- MANIFESTO (dark — continues the film's dark climax) ---------- */
.mani{padding:clamp(110px,18vh,240px) 0;background:var(--dark);color:var(--on-dark)}
.mani__t{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.9rem,5.2vw,4.7rem);max-width:19ch}
.mani__t .q{color:#8b877c}

/* ---------- HORIZONTAL DECISIONS ---------- */
.deck{background:var(--dark);color:var(--on-dark);overflow:hidden}
.deck__track{display:flex;height:100vh;align-items:stretch;will-change:transform}
.panel{flex:0 0 min(86vw,760px);border-right:2px solid rgba(231,227,216,.22);padding:var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;position:relative}
.panel:first-child{border-left:2px solid rgba(231,227,216,.22)}
.panel__no{font-family:var(--mega);font-size:clamp(6rem,18vh,16rem);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--on-dark)}
.panel__no.acid{-webkit-text-stroke:1.5px var(--acid);color:transparent}
.panel__lab{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--acid)}
.panel__t{font-family:var(--mega);text-transform:uppercase;font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:.95;margin:16px 0}
.panel__d{font-family:var(--disp);font-weight:400;font-size:clamp(15px,1.2vw,18px);line-height:1.55;max-width:36ch;color:#d6d2c7}
.panel__intro{flex:0 0 min(78vw,540px);justify-content:center;gap:22px;background:var(--dark);color:var(--on-dark);
  border-left:8px solid var(--acid)!important}
.panel__intro .panel__lab{color:var(--acid)}
.panel__intro h2{font-family:var(--mega);text-transform:uppercase;font-size:clamp(2.6rem,6vw,5.4rem);line-height:.98;letter-spacing:-.005em}
.panel__intro h2 em{font-style:normal;color:var(--acid)}

/* ---------- SECTION SEAMS (eased light<->dark journey) ---------- */
.seam{height:clamp(120px,22vh,280px);pointer-events:none;position:relative;z-index:0}
.seam--down{background:linear-gradient(180deg,var(--bg) 0%,var(--dark) 100%)}
.seam--up{background:linear-gradient(180deg,var(--dark) 0%,var(--bg) 100%)}
.seam--down.on-bg2{background:linear-gradient(180deg,var(--bg) 0%,var(--dark) 100%)}

/* ---------- MARQUEE ---------- */
.marq{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;padding:18px 0;background:var(--bg)}
.marq__row{display:flex;gap:0;white-space:nowrap;width:max-content;will-change:transform}
.marq__row span{font-family:var(--mega);text-transform:uppercase;font-size:clamp(2.4rem,6vw,5rem);line-height:1;padding:0 .35em;display:flex;align-items:center;gap:.35em}
.marq__row i{display:inline-block;width:.32em;height:.32em;background:var(--acid);border-radius:50%}

/* ---------- SPECS ---------- */
.specs{padding:clamp(80px,13vh,170px) 0}
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.spec{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:clamp(20px,2.6vw,40px);min-height:clamp(180px,24vh,300px);
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.spec__lab{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--mut)}
.spec__v{font-family:var(--mega);font-size:clamp(3rem,7vw,6.4rem);line-height:.82;letter-spacing:-.01em}
.spec__v u{text-decoration:none;font-size:.34em;vertical-align:super;color:var(--acid-ink);margin-left:.1em}
.spec__d{font-family:var(--disp);font-weight:400;font-size:14px;color:var(--ink-soft);line-height:1.5;max-width:28ch}
.spec:hover{background:var(--ink);color:var(--on-dark)}
.spec:hover .spec__lab,.spec:hover .spec__d{color:#b7b3a8}
@media(max-width:900px){.spec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.spec-grid{grid-template-columns:1fr}}

/* ---------- OFFER ---------- */
.offer{background:var(--ink);color:var(--on-dark);padding:clamp(80px,13vh,170px) 0}
.offer .shead{border-color:var(--on-dark)}
.offer .shead__t{color:#9a968b}
.ticket{border:2px solid var(--on-dark);display:grid;grid-template-columns:1.15fr .85fr}
.ticket__l{padding:clamp(28px,4vw,64px);border-right:2px dashed rgba(231,227,216,.4)}
.ticket__scar{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--acid);display:flex;align-items:center;gap:10px}
.ticket__scar b{display:inline-block;width:8px;height:8px;background:var(--acid);border-radius:50%;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.ticket__h{font-family:var(--mega);text-transform:uppercase;font-size:clamp(2.4rem,5.2vw,4.8rem);line-height:.94;margin:20px 0 14px}
.ticket__p{font-family:var(--disp);font-weight:400;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:#cec9be;max-width:46ch}
.ticket__list{list-style:none;margin-top:26px;display:grid;gap:0}
.ticket__list li{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(11px,1vw,13px);
  padding:13px 0;border-top:1px solid rgba(231,227,216,.2);display:flex;gap:14px;align-items:center}
.ticket__list li::before{content:'→';color:var(--acid)}
.ticket__r{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.ticket__price{display:flex;align-items:flex-end;gap:14px;line-height:.8}
.ticket__now{font-family:var(--mega);font-size:clamp(5rem,13vw,11rem);line-height:.74;letter-spacing:-.02em}
.ticket__now u{text-decoration:none;font-size:.3em;vertical-align:super;color:var(--acid)}
.ticket__was{font-family:var(--mono);font-size:14px;color:#9a968b;text-decoration:line-through;padding-bottom:.7em}
.ticket__badge{font-family:var(--mono);font-size:12px;background:var(--acid);color:var(--ink);padding:5px 9px;align-self:flex-start;letter-spacing:.08em}
.btn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  background:var(--acid);color:var(--ink);border:2px solid var(--acid);padding:20px 24px;
  font-family:var(--mega);text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.7rem);letter-spacing:.01em;
  transition:background .35s cubic-bezier(.76,0,.24,1),color .35s}
.btn span.arw{font-family:var(--disp);font-weight:900;transition:transform .4s cubic-bezier(.76,0,.24,1)}
.btn:hover{background:transparent;color:var(--acid)}
.btn:hover span.arw{transform:translateX(8px)}
.ticket__fine{font-family:var(--mono);font-size:11px;color:#8a877c;letter-spacing:.05em;line-height:1.6}
.ticket__count{font-family:var(--mega);font-size:clamp(2rem,4vw,3.4rem);line-height:.9}
.ticket__count u{text-decoration:none;color:var(--acid);font-size:.5em;vertical-align:super}
@media(max-width:820px){.ticket{grid-template-columns:1fr}.ticket__l{border-right:none;border-bottom:2px dashed rgba(231,227,216,.4)}}

/* ---------- CONTACT + FOOTER ---------- */
.contact{padding:clamp(80px,12vh,160px) 0 0}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px)}
.cgrid__l h2{font-family:var(--mega);text-transform:uppercase;font-size:clamp(2.4rem,6vw,5rem);line-height:.86}
.cgrid__l p{font-family:var(--disp);font-weight:400;font-size:clamp(14px,1.2vw,17px);line-height:1.5;max-width:40ch;margin:20px 0;color:var(--ink-soft)}
.cgrid__l a.mail{font-family:var(--mono);font-size:clamp(14px,1.6vw,20px);border-bottom:2px solid var(--ink);padding-bottom:3px;display:inline-block}
.form{display:grid;gap:0;border-top:2px solid var(--ink)}
.field{border-bottom:2px solid var(--ink);display:flex;flex-direction:column;gap:6px;padding:16px 0}
.field label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--mut)}
.field input,.field textarea{font-family:var(--disp);font-weight:600;font-size:clamp(16px,1.6vw,20px);background:none;border:none;color:var(--ink);resize:none}
.field input::placeholder,.field textarea::placeholder{color:var(--line-2)}
.form .btn{margin-top:22px;background:var(--ink);color:var(--bg);border-color:var(--ink)}
.form .btn:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.thanks{font-family:var(--mega);text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.6rem);color:var(--acid-deep);padding:30px 0}
@media(max-width:820px){.cgrid{grid-template-columns:1fr}}

.foot{margin-top:clamp(60px,10vh,140px);border-top:2px solid var(--ink);overflow:hidden}
.foot__word{font-family:var(--mega);text-transform:uppercase;font-size:19.5vw;line-height:.78;letter-spacing:-.02em;
  text-align:center;margin:.1em 0 -.06em;white-space:nowrap}
.foot__meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:22px 0 26px;border-top:2px solid var(--ink)}
.foot__meta span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mut)}

/* sticky mini-cta */
.sticky{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120%);z-index:38;
  display:flex;align-items:center;gap:16px;background:var(--ink);color:var(--bg);border:2px solid var(--ink);
  padding:11px 12px 11px 20px;transition:transform .5s cubic-bezier(.76,0,.24,1)}
.sticky.show{transform:translate(-50%,0)}
.sticky b{font-family:var(--mega);text-transform:uppercase;font-size:15px;letter-spacing:.02em}
.sticky small{font-family:var(--mono);font-size:11px;color:var(--acid)}
.sticky a{background:var(--acid);color:var(--ink);font-family:var(--mono);text-transform:uppercase;font-size:11px;letter-spacing:.08em;padding:9px 14px}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .mask>*,.reveal,.hero__h .ln>span{transform:none!important;opacity:1!important}
}