/* ===========================================================
   DESYNK — desynktv.com
   Built on the Desynk brand kit. True black, molten gradient,
   Chakra Petch display / Inter body.
   =========================================================== */

/* ---------- 1. FONTS ---------- */
@font-face{
  font-family:'Chakra Petch';
  src:url('../assets/fonts/ChakraPetch-Medium.ttf') format('truetype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('../assets/fonts/ChakraPetch-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Chakra Petch';
  src:url('../assets/fonts/ChakraPetch-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../assets/fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---------- 2. TOKENS ---------- */
:root{
  /* background — brand spec: pure #000, never a soft black */
  --black:#000000;

  /* type */
  --ink:#e9e2e6;
  --ink-2:#a79ea4;
  --ink-3:#6f666c;
  --rose:#ff9ab0;
  --seam-core:#fff2f4;

  /* molten wordmark ramp */
  --m1:#ff8a1e;
  --m2:#ff3d3d;
  --m3:#ff2a6d;
  --m4:#c22ad0;
  --molten:linear-gradient(90deg,var(--m1) 0%,var(--m2) 40%,var(--m3) 70%,var(--m4) 100%);

  /* dagger ramp (magenta tip -> lava base) */
  --dagger:linear-gradient(180deg,#f215ed 2%,#fe09fa 24%,#fe21d1 48%,#fd3d9c 60%,#fc5366 72%,#fc593d 84%,#f5642f 96%);

  /* surfaces */
  --hair:rgba(255,154,176,.15);
  --hair-hot:rgba(255,42,109,.42);
  --panel:rgba(255,255,255,.022);
  --panel-2:rgba(255,255,255,.04);

  /* rhythm */
  --gut:clamp(12px,4vw,56px);
  --maxw:1280px;
  --sec:clamp(60px,7.5vw,112px);

  /* type scale */
  --h1:clamp(2.6rem,7.2vw,6.6rem);      /* fits 'JACK OF ALL GAMES,' on one line */
  --h1-m:clamp(1.75rem,13.5vw,3.6rem);  /* the shorter mobile line-breaks */
  --h2:clamp(1.05rem,6.2vw,3rem);       /* scales down far enough for a watch */
  --h3:clamp(1.15rem,2vw,1.45rem);
  --body:clamp(.98rem,1.1vw,1.06rem);

  --ease:cubic-bezier(.2,.7,.25,1);
}

@property --shift{ syntax:'<length>'; inherits:true; initial-value:0px; }

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0;
  background:var(--black);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--body);
  line-height:1.65;
  overflow-x:hidden;
  font-feature-settings:'ss01','cv05';
}
img,video,svg{display:block;max-width:100%}
[hidden]{display:none!important}   /* component display rules must not beat it */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:'Chakra Petch',sans-serif;font-weight:700;line-height:1;text-transform:uppercase}
p{margin:0}
::selection{background:var(--m3);color:#fff}
:focus-visible{outline:2px solid var(--m3);outline-offset:3px;border-radius:2px}

/* ---------- 4. ATMOSPHERE ---------- */
/* fixed film grain + scanlines, sits over everything, never catches clicks */
.fx-grain{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
  opacity:.45;mix-blend-mode:overlay;
}
.fx-noise{
  position:fixed;inset:-50%;z-index:899;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noiseShift 7s steps(6) infinite;
}
@keyframes noiseShift{
  0%{transform:translate(0,0)}     16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,1%)}  83%{transform:translate(-1%,3%)}
  100%{transform:translate(0,0)}
}
/* pointer-tracked molten bloom */
.fx-pointer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(480px circle at var(--mx,50%) var(--my,10%),rgba(255,42,109,.085),transparent 62%);
  transition:background .25s linear;
}
/* scroll desync — the page tears into horizontal slices while you scroll.
   The filter is only mounted while it's actually moving; idle pages render
   normally so text stays crisp and nothing costs a frame. */
.desync-on main,
.desync-on .foot{filter:url(#desyncSlice)}

/* bright scan seams that flash with the tear, same rose as the wordmark's */
.fx-seams{
  position:fixed;inset:0;z-index:898;pointer-events:none;opacity:0;
  background-image:repeating-linear-gradient(0deg,
    rgba(255,154,176,.5) 0 1px, transparent 1px 10px);
  mix-blend-mode:screen;
  transition:opacity .2s linear;
}

/* scroll progress seam */
.fx-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:950;
  background:var(--molten);transform:scaleX(0);transform-origin:0 50%;
  box-shadow:0 0 14px rgba(255,42,109,.6);
}

/* ---------- 5. PRIMITIVES ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--sec);z-index:1}
.sec + .sec{border-top:1px solid rgba(255,154,176,.08)}

/* molten gradient fill for text */
.molten{
  background-image:var(--molten);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* the brand's signature: type torn across the middle, bottom half nudged right.
   `white-space:pre` is load-bearing — the real (transparent) text must stay on
   ONE line or the box grows and the tear/seam land between lines instead of
   through the letterforms. Break long headlines into one .desync per line. */
.desync{
  position:relative;display:inline-block;color:transparent;
  white-space:pre;max-width:100%;
  --shift:.055em;
}
.desync::before,
.desync::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;white-space:pre;
  background-image:var(--molten);background-size:100% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.desync::before{clip-path:polygon(0 0,100% 0,100% 50%,0 50%)}
.desync::after{clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);transform:translateX(var(--shift))}
.desync .seam{
  position:absolute;left:-2%;right:-2%;top:50%;height:.035em;min-height:1.5px;z-index:3;
  transform:translateY(-50%);opacity:.72;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,154,176,0),var(--rose) 20%,var(--seam-core) 50%,var(--rose) 80%,rgba(255,154,176,0));
}
/* white variant for headlines that shouldn't fight the art */
.desync.ghost::before,.desync.ghost::after{background-image:linear-gradient(90deg,#fff,#fff)}

/* periodic packet tear on the hero mark */
.desync.tear{animation:tear 7s var(--ease) infinite}
@keyframes tear{
  0%,86%{--shift:.055em;filter:none}
  88%{--shift:.16em;filter:drop-shadow(-3px 0 rgba(255,42,109,.9)) drop-shadow(3px 0 rgba(30,220,255,.55))}
  90%{--shift:-.04em}
  92%{--shift:.21em;filter:drop-shadow(4px 0 rgba(194,42,208,.8))}
  94%,100%{--shift:.055em;filter:none}
}

/* every chapter heading carries the same packet tear as the hero, offset so they
   never glitch in unison */
#about   h2 .desync.tear{animation-delay:-1.1s}
#videos  h2 .desync.tear{animation-delay:-3.4s}
#clips   h2 .desync.tear{animation-delay:-5.2s}
#connect h2 .desync.tear{animation-delay:-2.3s}

/* HUD panel — corner brackets drawn from 8 gradient slivers */
.hud{
  --bk:16px;--bw:1.5px;--bc:var(--m3);
  position:relative;
  background-color:var(--panel);
  background-image:
    linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0),
    linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0),
    linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0),
    linear-gradient(var(--bc) 0 0),linear-gradient(var(--bc) 0 0);
  background-repeat:no-repeat;
  background-size:
    var(--bk) var(--bw),var(--bw) var(--bk),
    var(--bk) var(--bw),var(--bw) var(--bk),
    var(--bk) var(--bw),var(--bw) var(--bk),
    var(--bk) var(--bw),var(--bw) var(--bk);
  background-position:
    0 0,0 0, 100% 0,100% 0,
    0 100%,0 100%, 100% 100%,100% 100%;
  border:1px solid rgba(255,154,176,.09);
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .4s var(--ease);
}
.hud:hover{border-color:var(--hair);background-color:var(--panel-2)}

/* HUD label — the `// KICKER` pattern used across the stream screens */
.kicker{
  font-family:'Chakra Petch',sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--rose);display:flex;align-items:center;gap:.7em;
}
.kicker::before{content:'//';color:var(--m3);letter-spacing:.06em}
.kicker .idx{margin-left:auto;color:var(--ink-3);letter-spacing:.2em;font-weight:500}

.lede{color:var(--ink-2);max-width:62ch;font-size:clamp(1rem,1.3vw,1.14rem)}
.note{font-size:.78rem;color:var(--ink-3)}

/* section head */
.head{display:flex;flex-direction:column;gap:20px;margin-bottom:clamp(36px,5vw,64px)}
.head h2{font-size:var(--h2);letter-spacing:.06em}
.head .row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:.95em 1.6em;font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--hair);color:var(--ink);overflow:hidden;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--molten);
  transform:translateX(-101%);transition:transform .42s var(--ease);
}
.btn:hover{color:#0b0006;border-color:transparent}
.btn:hover::before{transform:translateX(0)}
.btn:active{transform:translateY(1px)}
.btn.solid{border-color:transparent;color:#0b0006}
.btn.solid::before{transform:translateX(0)}
.btn.solid:hover::before{transform:translateX(0) scaleX(1.02);filter:brightness(1.12)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* live / offline pill */
.status{
  display:inline-flex;align-items:center;gap:.65em;padding:.5em 1em;
  border:1px solid var(--hair);font-family:'Chakra Petch',sans-serif;
  font-size:.7rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.status[data-live="true"]{border-color:var(--hair-hot);color:var(--rose)}
.status[data-live="true"] .dot{background:var(--m3);animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,42,109,.6)}
  70%{box-shadow:0 0 0 9px rgba(255,42,109,0)}
}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- 6. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;gap:24px;
  padding:14px var(--gut);
  transition:background .35s var(--ease),border-color .35s var(--ease),backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.stuck{background:rgba(0,0,0,.78);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:rgba(255,154,176,.12)}
/* brand + burger stay above the mobile drawer, which paints after them */
.nav .brand{display:flex;align-items:center;gap:11px;flex:none;position:relative;z-index:2}
.nav .brand img{width:22px;height:auto}
.nav .brand .wm{
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:.95rem;letter-spacing:.3em;
}
.nav ul{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav ul a{
  display:block;padding:.6em .85em;font-family:'Chakra Petch',sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  transition:color .25s var(--ease);position:relative;
}
.nav ul a::after{
  content:'';position:absolute;left:.85em;right:.85em;bottom:.35em;height:1px;
  background:var(--molten);transform:scaleX(0);transform-origin:0;transition:transform .3s var(--ease);
}
.nav ul a:hover,.nav ul a[aria-current="true"]{color:var(--ink)}
.nav ul a:hover::after,.nav ul a[aria-current="true"]::after{transform:scaleX(1)}
.nav .cta{flex:none;padding:.72em 1.25em;font-size:.72rem}
.burger{display:none;margin-left:auto;padding:10px;flex:none;position:relative;z-index:2}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;transition:transform .3s var(--ease),opacity .2s}
.nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 7. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:clamp(84px,10vh,112px) clamp(44px,5.5vh,64px);overflow:hidden}
.hero::before{ /* molten horizon bloom */
  content:'';position:absolute;left:50%;top:-10%;width:130vw;height:70vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(255,42,109,.16),rgba(194,42,208,.07) 42%,transparent 68%);
  pointer-events:none;
}
.hero::after{ /* faint HUD grid floor */
  content:'';position:absolute;inset:auto 0 0;height:46vh;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(255,154,176,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,154,176,.055) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:linear-gradient(transparent,#000 75%);
  -webkit-mask-image:linear-gradient(transparent,#000 75%);
}
.hero .wrap{position:relative;z-index:2}
.hero .meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:clamp(22px,3vw,34px)}

/* one treatment for the whole headline — two sets of line breaks so the type can
   stay large on a phone without any line having to shrink to fit */
/* headline and mark share a row, so the mark's top aligns with the headline's */
.h1-row{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(16px,3vw,48px)}
.hero h1{display:flex;flex-direction:column;align-items:flex-start;line-height:.9}
.h1-wide,.h1-narrow{display:flex;flex-direction:column;gap:.07em}
.h1-narrow{display:none}
.hero h1 .ln{display:block;max-width:100%;font-size:var(--h1);letter-spacing:.01em}

.hero-foot{margin-top:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.hero .sub{max-width:60ch;color:var(--ink-2);font-size:clamp(.95rem,1.2vw,1.08rem)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
/* The mark is dagger-mark.png, already cropped to the silhouette with 3% slack,
   so there is no CSS cropping here and nothing can clip. It used to be a frame
   from the 1200x1200 animation holding dagger + wordmark, which needed offsets
   to isolate the dagger from the wordmark beneath it. Those offsets stayed
   behind when the asset changed and sliced the wrong region at every width.

   Height drives it; aspect-ratio supplies the width from the file's own
   proportions, so the box always matches the artwork exactly. */
.hero-mark{
  --dagger-h:calc(var(--h1) * 1.68);   /* a little under the two headline rows */
  position:relative;flex:none;
  height:var(--dagger-h);
  aspect-ratio:420 / 900;              /* dagger-mark.png's real proportions */
  align-self:flex-start;
  margin-top:calc(var(--h1) * 0.12);
  translate:clamp(8px,2.2vw,40px) 0;
  filter:drop-shadow(0 0 46px rgba(255,42,109,.45));
}
.hero-mark img{
  width:100%;height:100%;
  object-fit:contain;
}

/* The dagger used to be an alpha WebM whose animation was an RGB-split glitch
   firing twice per 2s loop — static the other ~90% of the time. Safari paints
   that file's transparency black and the fault can't be feature-detected, so
   the mark is a plain PNG now and the glitch is rebuilt here.

   Two copies of the mark, masked out of a flat cyan and a flat magenta, sit on
   top blending with screen. They are invisible until the burst, then shove
   apart for ~290ms. Only transform and opacity animate, so it stays on the
   compositor; the mask is the same file the img already loaded, so the whole
   effect costs no extra bytes.

   Timeline matches the original frame durations:
     0-27.2%  still · 27.2-41.6%  burst · 41.6-68.8%  still · 68.8-83.2%  burst */
.hero-mark::before,
.hero-mark::after{
  content:'';
  position:absolute;inset:0;
  -webkit-mask:url(../assets/logo/dagger-mark.png) center/contain no-repeat;
          mask:url(../assets/logo/dagger-mark.png) center/contain no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.hero-mark::before{background:#19e5ff;animation:markGhostA 2s steps(1,end) infinite}
.hero-mark::after {background:#ff2ae0;animation:markGhostB 2s steps(1,end) infinite}
.hero-mark img{animation:markSlice 2s steps(1,end) infinite}

/* cyan drifts left, magenta right — opposite signs are what reads as an RGB split */
@keyframes markGhostA{
  0%,27.2%   {opacity:0;   transform:none}
  28%        {opacity:.75; transform:translate3d(-2.6%,0,0)}
  30.5%      {opacity:.5;  transform:translate3d(1.8%,-.4%,0)}
  33%        {opacity:.85; transform:translate3d(-3.4%,.3%,0)}
  36%        {opacity:.45; transform:translate3d(1.2%,0,0)}
  39%        {opacity:.7;  transform:translate3d(-2%,0,0)}
  41.6%      {opacity:0;   transform:none}
  68.8%      {opacity:0;   transform:none}
  70%        {opacity:.8;  transform:translate3d(-3%,0,0)}
  73%        {opacity:.45; transform:translate3d(2.2%,.4%,0)}
  76%        {opacity:.7;  transform:translate3d(-1.6%,0,0)}
  80%        {opacity:.55; transform:translate3d(2.6%,-.3%,0)}
  83.2%,100% {opacity:0;   transform:none}
}
@keyframes markGhostB{
  0%,27.2%   {opacity:0;   transform:none}
  28%        {opacity:.75; transform:translate3d(2.6%,0,0)}
  30.5%      {opacity:.5;  transform:translate3d(-1.8%,.4%,0)}
  33%        {opacity:.85; transform:translate3d(3.4%,-.3%,0)}
  36%        {opacity:.45; transform:translate3d(-1.2%,0,0)}
  39%        {opacity:.7;  transform:translate3d(2%,0,0)}
  41.6%      {opacity:0;   transform:none}
  68.8%      {opacity:0;   transform:none}
  70%        {opacity:.8;  transform:translate3d(3%,0,0)}
  73%        {opacity:.45; transform:translate3d(-2.2%,-.4%,0)}
  76%        {opacity:.7;  transform:translate3d(1.6%,0,0)}
  80%        {opacity:.55; transform:translate3d(-2.6%,.3%,0)}
  83.2%,100% {opacity:0;   transform:none}
}
/* the mark itself jitters a hair so the split reads as the whole thing tearing,
   not two ghosts sliding off a stationary logo */
@keyframes markSlice{
  0%,27.2%   {transform:none}
  28%        {transform:translate3d(.8%,0,0)}
  33%        {transform:translate3d(-.6%,0,0)}
  39%        {transform:translate3d(.4%,0,0)}
  41.6%      {transform:none}
  68.8%      {transform:none}
  70%        {transform:translate3d(-.7%,0,0)}
  76%        {transform:translate3d(.5%,0,0)}
  83.2%,100% {transform:none}
}

@media (prefers-reduced-motion: reduce){
  .hero-mark::before,.hero-mark::after{animation:none;opacity:0}
  .hero-mark img{animation:none}
}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:'Chakra Petch',sans-serif;font-size:.62rem;letter-spacing:.34em;color:var(--ink-3);
}
.scroll-hint i{display:block;width:1px;height:46px;background:linear-gradient(var(--m3),transparent);animation:drip 2.1s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* telemetry ticker */
.ticker{position:relative;border-block:1px solid rgba(255,154,176,.11);overflow:hidden;padding-block:13px;background:rgba(255,255,255,.012)}
.ticker-track{display:flex;width:max-content;animation:slide 44s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker span{
  display:inline-flex;align-items:center;gap:.7em;padding-inline:26px;white-space:nowrap;
  font-family:'Chakra Petch',sans-serif;font-weight:500;font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-3);
}
.ticker span b{color:var(--rose);font-weight:600}
.ticker span::after{content:'';width:4px;height:4px;background:var(--m3);opacity:.7;transform:rotate(45deg)}

/* ---------- 8. ABOUT ---------- */
.about-copy{max-width:70ch}
.about-copy p + p{margin-top:18px}
.about-copy strong{color:var(--ink);font-weight:600}
.about-copy em{font-style:normal;color:var(--rose)}

/* --- the Signal panel: brand screen when dark, real player when tuned in --- */
.signal{padding:clamp(14px,1.6vw,18px);display:flex;flex-direction:column;gap:12px}
.sig-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sig-tabs{display:inline-flex;margin-left:auto;border:1px solid var(--hair)}
.sig-tabs button{
  padding:.45em .7em;font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:.58rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.sig-tabs button + button{border-left:1px solid var(--hair)}
.sig-tabs button:hover{color:var(--ink)}
.sig-tabs button[aria-pressed="true"]{color:#0b0006;background:var(--molten)}

.stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;transition:max-width .4s var(--ease)}
.stage .plate{width:100%;height:100%;object-fit:cover}
/* TikTok Live is portrait — the stage flips to 9:16 and centres */
.signal[data-pf="tiktok"] .stage{aspect-ratio:9/16;max-width:min(290px,72%);margin-inline:auto}
/* clear of the plate's own footer bar, and narrow enough not to wrap */
.signal[data-pf="tiktok"] .stage .tune{bottom:12%;font-size:.6rem;padding:.62em 1em;letter-spacing:.14em}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* click-to-load: no third-party player until the visitor asks for one */
.stage .tune{
  position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:3;
  display:inline-flex;align-items:center;gap:.6em;padding:.7em 1.15em;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  background:rgba(0,0,0,.66);border:1px solid var(--hair);backdrop-filter:blur(4px);
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.stage .tune:hover{color:#0b0006;background:var(--molten);border-color:transparent}
.stage .tune .ico{display:grid;place-items:center}
.stage .unload{
  position:absolute;right:10px;top:10px;z-index:4;width:28px;height:28px;
  display:grid;place-items:center;font-size:.8rem;line-height:1;color:var(--ink);
  background:rgba(0,0,0,.72);border:1px solid var(--hair);
  transition:color .25s,background .25s,border-color .25s;
}
.stage .unload:hover{color:#0b0006;background:var(--molten);border-color:transparent}

.sig-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:'Chakra Petch',sans-serif;font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
.sig-status{display:inline-flex;align-items:center;gap:.6em;color:var(--ink-3)}
.sig-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none}
.sig-now{color:var(--ink-3);text-align:right;letter-spacing:.14em}

.signal[data-state="soon"] .sig-status{color:var(--m1)}
.signal[data-state="soon"] .sig-status .dot{background:var(--m1)}
.signal[data-state="live"]{--bc:var(--m1);border-color:var(--hair-hot)}
.signal[data-state="live"] .sig-status{color:var(--rose)}
.signal[data-state="live"] .sig-status .dot{background:var(--m3);animation:pulse 1.7s ease-in-out infinite}
.signal[data-state="live"] .sig-now{color:var(--ink)}

/* ---------- 9. VIDEOS + CLIPS (shared card) ---------- */
.video-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:start}
.vid,.clip{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#000}
.vid .shot,.clip .shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;flex:none}
.vid .shot img,.clip .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.vid:hover .shot img,.clip:hover .shot img{transform:scale(1.045);filter:saturate(1.15)}
.clip .plate{position:absolute;inset:0;background:var(--pl,linear-gradient(135deg,#1a0210,#2a0616 55%,#0a0106));transition:transform .7s var(--ease)}
.clip:hover .plate{transform:scale(1.06)}
.clip .ov{position:absolute;inset:0;background:url('../assets/scenes/ingame-overlay.png') center/cover no-repeat;opacity:.62;pointer-events:none}
.clip .mk{
  position:absolute;right:8%;bottom:10%;width:20%;max-width:44px;
  opacity:.22;pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.clip:hover .mk{opacity:.4;transform:scale(1.1)}

.vid .play,.clip .play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  width:64px;height:64px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.5);
  border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);
  opacity:.9;transition:transform .4s var(--ease),border-color .3s,background .3s,opacity .3s;
}
.vid:hover .play,.clip:hover .play{transform:scale(1.1);border-color:var(--m3);background:rgba(255,42,109,.26);opacity:1}
.vid .play svg,.clip .play svg{margin-left:3px}
.clip .play{width:48px;height:48px}
.clip .play svg{width:14px;height:16px}

/* title + follow sit BELOW the thumbnail — the brand thumbnails already carry
   their own headline, so overlaying a second one would collide */
.vid .info,.clip .info{
  padding:16px 18px 18px;border-top:1px solid rgba(255,154,176,.08);
  display:flex;flex-direction:column;gap:12px;flex:1;
}
.vid .info h3{font-size:clamp(1rem,1.7vw,1.4rem);letter-spacing:.03em;line-height:1.12}
.clip .info h3{font-size:.92rem;letter-spacing:.04em;line-height:1.18}
.vid .info h3 a,.clip .info h3 a{transition:color .25s var(--ease)}
.vid:hover .info h3 a,.clip:hover .info h3 a{color:var(--rose)}
.vid .card-foot,.clip .card-foot{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.vid .when{font-family:'Chakra Petch',sans-serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* the per-item follow / subscribe button */
.follow{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  padding:.5em .85em;overflow:hidden;z-index:2;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rose);
  border:1px solid var(--hair);transition:color .3s var(--ease),border-color .3s var(--ease);
}
.follow::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--molten);
  transform:translateX(-101%);transition:transform .4s var(--ease);
}
.follow:hover{color:#0b0006;border-color:transparent}
.follow:hover::before{transform:translateX(0)}
.follow .arw{transition:transform .3s var(--ease)}
.follow:hover .arw{transform:translate(2px,-2px)}

.vid .tag{
  position:absolute;left:14px;top:14px;z-index:4;padding:.34em .8em;
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:#0b0006;background:var(--molten);
}
.dur{
  position:absolute;right:12px;top:12px;z-index:4;padding:.22em .55em;
  font-family:'Chakra Petch',sans-serif;font-size:.66rem;letter-spacing:.1em;
  background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.14);
}
.video-side{display:grid;gap:16px;align-content:start}
.video-side .vid .info{padding:14px 16px 16px}
.video-side .vid .info h3{font-size:1rem}

/* ---------- 10. CLIP RAIL ---------- */
.clip-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,1fr);gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--m3) rgba(255,255,255,.06)}
.clip-rail::-webkit-scrollbar{height:4px}
.clip-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.clip-rail::-webkit-scrollbar-thumb{background:var(--molten)}
.clip{scroll-snap-align:start}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hair);color:var(--ink-2);transition:color .25s,border-color .25s,background .25s}
.rail-nav button:hover{color:#0b0006;background:var(--molten);border-color:transparent}

/* ---------- 11. SOCIALS ---------- */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Signal panel + all 12 links side by side under the headline, so a visitor lands
   on the live status AND every channel without scrolling */
.hero-deck{
  display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);
  gap:clamp(14px,1.8vw,22px);align-items:start;
  margin-top:clamp(18px,2.4vw,30px);
}
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.hero-deck .social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.soc{position:relative;padding:13px 14px 12px;display:flex;flex-direction:column;gap:3px;overflow:hidden;transition:transform .4s var(--ease)}
.soc > *{position:relative;z-index:2}
.soc::before{content:'';position:absolute;inset:auto 0 0;height:2px;z-index:2;background:var(--molten);transform:scaleX(0);transform-origin:0;transition:transform .45s var(--ease)}
.soc:hover{transform:translateY(-5px)}
.soc:hover::before{transform:scaleX(1)}

/* the platform's mark, molten-filled, sunk into the tile background */
.soc-mark{
  position:absolute;right:-6%;bottom:-30%;width:44%;height:auto;z-index:0;
  opacity:.12;pointer-events:none;
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.soc:hover .soc-mark{opacity:.26;transform:scale(1.08) rotate(-5deg)}

.soc .n{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.14em}
.soc .h{font-size:.7rem;color:var(--ink-3);overflow-wrap:anywhere}
.soc .c{margin-top:10px;font-family:'Chakra Petch',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--rose)}
.soc .arw{position:absolute;right:11px;top:11px;font-size:.78rem;color:var(--ink-3);transition:transform .3s var(--ease),color .3s}

/* Discord isn't another feed to watch — it's the room. It takes the full last
   row so the 12-tile wall stays rectangular instead of ending on an orphan. */
.soc-wide{
  grid-column:1/-1;
  flex-direction:row;align-items:center;gap:10px;
  padding:11px 14px;
}
.soc-wide .h{margin-right:auto}
.soc-wide .cta-note{
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rose);
  padding-right:18px;transition:color .3s var(--ease);
}
.soc-wide:hover .cta-note{color:var(--m1)}
.soc-wide .soc-mark{right:-1%;bottom:-70%;width:13%;max-width:130px;opacity:.14}
.soc-wide:hover .soc-mark{opacity:.28}
.soc:hover .arw{transform:translate(3px,-3px);color:var(--m3)}

/* ---------- 12. JOIN / CONTACT ---------- */
/* flexes so it reads well with one card or several */
.join-grid{display:flex;flex-wrap:wrap;gap:16px}
.join{position:relative;flex:1 1 320px;max-width:640px;padding:clamp(24px,3.4vw,44px);overflow:hidden;display:flex;flex-direction:column;gap:18px;justify-content:center}
.join::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 12%,rgba(255,42,109,.16),transparent 58%)}
.join h3{font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:.05em}
.join p{color:var(--ink-2);max-width:44ch;position:relative;z-index:2}
.join .actions{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:2}
.join .big{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:.02em}

/* ---------- 13. FOOTER ---------- */
.foot{border-top:1px solid rgba(255,154,176,.12);padding-block:clamp(48px,6vw,78px) 32px;position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.foot-brand img{width:96px;margin-bottom:20px}
.foot-brand p{color:var(--ink-3);font-size:.88rem;max-width:34ch}
.foot h4{font-family:'Chakra Petch',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.foot li{margin-bottom:9px}
.foot li a{font-size:.88rem;color:var(--ink-2);transition:color .25s}
.foot li a:hover{color:var(--m3)}
.swatches{display:flex;gap:6px;margin-top:16px}
.swatches i{width:22px;height:22px;display:block;border:1px solid rgba(255,255,255,.1)}
.foot-bot{
  margin-top:clamp(36px,5vw,60px);padding-top:22px;border-top:1px solid rgba(255,154,176,.08);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:.75rem;color:var(--ink-3);
}
.foot-bot .sig{font-family:'Chakra Petch',sans-serif;letter-spacing:.2em;text-transform:uppercase;font-size:.66rem}

/* ---------- 14. RESPONSIVE ---------- */
/* laptops are short before they are narrow — 1366x768 is the tight one. Shrink the
   display type rather than push the hero's contents below the fold. */
@media (min-width:901px) and (max-height:900px){
  :root{--h1:clamp(2.2rem,5.2vw,4.4rem)}
  .hero{padding-block:76px 40px}
  .hero-deck{margin-top:20px}
  .hero-foot{margin-top:16px;gap:12px}
  .hero .sub{font-size:.95rem}
}
@media (min-width:901px) and (max-height:800px){
  :root{--h1:clamp(2rem,4.4vw,3.6rem)}
  .hero{padding-block:70px 32px}
  .scroll-hint{display:none}
}
@media (max-width:1080px){
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav ul{
    position:fixed;inset:0 0 auto;top:0;padding:86px var(--gut) 34px;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(0,0,0,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--hair);
    transform:translateY(-102%);transition:transform .45s var(--ease);
  }
  .nav.open ul{transform:translateY(0)}
  .nav ul a{padding:.9em .2em;font-size:.95rem;letter-spacing:.24em}
  .nav ul a::after{left:.2em;right:.2em;bottom:.5em}
  .burger{display:block;order:3}
  .nav .cta{display:none}
  .h1-wide{display:none}
  .h1-narrow{display:flex}
  .hero h1 .ln{font-size:var(--h1-m)}
  .h1-row{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-deck{grid-template-columns:minmax(0,1fr);gap:16px}
  .soc-wide{flex-direction:column;align-items:flex-start;gap:3px}
  .soc-wide .h{margin-right:0}
  .soc-wide .cta-note{padding-right:0;margin-top:6px}
  .hero-deck .social-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .hero-mark{--dagger-h:clamp(88px,22vw,150px);align-self:center;margin:0 auto}
  .video-grid{grid-template-columns:minmax(0,1fr)}
  .video-side{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
}
@media (max-width:640px){
  .video-side{grid-template-columns:minmax(0,1fr)}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .hero h1{letter-spacing:0}
  .head .row{gap:16px}
}

/* --- small phones, flip-phone cover screens --- */
@media (max-width:420px){
  .sig-head{gap:10px}
  .sig-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-left:0}
  .sig-tabs button + button{border-left:0}
  .sig-tabs button:nth-child(2n){border-left:1px solid var(--hair)}
  .sig-tabs button:nth-child(n+3){border-top:1px solid var(--hair)}
  .clip-rail{grid-auto-columns:minmax(228px,1fr)}
  /* the stage is too narrow to hold this label on one line */
  .stage .tune{white-space:normal;text-align:center;line-height:1.35;max-width:88%;
               font-size:.56rem;letter-spacing:.1em;padding:.55em .75em}
  .btn{padding:.85em 1.15em;letter-spacing:.16em}
}

/* --- watch faces and anything else this narrow --- */
@media (max-width:340px){
  .nav{padding:10px var(--gut);gap:10px}
  .nav .brand{gap:7px}
  .nav .brand img{width:18px}
  .nav .brand .wm{font-size:.78rem;letter-spacing:.18em}
  .burger{padding:8px}
  .burger span{width:19px}
  .nav ul{padding:72px var(--gut) 26px}
  .nav ul a{font-size:.85rem;letter-spacing:.14em}
  .sig-tabs{grid-template-columns:1fr}
  .sig-tabs button:nth-child(2n){border-left:0}
  .sig-tabs button:nth-child(n+2){border-top:1px solid var(--hair)}
  .clip-rail{grid-auto-columns:minmax(180px,1fr)}
  .follow{font-size:.58rem;letter-spacing:.1em;padding:.5em .6em}
  .social-grid{grid-template-columns:minmax(0,1fr)}
  .signal{padding:14px}
  .join{padding:18px}
}

/* ---------- 15. MOTION PREFERENCE ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .fx-noise,.fx-seams{display:none}
  .desync-on main,.desync-on .foot{filter:none}
}

/* ---------- 16. PRINT ---------- */
@media print{
  .nav,.fx-grain,.fx-noise,.fx-pointer,.fx-progress,.ticker,.scroll-hint{display:none!important}
  body{background:#fff;color:#000}
}