/* =============================================================================
   BAE — More Worlds Await
   Single stylesheet. No frameworks, no animation libraries.

   CONTENTS
   01 tokens          07 ticker
   02 reset + base    08 showcase (TikTok / Instagram)
   03 overlays        09 collab + pitch + contacts
   04 nav             10 footer
   05 buttons         11 reveals
   06 hero + posters  12 responsive + reduced motion
============================================================================= */

/* ------------------------------------------------------------- 01 TOKENS */
:root{
  /* ink */
  --ink:        #08060B;
  --ink-2:      #0D0913;
  --ink-3:      #15101F;
  --paper:      #F5F1E6;
  --paper-dim:  #A79FB4;

  /* accents */
  --lime:       #CCFF00;
  --magenta:    #FF2D7E;
  --cyan:       #19E7FF;
  --violet:     #7A4DFF;
  --orange:     #FF7A1A;

  /* type */
  --display: "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --body:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* rhythm */
  --pad:     clamp(1.15rem, 5vw, 4.5rem);
  --section: clamp(4.5rem, 11vw, 9.5rem);
  --radius:  14px;

  /* film grain, used in several places */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- 02 RESET/BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
h1,h2,h3{ margin:0; font-weight:400; line-height:.92; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--lime);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:fixed; top:.6rem; left:.6rem; z-index:999;
  padding:.65rem 1rem; background:var(--lime); color:#000;
  font-family:var(--mono); font-size:.8rem; text-transform:uppercase;
  translate:0 -200%;
}
.skip:focus{ translate:0 0; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Visible to screen readers and search engines, not on screen — carries the
   text of the headline now that the wordmark and slogan are artwork. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

.eyebrow{
  font-family:var(--mono);
  font-size:clamp(.66rem,.6rem + .2vw,.78rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--paper-dim);
  display:flex; align-items:center; gap:.6em;
  flex-wrap:wrap;
}
.eyebrow i{ color:var(--magenta); font-style:normal; }
.eyebrow .num{
  color:#000; background:var(--lime);
  padding:.15em .5em; font-weight:700; letter-spacing:.1em;
}

/* ----------------------------------------------------------- 03 OVERLAYS */
.grain{
  position:fixed; inset:-50%; z-index:900;
  pointer-events:none; opacity:.05;
  background-image:var(--grain);
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) }
  40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) }
  80%{ transform:translate(3%,1%) }
}

.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:901;
  background:rgba(255,255,255,.06); pointer-events:none;
}
.progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--magenta));
}

.cursor{
  position:fixed; top:0; left:0; z-index:950;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1.5px solid var(--lime); border-radius:50%;
  pointer-events:none; opacity:0;
  transition:opacity .25s, scale .22s, background-color .22s, border-color .22s;
  mix-blend-mode:difference;
}
.cursor i{
  position:absolute; inset:0; margin:auto;
  width:4px; height:4px; border-radius:50%; background:var(--lime);
}
.cursor.is-on{ opacity:1; }
.cursor.is-hot{ scale:2.1; background:rgba(204,255,0,.14); border-color:var(--cyan); }

/* ---------------------------------------------------------------- 04 NAV */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:600;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem var(--pad);
  transition:background-color .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,6,11,.78);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(245,241,230,.1);
}
.nav__mark{
  position:relative; display:block;
  margin-right:auto; line-height:0;
}
.nav__mark picture{ display:block; }
/* max-width:100% would collapse against the shrink-to-fit flex item, so the
   height drives the size here and the aspect ratio supplies the width */
.nav__mark img{ display:block; width:auto; max-width:none; height:clamp(22px,3.4vw,30px); }
.nav__mark::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:3px; background:var(--lime);
  scale:0 1; transform-origin:left; transition:scale .3s;
}
.nav__mark:hover::after{ scale:1 1; }

.nav__links{ display:none; gap:1.6rem; font-size:.92rem; }
.nav__links a{ color:var(--paper-dim); transition:color .2s; }
.nav__links a:hover{ color:var(--paper); }

.nav__cta{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem;
  border:1.5px solid var(--paper);
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background-color .2s, color .2s;
}
.nav__cta svg{ width:12px; height:12px; }
.nav__cta:hover{ background:var(--lime); border-color:var(--lime); color:#000; }

/* ------------------------------------------------------------ 05 BUTTONS */
.btn{
  --btn-bg:var(--lime); --btn-fg:#000;
  position:relative; z-index:0;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.5rem;
  font-weight:700; font-size:1rem; letter-spacing:-.01em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:2px solid var(--btn-bg);
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  overflow:hidden;
  transition:translate .18s, box-shadow .18s, background-color .25s, color .25s, border-color .25s;
}
.btn svg{ width:17px; height:17px; transition:translate .25s; }
.btn:hover{ translate:-3px -3px; box-shadow:9px 9px 0 rgba(0,0,0,.6); }
.btn:active{ translate:2px 2px; box-shadow:2px 2px 0 rgba(0,0,0,.6); }
.btn:hover svg{ translate:3px 0; }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--paper);
  border-color:var(--paper); box-shadow:5px 5px 0 rgba(204,255,0,.25);
}
.btn--ghost:hover{ --btn-bg:var(--paper); --btn-fg:#000; }
.btn--tiktok{ --btn-bg:var(--cyan); }
.btn--instagram{ --btn-bg:var(--orange); }

/* -------------------------------------------------- 06 HERO + POSTER CARD */
.hero{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center;
  padding:5.5rem var(--pad) 4.5rem;
  overflow:hidden;
}
/* deep background: colour wash + faint grid */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(122,77,255,.34), transparent 62%),
    radial-gradient(60% 50% at 84% 22%, rgba(25,231,255,.20), transparent 60%),
    radial-gradient(85% 60% at 50% 108%, rgba(255,45,126,.30), transparent 65%),
    var(--ink);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(245,241,230,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,230,.045) 1px, transparent 1px);
  background-size:68px 68px;
  mask-image:radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 78%);
}

.hero__stage{ position:absolute; inset:0; z-index:1; }

/* radial scrim keeps the wordmark dominant over the collage */
.hero__scrim{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(52% 48% at 50% 50%, rgba(8,6,11,.95) 0%, rgba(8,6,11,.84) 46%, rgba(8,6,11,0) 80%);
}
.hero__glow{
  position:absolute; z-index:3; pointer-events:none;
  left:50%; top:50%; translate:-50% -50%;
  width:min(70vw,780px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(204,255,0,.17), transparent 62%);
  filter:blur(14px);
}

.hero .eyebrow{ justify-content:center; text-align:center; }

.hero__content{
  position:relative; z-index:10;
  width:100%; max-width:62rem; margin-inline:auto;
  text-align:center;
  display:grid; justify-items:center; gap:clamp(.7rem,1.6vw,1.1rem);
}

/* ---- wordmark + slogan (real brand artwork) --------------------------- */
.hero__h1{ display:grid; justify-items:center; gap:clamp(.5rem,1.4vw,1rem); }

.wordmark{
  display:block; width:clamp(230px,50vw,540px);
  filter:drop-shadow(0 12px 46px rgba(204,255,0,.2));
}
.wordmark img{
  width:100%; height:auto;
  animation:logoglitch 9s steps(1) infinite;
}
/* chromatic split rides the logo's own alpha channel */
@keyframes logoglitch{
  0%,88%,100%{ filter:none; translate:0 0 }
  89%{ filter:drop-shadow(-8px 3px 0 var(--cyan)) drop-shadow(6px -3px 0 var(--magenta)); translate:-3px 0 }
  91%{ filter:drop-shadow(7px -2px 0 var(--cyan)) drop-shadow(-5px 3px 0 var(--magenta)); translate:4px 0 }
  93%{ filter:drop-shadow(-4px 0 0 var(--magenta)); translate:-2px 0 }
  95%{ filter:none; translate:0 0 }
}

.hero__slogan{ display:block; width:clamp(170px,36vw,370px); }
.hero__slogan img{ width:100%; height:auto; opacity:.92; }

.hero__copy{
  max-width:34rem; color:#D9D3E4;
  font-size:clamp(1rem,.96rem + .35vw,1.22rem);
  text-wrap:pretty;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

.hero__chips{
  display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.hero__chips li{
  padding:.3rem .65rem;
  border:1px solid rgba(245,241,230,.22);
  border-radius:99px; color:var(--paper-dim);
}

/* ---- scroll cue ------------------------------------------------------- */
.scrollcue{
  position:absolute; z-index:10; bottom:1.35rem; left:50%; translate:-50% 0;
  display:grid; justify-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--paper-dim);
}
.scrollcue i{
  width:1px; height:34px;
  background:linear-gradient(var(--lime),transparent);
  animation:cue 1.9s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ scale:1 .4; opacity:.4 } 50%{ scale:1 1; opacity:1 } }

/* ---- stickers --------------------------------------------------------- */
.stickers{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.sticker{
  position:absolute;
  font-family:var(--display); font-size:clamp(.72rem,1.5vw,1rem);
  text-transform:uppercase; letter-spacing:.04em;
  color:#000; background:var(--lime);
  padding:.3em .6em; rotate:-9deg;
  box-shadow:3px 3px 0 rgba(0,0,0,.5);
  animation:bob 6s ease-in-out infinite;
}
.sticker svg{ width:clamp(16px,2.4vw,30px); height:clamp(16px,2.4vw,30px); }
.sticker--1{ left:15%;  top:31%;  background:var(--cyan);    animation-delay:-.4s }
.sticker--2{ right:16%; top:28%;  background:var(--magenta); color:#fff; rotate:8deg; animation-delay:-1.6s }
.sticker--3{ left:24%;  bottom:23%;background:var(--lime);   rotate:12deg; animation-delay:-2.8s }
.sticker--4{ right:23%; bottom:19%;background:var(--paper);  rotate:-6deg; animation-delay:-3.7s }
.sticker--5{ left:52%;  top:9%;    background:var(--violet); color:#fff; rotate:14deg; animation-delay:-5s }
@keyframes bob{
  0%,100%{ translate:0 0 }
  50%{ translate:0 -12px }
}

/* ---- POSTER CARD (shared: hero collage + content rails) --------------- */
.poster{
  --c1:var(--magenta); --c2:var(--violet);
  --rot:0deg; --depth:1; --w:170px;
  position:relative;
}
.poster__inner{
  position:relative;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  rotate:var(--rot);
  background:var(--ink-3);
  border:1px solid rgba(245,241,230,.14);
  box-shadow:
    0 2px 0 rgba(255,255,255,.08) inset,
    0 26px 44px -18px rgba(0,0,0,.9),
    0 6px 14px -6px rgba(0,0,0,.8);
  transition:scale .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}

/* generated artwork */
.poster__media{ position:absolute; inset:0; }
.poster__art{
  position:absolute; inset:0;
  background:
    radial-gradient(118% 86% at 18% 8%,  var(--c1), transparent 58%),
    radial-gradient(110% 78% at 88% 94%, var(--c2), transparent 60%),
    linear-gradient(158deg, var(--c2) 0%, #0A0610 72%);
}
.poster__art::after{      /* halftone */
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(circle, rgba(0,0,0,.6) .9px, transparent 1.5px);
  background-size:5px 5px;
  mask-image:linear-gradient(200deg, transparent 18%, #000 95%);
}
.poster__motif{
  position:absolute; left:50%; top:42%; translate:-50% -50%;
  width:58%; height:58%;
  color:#fff; opacity:.9;
  mix-blend-mode:overlay;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.poster__num{
  position:absolute; right:.14em; top:.06em;
  font-family:var(--display); font-size:3.1em; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.3);
}
.poster__scan{
  position:absolute; inset:0; opacity:.26; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px);
}
.poster__media::after{    /* grain + top vignette */
  content:""; position:absolute; inset:0; opacity:.14;
  background-image:var(--grain);
}

.poster__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .4s;
}
.poster.is-playing .poster__video{ opacity:1; }
.poster__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

.poster__meta{
  position:absolute; inset:auto 0 0 0;
  padding:.85em .8em .8em;
  display:grid; gap:.28em;
  background:linear-gradient(transparent, rgba(5,3,8,.86) 58%);
}
.poster__tag{
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--lime);
}
.poster__title{
  display:block; margin:0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(.82rem,1.05vw,1.05rem);
  line-height:.95; text-transform:uppercase;
  color:#fff; text-wrap:balance;
}
.poster__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(245,241,230,.92); color:#000;
  opacity:0; scale:.6; transition:opacity .3s, scale .3s;
}
.poster__play svg{ width:20px; height:20px; margin-left:2px; }
.poster__ph{
  position:absolute; top:.6em; left:.6em;
  font-family:var(--mono); font-size:.52rem;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.22em .45em;
  background:rgba(8,6,11,.66); color:rgba(245,241,230,.72);
  border:1px solid rgba(245,241,230,.2);
  backdrop-filter:blur(3px);
}

.poster:hover .poster__inner,
.poster:focus-visible .poster__inner{
  scale:1.07;
  border-color:var(--lime);
  box-shadow:0 34px 60px -18px rgba(0,0,0,.95), 0 0 0 2px rgba(204,255,0,.5);
}
.poster:hover .poster__play{ opacity:1; scale:1; }

/* glitch burst (JS toggles .is-glitch at random) */
.poster.is-glitch .poster__media{ animation:cardglitch .36s steps(2) 1; }
@keyframes cardglitch{
  0%  { filter:none; clip-path:inset(0 0 0 0) }
  25% { filter:hue-rotate(80deg) saturate(2); clip-path:inset(12% 0 46% 0); translate:-6px 0 }
  50% { filter:invert(1); clip-path:inset(54% 0 18% 0); translate:7px 0 }
  75% { filter:hue-rotate(-60deg); clip-path:inset(28% 0 60% 0); translate:-3px 0 }
  100%{ filter:none; clip-path:inset(0 0 0 0); translate:0 0 }
}

/* --- collage placement (shared mechanics; coords set per breakpoint) --- */
.hero__stage .poster{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--w);
  translate:calc(-50% + var(--px,0px)) calc(-50% + var(--py,0px));
  opacity:0; scale:.82; filter:blur(10px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), scale .9s cubic-bezier(.2,.8,.2,1), filter .9s;
  transition-delay:var(--delay,0ms);
}
.hero__stage .poster.is-in{ opacity:var(--op,1); scale:1; filter:blur(var(--blur,0px)); }
.hero__stage .poster__inner{ animation:float var(--dur,9s) ease-in-out var(--fdelay,0s) infinite; }
/* collage cards are decoration, not controls — no play affordance on them */
.hero__stage .poster__play{ display:none; }
/* real thumbnails are far brighter than the generated artwork was, so they
   get dimmed to keep the wordmark the brightest thing on screen. The caption
   sits outside .poster__media, so it stays at full contrast. */
.hero__stage .poster__media{ filter:brightness(.68) saturate(1.1); }
@keyframes float{
  0%,100%{ translate:0 0 }
  50%{ translate:0 -16px }
}

/* mobile-first collage: four cards, kept well clear of the wordmark */
.hero__stage .poster{ --w:34vw; --op:.5; --blur:.6px; z-index:1; }
.hero__stage [data-slot="1"]{ --x:13%; --y:21%; --rot:-8deg; --w:36vw; --depth:.9; --dur:9s;  --fdelay:-1s }
.hero__stage [data-slot="2"]{ --x:88%; --y:26%; --rot:9deg;  --w:31vw; --depth:.8; --dur:11s; --fdelay:-4s }
.hero__stage [data-slot="3"]{ --x:16%; --y:83%; --rot:7deg;  --w:34vw; --depth:1;  --dur:10s; --fdelay:-2.5s }
.hero__stage [data-slot="4"]{ --x:87%; --y:88%; --rot:-6deg; --w:29vw; --depth:.7; --dur:12s; --fdelay:-6s }
.hero__stage [data-slot="5"],
.hero__stage [data-slot="6"],
.hero__stage [data-slot="7"],
.hero__stage [data-slot="8"],
.hero__stage [data-slot="9"],
.hero__stage [data-slot="10"]{ display:none; }

/* ------------------------------------------------------------- 07 TICKER */
.ticker{
  position:relative; z-index:20;
  background:var(--magenta); color:#120007;
  border-block:3px solid var(--ink);
  padding:.55rem 0; overflow:hidden;
  rotate:-.8deg; margin-block:-1.2rem;
}
.ticker__track{
  display:flex; gap:2.2rem; width:max-content;
  animation:marquee 26s linear infinite;
}
.ticker__track span{
  font-family:var(--display);
  font-size:clamp(1.1rem,2.6vw,1.9rem);
  text-transform:uppercase; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:2.2rem;
  white-space:nowrap;
}
.ticker__track span::after{ content:"✦"; font-size:.7em; color:#fff; }
@keyframes marquee{ from{ translate:0 0 } to{ translate:-50% 0 } }

/* ----------------------------------------------------------- 08 SHOWCASE */
.showcase{
  position:relative;
  padding:calc(var(--section) + 1.2rem) var(--pad) var(--section);
  background:
    radial-gradient(60% 40% at 90% 0%, rgba(25,231,255,.09), transparent 60%),
    radial-gradient(50% 40% at 5% 60%, rgba(255,45,126,.08), transparent 60%),
    var(--ink-2);
}
.sechead{
  max-width:46rem; margin:0 auto clamp(2.4rem,5vw,4rem);
  display:grid; gap:1rem; justify-items:center; text-align:center;
}
.sechead h2{
  font-family:var(--display);
  font-size:clamp(2.2rem,7.5vw,5rem);
  text-transform:uppercase; letter-spacing:-.01em;
  text-wrap:balance;
}
.sechead h2 em{ font-style:normal; color:var(--lime); }
.sechead__copy{ color:var(--paper-dim); max-width:34rem; text-wrap:pretty; }

.channels{
  display:grid; gap:clamp(1.2rem,2.5vw,2rem);
  max-width:88rem; margin-inline:auto;
}
.channel{
  position:relative; isolation:isolate;
  display:grid; gap:1.1rem;
  padding:clamp(1.1rem,2.6vw,1.9rem);
  border-radius:20px;
  border:1px solid rgba(245,241,230,.12);
  background:linear-gradient(180deg, rgba(245,241,230,.05), rgba(245,241,230,.015));
  overflow:hidden;
}
.channel::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--chan, var(--lime));
}
.channel::after{
  content:""; position:absolute; z-index:-1; inset:-40% -10% auto -10%; height:70%;
  background:radial-gradient(60% 100% at 50% 0%, var(--chan-glow, transparent), transparent 70%);
}
.channel--tiktok{
  --chan:linear-gradient(90deg,var(--cyan),var(--magenta));
  --chan-glow:rgba(25,231,255,.22);
}
.channel--instagram{
  --chan:linear-gradient(90deg,var(--orange),var(--magenta) 55%,var(--violet));
  --chan-glow:rgba(255,122,26,.2);
}

.channel__head{ display:flex; align-items:center; gap:.85rem; }
.channel__badge{
  display:grid; place-items:center;
  width:48px; height:48px; flex:none;
  border-radius:13px; background:var(--chan);
  color:#06040A;
}
.channel__badge svg{ width:25px; height:25px; }
.channel__id h3{
  font-family:var(--display); font-size:1.7rem; text-transform:uppercase;
}
.channel__handle{
  font-family:var(--mono); font-size:.8rem; color:var(--paper-dim);
  border-bottom:1px dashed rgba(245,241,230,.3);
  transition:color .2s, border-color .2s;
}
.channel__handle:hover{ color:var(--lime); border-color:var(--lime); }
.channel__blurb{ color:var(--paper-dim); font-size:.97rem; max-width:40ch; }

/* horizontal shelf of vertical videos */
.rail{
  display:flex; gap:.85rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:.3rem .3rem 1rem;
  margin:0 -.3rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(245,241,230,.3) transparent;
}
.rail::-webkit-scrollbar{ height:6px; }
.rail::-webkit-scrollbar-thumb{ background:rgba(245,241,230,.25); border-radius:99px; }
.rail .poster{
  flex:0 0 auto; width:clamp(142px,40vw,178px);
  scroll-snap-align:start;
}
.rail .poster__inner{ --rot:0deg; }
.channel .btn{ justify-self:start; }

/* ------------------------------------------------- 09 COLLAB / PITCH / CTA */
.collab{
  position:relative;
  padding:var(--section) var(--pad);
  background:var(--lime); color:#09060C;
  content-visibility:auto; contain-intrinsic-size:auto 900px;
  overflow:hidden;
}
.collab::before{
  content:""; position:absolute; inset:0; opacity:.14;
  background-image:radial-gradient(circle, rgba(0,0,0,.9) 1px, transparent 1.6px);
  background-size:14px 14px;
  mask-image:radial-gradient(90% 70% at 80% 10%, #000, transparent 70%);
}
.collab::after{
  content:""; position:absolute; inset:0; opacity:.07; mix-blend-mode:multiply;
  background-image:var(--grain);
}
.collab__inner{
  position:relative;
  max-width:68rem; margin-inline:auto;
  display:grid; gap:clamp(1.1rem,2.6vw,1.7rem);
}
.collab .eyebrow{ color:rgba(9,6,12,.62); }
.collab .eyebrow .num{ background:#09060C; color:var(--lime); }

.collab__h2{
  font-family:var(--display);
  font-size:clamp(2.6rem,11.5vw,8.5rem);
  line-height:.86; text-transform:uppercase; letter-spacing:-.015em;
}
/* chromatic ghost via text-shadow — paints behind the fill, so it can never
   drift onto the line above the way an offset pseudo-element can */
.collab__h2 em{
  font-style:normal; color:var(--magenta);
  -webkit-text-stroke:2px #09060C;
  text-shadow:5px -4px 0 var(--cyan), -4px 4px 0 rgba(9,6,12,.22);
}
.collab__h2 .qmark{
  display:inline-block; color:#09060C;
  rotate:9deg; translate:.04em .04em;
}
.collab__copy{
  max-width:40rem; font-size:clamp(1.02rem,.98rem + .4vw,1.3rem);
  color:rgba(9,6,12,.84); text-wrap:pretty;
}

.collab__services{
  display:flex; flex-wrap:wrap; gap:.45rem;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.collab__services li{
  padding:.38rem .7rem; border:1.5px solid #09060C;
  background:rgba(255,255,255,.3);
  transition:background-color .2s, color .2s, translate .2s;
}
.collab__services li:hover{ background:#09060C; color:var(--lime); translate:0 -3px; }

.pitch{
  margin-top:.6rem;
  padding:clamp(1.1rem,3vw,1.8rem);
  border:2px dashed rgba(9,6,12,.45);
  background:rgba(255,255,255,.26);
  display:grid; gap:.8rem; justify-items:start;
  max-width:46rem;
}
.pitch__label{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(9,6,12,.6);
}
.pitch__line{
  font-family:var(--display);
  font-size:clamp(1.25rem,3.6vw,2.1rem);
  line-height:1.08; text-transform:uppercase;
}
.pitch__line span{ color:#09060C; }
.pitch__line em{ font-style:normal; color:var(--magenta); -webkit-text-stroke:1px #09060C; }
.pitch__line.is-rolling{ animation:rollin .34s ease-out; }
@keyframes rollin{
  from{ opacity:0; translate:0 10px; filter:blur(4px) }
  to  { opacity:1; translate:0 0;    filter:blur(0) }
}
.pitch__btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; cursor:pointer;
  background:#09060C; color:var(--lime);
  border:2px solid #09060C;
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase;
  transition:translate .18s, box-shadow .18s;
  box-shadow:4px 4px 0 rgba(9,6,12,.3);
}
.pitch__btn svg{ width:14px; height:14px; transition:rotate .5s; }
.pitch__btn:hover{ translate:-2px -2px; box-shadow:7px 7px 0 rgba(9,6,12,.35); }
.pitch__btn:hover svg{ rotate:180deg; }

.contacts{
  margin-top:.8rem;
  display:grid; gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
}
.contact{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; gap:.25rem; align-content:end;
  min-height:8.5rem; padding:1rem;
  background:#09060C; color:var(--paper);
  border:2px solid #09060C;
  transition:translate .2s, box-shadow .2s;
}
.contact::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--c, var(--lime));
  translate:0 101%; transition:translate .34s cubic-bezier(.2,.8,.2,1);
}
.contact--tiktok{ --c:var(--cyan) }
.contact--instagram{ --c:var(--orange) }
.contact--mail{ --c:var(--magenta) }
.contact:hover{ translate:-3px -3px; box-shadow:8px 8px 0 rgba(9,6,12,.35); }
.contact:hover::before{ translate:0 0; }
.contact:hover{ color:#09060C; }
.contact__icon{ width:24px; height:24px; margin-bottom:auto; }
.contact__k{ font-weight:700; font-size:1.05rem; }
.contact__v{ font-family:var(--mono); font-size:.76rem; opacity:.75; word-break:break-all; }

.collab__smallprint{
  font-size:.84rem; color:rgba(9,6,12,.62); max-width:38rem;
}

/* ------------------------------------------------------------- 10 FOOTER */
.footer{
  padding:clamp(3rem,7vw,5rem) var(--pad) 2rem;
  background:var(--ink);
  display:grid; gap:clamp(1.6rem,4vw,2.6rem);
  content-visibility:auto; contain-intrinsic-size:auto 420px;
}
.footer__top{
  display:grid; gap:1.6rem;
  align-items:center; justify-items:center; text-align:center;
}
.footer__mark{ display:block; line-height:0; width:clamp(150px,28vw,290px); }
.footer__mark img{
  width:100%; height:auto; opacity:.72;
  transition:opacity .35s, filter .35s;
}
.footer__mark:hover img{ opacity:1; filter:drop-shadow(0 0 20px rgba(204,255,0,.55)); }
.footer__links{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.footer__links a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem;
  border:1px solid rgba(245,241,230,.2);
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .2s, color .2s, border-color .2s;
}
.footer__links a svg{ width:15px; height:15px; }
.footer__links a [data-social="email"]{ text-transform:none; }
.footer__links a:hover{ background:var(--paper); color:#000; border-color:var(--paper); }
.footer__tagline{ line-height:0; }
.footer__tagline img{
  width:clamp(210px,52vw,460px); height:auto; margin-inline:auto;
  opacity:.9;
}
.footer__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  padding-top:1.4rem; border-top:1px solid rgba(245,241,230,.12);
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; color:var(--paper-dim);
}

/* ------------------------------------------------------------ 11 REVEALS */
/* Hidden only when JS is actually running — no-JS visitors see everything. */
.js .reveal{
  opacity:0; translate:0 22px;
  transition:opacity .75s cubic-bezier(.2,.8,.2,1), translate .75s cubic-bezier(.2,.8,.2,1);
  transition-delay:var(--rd,0ms);
}
.js .reveal.is-in{ opacity:1; translate:0 0; }

/* ------------------------------------------- 12 RESPONSIVE + REDUCED MOTION */

/* ---- tablet: six cards, roomier type ---- */
@media (min-width:760px){
  .nav__links{ display:flex; }
  .hero__stage .poster{ --op:.78; --blur:0px; }
  .hero__stage [data-slot="1"]{ --x:9%;  --y:40%; --rot:-8deg;  --w:clamp(120px,19vw,210px); --depth:1;   --dur:9s  }
  .hero__stage [data-slot="2"]{ --x:91%; --y:44%; --rot:7deg;   --w:clamp(120px,19vw,210px); --depth:1;   --dur:11s }
  .hero__stage [data-slot="3"]{ --x:22%; --y:13%; --rot:-14deg; --w:clamp(88px,13vw,150px);  --depth:.6;  --dur:12s; --op:.62; --blur:.6px }
  .hero__stage [data-slot="4"]{ --x:78%; --y:14%; --rot:11deg;  --w:clamp(88px,13vw,150px);  --depth:.6;  --dur:10s; --op:.62; --blur:.6px }
  .hero__stage [data-slot="5"]{ display:block; --x:26%; --y:103%; --rot:4deg;  --w:clamp(110px,17vw,190px); --depth:.9; --dur:13s }
  .hero__stage [data-slot="6"]{ display:block; --x:74%; --y:105%; --rot:-5deg; --w:clamp(110px,17vw,190px); --depth:.9; --dur:14s }
  .channels{ grid-template-columns:1fr 1fr; }
  .footer__top{ grid-template-columns:auto 1fr; justify-items:start; text-align:left; }
  .footer__links{ justify-content:flex-end; }
  .footer__tagline img{ margin-inline:0; }
}

/* ---- desktop: full ten-card composition ---- */
@media (min-width:1100px){
  .hero{ padding-inline:clamp(2rem,6vw,6rem); }
  .hero__stage .poster{ --op:.92; }
  .hero__stage [data-slot="1"]{ --x:7%;  --y:44%;  --rot:-8deg;  --w:clamp(150px,15.5vw,236px); --depth:1;   --dur:9s;  --fdelay:-.5s }
  .hero__stage [data-slot="2"]{ --x:93%; --y:47%;  --rot:7deg;   --w:clamp(150px,15.5vw,236px); --depth:1;   --dur:11s; --fdelay:-3s }
  .hero__stage [data-slot="3"]{ --x:20%; --y:15%;  --rot:-14deg; --w:clamp(104px,10.5vw,166px); --depth:.62; --dur:12s; --fdelay:-5s; --op:.8 }
  .hero__stage [data-slot="4"]{ --x:80%; --y:16%;  --rot:11deg;  --w:clamp(104px,10.5vw,166px); --depth:.62; --dur:10s; --fdelay:-7s; --op:.8 }
  .hero__stage [data-slot="5"]{ --x:12%; --y:79%;  --rot:9deg;   --w:clamp(112px,11.5vw,182px); --depth:.72; --dur:13s; --fdelay:-2s; --op:.86 }
  .hero__stage [data-slot="6"]{ --x:88%; --y:81%;  --rot:-9deg;  --w:clamp(112px,11.5vw,182px); --depth:.72; --dur:14s; --fdelay:-8s; --op:.86 }
  /* far layer — pushed into the outer corners so the headline keeps its air */
  .hero__stage [data-slot="7"]{ display:block; --x:3%;  --y:86%; --rot:-12deg;--w:clamp(72px,6.5vw,104px); --depth:.34; --dur:15s; --op:.5; --blur:1.6px }
  .hero__stage [data-slot="8"]{ display:block; --x:97%; --y:13%; --rot:10deg; --w:clamp(72px,6.5vw,104px); --depth:.34; --dur:16s; --op:.5; --blur:1.6px }
  .hero__stage [data-slot="9"]{ display:block; --x:26%; --y:107%;--rot:4deg;  --w:clamp(120px,13vw,196px); --depth:.9;  --dur:12s }
  .hero__stage [data-slot="10"]{display:block; --x:74%; --y:109%;--rot:-5deg; --w:clamp(120px,13vw,196px); --depth:.9;  --dur:13s }
  .rail .poster{ width:clamp(150px,13vw,186px); }
  .collab__inner{ gap:1.9rem; }
}

/* ---- very small phones: trim the collage further ---- */
@media (max-width:380px){
  .hero__stage [data-slot="2"],
  .hero__stage [data-slot="4"]{ display:none; }
  .sticker--3,.sticker--4,.sticker--5{ display:none; }
}

/* ---- phones: fewer stickers, tighter hero ---- */
@media (max-width:759px){
  /* keep every sticker out of the centre column — the CTAs live there */
  .sticker--1{ left:5%;  top:15% }
  .sticker--2{ right:4%; top:19% }
  .sticker--3{ left:4%;  bottom:15% }
  .sticker--4{ right:5%; bottom:8% }
  .sticker--5{ display:none }
  .hero{ padding-top:5.5rem; }
  .ticker{ rotate:-1.4deg; }
}

/* ---- short viewports: trim the hero lockup so the scroll cue keeps its air ---- */
@media (max-height:780px) and (min-width:760px){
  .wordmark{ width:clamp(210px,38vw,430px); }
  .hero__slogan{ width:clamp(160px,27vw,290px); }
  .hero__chips{ display:none; }
}

/* ---- pointer-coarse: no custom cursor, no hover-only reveals ---- */
@media (hover:none),(pointer:coarse){
  .cursor{ display:none; }
  .poster__play{ opacity:1; scale:1; background:rgba(245,241,230,.78); }
}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain{ animation:none; }
  .ticker__track{ animation:none; width:auto; overflow:hidden; }
  .reveal{ opacity:1; translate:0 0; }
  .hero__stage .poster{ opacity:var(--op,1); scale:1; filter:none; }
  .hero__stage .poster__inner{ animation:none; }
  .wordmark img{ animation:none; filter:none; }
  .scrollcue i{ animation:none; opacity:.7; }
}

/* ---- print ---- */
@media print{
  .grain,.cursor,.progress,.hero__stage,.stickers,.ticker,.scrollcue{ display:none !important; }
  body{ background:#fff; color:#000; }
}