/* ═══════════════════════════════════════════════════════════════════
   jonsimo.com — the root console.
   Shared DNA with vectordrift.io / alpha.vectordrift.io / codexjr.com:
   black ground, phosphor glow, pixel type, CRT chrome.
   Each channel keeps its OWN brand colour (--c / --c2) so the page
   reads as a colour-coded switchboard rather than one flat list.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"PressStart2P";
  /* Codex Jr's own display face, subset to printable ASCII (1.9 KB).
     font-display:block — a pixel wordmark swapping in from a fallback
     is a visible reflow; blocking on 2 KB costs nothing. */
  src:url("assets/pressstart2p-subset.woff2") format("woff2");
  font-display:block;
}
@font-face{
  font-family:"Glass TTY VT220";
  src:url("assets/glasstty.woff2") format("woff2");
  font-display:block;
}

:root{
  --band:clamp(58px,15vh,150px);
  --lock-gap:clamp(18px,2.4vw,34px);
  --lock-w:560px;
  --icon-w:clamp(88px,13vw,150px);
  --bg:#05070a;
  --bg-lift:#080b10;
  --ink:#cfe9e2;
  --ink-dim:rgba(207,233,226,.44);
  --ink-faint:rgba(207,233,226,.18);
  --line:rgba(207,233,226,.10);
  --pixel:"PressStart2P",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --tty:"Glass TTY VT220","Courier New",Courier,monospace;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Monaco,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

/* Brand lanes. Three separable hues: bright mint / deep teal+coral / electric blue+gold. */
[data-brand="vd"]{--c:#4ef1cc; --c-rgb:78,241,204;  --c2:#7ef7e0;  --mark-h:calc(var(--band)*1.31); --type-h:calc(var(--band)*1.29);}
[data-brand="at"]{--c:#11cab8; --c-rgb:17,202,184;  --c2:#f7a08a;  --mark-h:calc(var(--band)*.96);  --type-h:calc(var(--band)*.82); --tile-bg:#010203;}
[data-brand="cj"]{--c:#1986ff; --c-rgb:25,134,255;  --c2:#f7d507;  --mark-h:calc(var(--band)*1.15); --type-h:calc(var(--band)*.83);}

*{box-sizing:border-box;}
html{height:100%;}

body{
  margin:0; min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── CRT chrome ──────────────────────────────────────────────────── */
.crt-grid,.crt-scan,.crt-vig,.crt-flick{position:fixed;inset:0;pointer-events:none;z-index:60;}
.crt-grid{
  background:
    linear-gradient(90deg,rgba(var(--amb,120,220,200),.05) 0,rgba(120,220,200,.012) 1px,transparent 1px),
    linear-gradient(rgba(120,220,200,.04) 0,rgba(120,220,200,.012) 1px,transparent 1px);
  background-size:84px 84px,84px 84px;
  opacity:.14; z-index:0;
}
.crt-scan{
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.30) 0 1px,transparent 1px 3px);
  opacity:.22; mix-blend-mode:multiply;
}
.crt-vig{
  background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(0,0,0,.55) 100%);
}
/* The flicker was one more thing moving on a page that already had plenty. */
.crt-flick{display:none;}
@keyframes flick{
  0%,96%{opacity:0}
  96.6%{opacity:.5} 97%{opacity:0} 97.4%{opacity:.32} 97.8%,100%{opacity:0}
}

/* ── Stage ───────────────────────────────────────────────────────── */
.stage{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:clamp(9px,1.5vh,18px);
  padding:clamp(18px,3.4vh,44px) clamp(14px,4vw,48px) clamp(10px,1.6vh,20px);
  max-width:940px; margin:0 auto; width:100%;
}

/* ── Header ──────────────────────────────────────────────────────── */
.head{text-align:center;}
.wordmark{
  position:relative;
  line-height:1.05;
  margin:0; cursor:default; user-select:none;
  font-family:var(--tty);
  font-size:clamp(32px,6.2vw,60px);
  letter-spacing:.04em;
  color:var(--ink);
  text-shadow:0 0 12px rgba(120,220,200,.14);
  animation:bootIn .9s var(--ease) both;
}
/* Chromatic split — the same RGB-fringe trick the VD terminal uses. */
/* Scanline-glitch on hover — snaps to phosphor green (same as SEE MY WORK)
   with a brief sliced-band jitter, then settles. */
.wordmark{display:inline-block; isolation:isolate; transition:color .2s var(--ease),text-shadow .2s var(--ease);}
.wordmark:hover{
  color:#4ef1cc;
  text-shadow:0 0 6px rgba(78,241,204,.55),0 0 20px rgba(78,241,204,.25);
}
@keyframes bootIn{from{opacity:0;transform:translateY(-6px) scaleY(.6);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}

.tagline{
  margin:clamp(5px,.9vh,10px) 0 0;
  font-size:clamp(9.5px,1.3vw,11px);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-dim);
}
.prefix{
  font:inherit; color:#4ef1cc; opacity:.85;
  background:none; border:0; padding:0 .5em 0 0; margin:0;
  cursor:pointer; line-height:inherit;
  transition:opacity .25s var(--ease),text-shadow .25s var(--ease);
}
.prefix:hover,.prefix:focus-visible{opacity:1; text-shadow:0 0 8px rgba(78,241,204,.8);}
.prefix:focus-visible{outline:2px solid rgba(78,241,204,.8); outline-offset:2px; border-radius:2px;}

/* ── Channels ────────────────────────────────────────────────────── */
.channels{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-auto-rows:auto;
  gap:clamp(6px,1vh,14px);
  min-height:0;
}

.tile{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(10px,1.6vh,20px);
  padding:clamp(6px,1vh,14px) clamp(12px,2vw,22px);
  text-decoration:none; color:inherit;
  isolation:isolate; overflow:hidden;
  contain:layout paint;
  min-width:0;
  border:1px solid rgba(var(--c-rgb),.22);
  border-radius:5px;
  background:
    radial-gradient(120% 140% at 50% 120%,rgba(var(--c-rgb),.05),transparent 62%),
    var(--tile-bg, var(--bg-lift));
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease),min-height .38s var(--ease);
}
/* Everything that used to be permanent chrome is now the hover state, so the
   resting page is just three logos on black. */
.tile.open,.tile.open{
  border-color:rgba(var(--c-rgb),.55);
  background:
    radial-gradient(120% 150% at 50% 118%,rgba(var(--c-rgb),.16),transparent 66%),
    var(--tile-bg, var(--bg-lift));
  transform:translateY(-2px);
}
.tile:focus-visible{outline:2px solid rgba(var(--c-rgb),.9); outline-offset:3px;}
.tile:active{transform:translateY(0) scale(.995);}

/* Corner brackets snap outward on hover. */
.brackets i{
  position:absolute; width:13px; height:13px;
  border:1px solid rgba(var(--c-rgb),.75);
  opacity:0; transition:all .3s var(--ease);
}
.brackets i:nth-child(1){top:8px;  left:8px;  border-right:0;border-bottom:0;}
.brackets i:nth-child(2){top:8px;  right:8px; border-left:0; border-bottom:0;}
.brackets i:nth-child(3){bottom:8px;left:8px;  border-right:0;border-top:0;}
.brackets i:nth-child(4){bottom:8px;right:8px; border-left:0; border-top:0;}
.tile.open .brackets i,.tile.open .brackets i{opacity:1;}
.tile.open .brackets i:nth-child(1),.tile.open .brackets i:nth-child(1){top:5px;left:5px;}
.tile.open .brackets i:nth-child(2),.tile.open .brackets i:nth-child(2){top:5px;right:5px;}
.tile.open .brackets i:nth-child(3),.tile.open .brackets i:nth-child(3){bottom:5px;left:5px;}
.tile.open .brackets i:nth-child(4),.tile.open .brackets i:nth-child(4){bottom:5px;right:5px;}

/* ── Per-brand hover effects ──────────────────────────────────────
   Each channel gets the effect its own product would have: sparks off the
   wizard, a starfield warp for the shooter, a scanning readout for the
   tracker. All CSS, all paused until hover, all off under reduced-motion. */
.fx{position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:0;
    transition:opacity .3s var(--ease);}
.tile.open .fx,.tile.open .fx{opacity:1;}

/* Codex Jr — wizard sparks drifting up off the mark. */
[data-brand="cj"] .fx i{
  position:absolute; width:4px; height:4px; bottom:0; border-radius:1px;
  background:var(--c2); box-shadow:0 0 10px var(--c2),0 0 3px #fff;
  opacity:0; animation:spark 2.4s linear infinite paused;
}
[data-brand="cj"].open .fx i,[data-brand="cj"].open .fx i{animation-play-state:running;}
@keyframes spark{
  0%{opacity:0; bottom:-2%;  transform:scale(.5)}
  14%{opacity:1}
  72%{opacity:.85}
  100%{opacity:0; bottom:102%; transform:scale(.25)}
}
[data-brand="cj"] .fx i:nth-child(1){left:6%;  animation-duration:2.6s; animation-delay:0s}
[data-brand="cj"] .fx i:nth-child(2){left:13%; animation-duration:3.1s; animation-delay:.5s; background:#ff6fc8; box-shadow:0 0 6px #ff6fc8}
[data-brand="cj"] .fx i:nth-child(3){left:21%; animation-duration:2.2s; animation-delay:1.1s}
[data-brand="cj"] .fx i:nth-child(4){left:29%; animation-duration:2.9s; animation-delay:.3s; width:3px;height:3px}
[data-brand="cj"] .fx i:nth-child(5){left:37%; animation-duration:3.4s; animation-delay:1.6s; background:#4ef1cc; box-shadow:0 0 6px #4ef1cc}
[data-brand="cj"] .fx i:nth-child(6){left:45%; animation-duration:2.5s; animation-delay:.8s}
[data-brand="cj"] .fx i:nth-child(7){left:54%; animation-duration:3.0s; animation-delay:2.0s; background:#ff6fc8; box-shadow:0 0 6px #ff6fc8}
[data-brand="cj"] .fx i:nth-child(8){left:62%; animation-duration:2.3s; animation-delay:.2s; width:4px;height:4px}
[data-brand="cj"] .fx i:nth-child(9){left:70%; animation-duration:3.3s; animation-delay:1.3s}
[data-brand="cj"] .fx i:nth-child(10){left:78%;animation-duration:2.7s; animation-delay:.9s; background:#4ef1cc; box-shadow:0 0 6px #4ef1cc}
[data-brand="cj"] .fx i:nth-child(11){left:87%;animation-duration:3.2s; animation-delay:1.8s; width:3px;height:3px}
[data-brand="cj"] .fx i:nth-child(12){left:94%;animation-duration:2.4s; animation-delay:.6s}

/* Vector Drift — a live vector-shooter sim behind the wordmark on hover.
   Ambient, no scoring: descending enemy jets, a player ship strafing and
   firing up, a scrolling starfield. Canvas is progressive enhancement; the
   tile is fully usable without it, and it never runs under reduced-motion. */
.sim{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none; z-index:0;
  transition:opacity .5s var(--ease);
}
[data-brand="vd"].open .sim,[data-brand="vd"].open .sim,
[data-brand="vd"].playing .sim{opacity:1;}
/* Lockup + caption ride above the sim; a soft scrim keeps the wordmark legible
   over the moving field without hiding the action around it. */
[data-brand="vd"] .lock,[data-brand="vd"] .meta{position:relative; z-index:1;}
[data-brand="at"] .lock,[data-brand="at"] .meta{position:relative; z-index:1;}
[data-brand="vd"] .lock{isolation:isolate;}
[data-brand="vd"].open .lock::before,[data-brand="vd"].open .lock::before,
[data-brand="vd"].playing .lock::before{
  content:""; position:absolute; inset:-30% -10%; z-index:-1;
  background:radial-gradient(ellipse at center,rgba(5,7,10,.58),rgba(5,7,10,.28) 58%,transparent 80%);
  filter:blur(10px);
}

/* Vector Drift — starfield streaking past, the way the shooter scrolls. */
[data-brand="vd"] .fx i{
  position:absolute; right:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--c-rgb),.9) 55%,#eafff8);
  box-shadow:0 0 8px rgba(var(--c-rgb),.9), 0 0 18px rgba(var(--c-rgb),.45);
  opacity:0; animation:warp 1.5s linear infinite paused;
}
[data-brand="vd"].open .fx i,[data-brand="vd"].open .fx i{animation-play-state:running;}
@keyframes warp{
  0%{opacity:0;   right:-14%}
  8%{opacity:1}
  80%{opacity:.9}
  100%{opacity:0; right:108%}
}
[data-brand="vd"] .fx i:nth-child(1){top:9%;  width:71px; animation-duration:1.31s; animation-delay:0s}
[data-brand="vd"] .fx i:nth-child(2){top:16%; width:33px; animation-duration:2.01s; animation-delay:.7s}
[data-brand="vd"] .fx i:nth-child(3){top:23%; width:109px; animation-duration:1.05s; animation-delay:1.4s}
[data-brand="vd"] .fx i:nth-child(4){top:31%; width:46px; animation-duration:1.75s; animation-delay:.4s}
[data-brand="vd"] .fx i:nth-child(5){top:38%; width:84px; animation-duration:1.49s; animation-delay:1.9s}
[data-brand="vd"] .fx i:nth-child(6){top:45%; width:25px; animation-duration:2.27s; animation-delay:.2s}
[data-brand="vd"] .fx i:nth-child(7){top:52%; width:126px; animation-duration:0.96s; animation-delay:1.1s}
[data-brand="vd"] .fx i:nth-child(8){top:59%; width:54px; animation-duration:1.84s; animation-delay:.9s}
[data-brand="vd"] .fx i:nth-child(9){top:66%; width:92px; animation-duration:1.22s; animation-delay:1.6s}
[data-brand="vd"] .fx i:nth-child(10){top:73%;width:37px; animation-duration:2.1s; animation-delay:.5s}
[data-brand="vd"] .fx i:nth-child(11){top:80%;width:75px; animation-duration:1.4s; animation-delay:2.1s}
[data-brand="vd"] .fx i:nth-child(12){top:87%;width:58px; animation-duration:1.66s; animation-delay:.3s}
[data-brand="vd"] .fx i:nth-child(13){top:93%;width:105px; animation-duration:1.14s; animation-delay:1.3s}
[data-brand="vd"] .fx i:nth-child(14){top:4%; width:42px; animation-duration:1.92s; animation-delay:1.7s}

/* Alpha Tracker — a dim, fast dev-console streaming behind the mark, like a
   boot log. Sits under the gamepad + wordmark; only runs while the tile is open. */
[data-brand="at"] .fx{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
[data-brand="at"] .console{
  position:absolute; left:6%; right:6%; top:0;
  font:400 clamp(8px,1vw,11px)/1.55 var(--mono);
  color:rgba(var(--c-rgb),.30); white-space:pre; letter-spacing:.02em;
  text-shadow:0 0 6px rgba(var(--c-rgb),.25);
  will-change:transform;
}
[data-brand="at"] .console > span{display:block; white-space:pre;}
[data-brand="at"] .console .c{color:rgba(var(--c-rgb),.62);}   /* commands brighter */
[data-brand="at"] .console .k{color:rgba(126,247,224,.7);}     /* ok/checks */
/* stepped line-append is JS-driven (see main.js) */

/* ── Lockup ──────────────────────────────────────────────────────
   One centred group per channel: icon, wordmark, caption directly beneath.
   Every mark is cropped to its exact ink (no transparent padding in the
   asset), so centring the boxes actually centres what you see — with the
   padding still baked in, Alpha Tracker's wordmark carried 35px of dead
   space above and 2px below and sat visibly low. */
.lock{
  display:flex; align-items:center; justify-content:center;
  gap:var(--lock-gap);
  width:auto; max-width:100%; margin-inline:auto;
  height:auto;
  min-width:0;
}
/* A fixed icon column keeps every mark the same width, so their left edges —
   and therefore the whole icon stack — align down the page. */
.mark{flex:0 0 var(--icon-w); width:var(--icon-w); max-width:none; object-fit:contain; object-position:center; will-change:width;}
.mark,.type{
  display:block; height:auto;
  max-height:100%;
  min-height:0; min-width:0;
  object-fit:contain;
  transition:filter .35s var(--ease),transform .35s var(--ease);
}
.type{width:auto; max-width:100%;}
.mark{flex:0 0 auto;}
.type{flex:0 1 auto;}

/* Marks are sized against the band, tuned per aspect ratio so a 11:1 wordmark
   and a 0.74:1 sprite carry the same optical weight rather than the same px. */
[data-brand="cj"] .mark{height:var(--mark-h-shown,var(--mark-h)); image-rendering:pixelated;}
[data-brand="vd"] .mark{height:var(--mark-h-shown,var(--mark-h));}
[data-brand="at"] .mark{height:var(--mark-h-shown,var(--mark-h));}

[data-brand="vd"] .type{height:var(--type-h-shown,var(--type-h));}
[data-brand="cj"] .type{height:var(--type-h-shown,var(--type-h));}
[data-brand="at"] .type{height:var(--type-h-shown,var(--type-h));
  filter:brightness(1.05) drop-shadow(0 0 5px rgba(var(--c-rgb),.42)) drop-shadow(0 0 14px rgba(var(--c-rgb),.18));}

.mark,.type{
  filter:brightness(1.08) drop-shadow(0 0 9px rgba(var(--c-rgb),.16));
}
[data-brand="cj"] .type{
  filter:saturate(.9) brightness(.94) drop-shadow(0 0 10px rgba(255,111,200,.14));
}
.tile.open .mark,.tile.open .mark,
.tile.open .type,.tile.open .type{
  filter:brightness(1.2) drop-shadow(0 0 6px rgba(var(--c-rgb),.45))
         drop-shadow(0 0 24px rgba(var(--c-rgb),.24));
}
[data-brand="cj"].open .type,[data-brand="cj"].open .type{
  filter:saturate(1) brightness(1.1) drop-shadow(0 0 18px rgba(255,111,200,.5));
}
[data-brand="cj"].open .mark,[data-brand="cj"].open .mark{
  filter:drop-shadow(0 0 5px rgba(247,213,7,.45));
}

/* Wordmarks strike like a neon tube: a stepped flicker, then settle. A smooth
   ease-in reads as a dimmer, not as ignition. */
.tile.open .type,.tile.open .type{animation:ignite .42s steps(1,end);}
@keyframes ignite{
  0%{opacity:.55} 12%{opacity:1} 22%{opacity:.4} 34%{opacity:1}
  46%{opacity:.7} 58%{opacity:1} 100%{opacity:1}
}

/* The wordmarks ARE the names — keep the text for screen readers only. */
.name{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Caption sits in the flow directly under the lockup, so the channel reads as
   one block instead of a logo with a label pinned to the floor. */
.meta{
  display:flex; align-items:baseline; justify-content:center;
  gap:clamp(8px,1.4vw,15px); flex-wrap:wrap;
  font-size:clamp(9px,1.1vw,10.5px);
  letter-spacing:.2em; text-transform:uppercase;
  opacity:.55; transition:opacity .3s var(--ease);
}
.tile.open .meta,.tile.open .meta{opacity:1;}
.desc{color:var(--ink-dim); transition:color .3s var(--ease);}
.tile.open .desc,.tile.open .desc{color:var(--ink);}
.url{color:var(--ink-faint); transition:color .3s var(--ease); white-space:nowrap;}
.tile.open .url,.tile.open .url{color:rgba(var(--c-rgb),.95);}
.arrow{
  display:inline-block; font-style:normal; font-size:.8em;
  transform:translateX(-3px); opacity:0;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.tile.open .arrow,.tile.open .arrow{transform:translateX(2px); opacity:1;}


/* Alpha Tracker box: near-black, barely lifted, with faint CRT scanlines. */
[data-brand="at"].tile{
  background:
    repeating-linear-gradient(180deg, rgba(var(--c-rgb),.035) 0 1px, transparent 1px 4px),
    radial-gradient(120% 140% at 50% 120%,rgba(var(--c-rgb),.035),transparent 62%),
    #010203;
}
[data-brand="at"].tile.open{
  background:
    repeating-linear-gradient(180deg, rgba(var(--c-rgb),.05) 0 1px, transparent 1px 4px),
    radial-gradient(120% 150% at 50% 118%,rgba(var(--c-rgb),.06),transparent 66%),
    #020305;
}


/* Alpha Tracker scan — a sweep clipped to the neon shapes (mask-image of each
   webp), so it brightens only the icon + wordmark, never the box/console. */
[data-brand="at"] .neon{position:relative; display:inline-flex; align-items:center; line-height:0;}
[data-brand="at"]:not(.open) .n-m{display:none;}  /* icon out of flow when collapsed → wordmark stays centred */
/* Keep the icon margin at 0 so the glint mask (sized to the .n-m box) stays
   aligned with the icon; put the icon↔wordmark gap on the lockup instead. */
[data-brand="at"] .mark{margin-inline-end:0 !important;}
[data-brand="at"].open .lock{gap:var(--lock-gap);}
[data-brand="at"] .glint{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:2;
  mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 0%,
    rgba(200,255,246,.5) 46%, rgba(150,255,240,.85) 50%, rgba(200,255,246,.5) 54%,
    transparent 100%);
  background-repeat:no-repeat; background-size:100% 26%; background-position:0 -40%;
}
[data-brand="at"] .n-m .glint{-webkit-mask:url(assets/at-icon.webp) center/contain no-repeat; mask:url(assets/at-icon.webp) center/contain no-repeat;}
[data-brand="at"] .n-t .glint{-webkit-mask:url(assets/at-wordmark.webp) center/contain no-repeat; mask:url(assets/at-wordmark.webp) center/contain no-repeat;}
[data-brand="at"].open .glint{opacity:1; animation:atGlint 2.8s cubic-bezier(.45,0,.55,1) infinite;}
@keyframes atGlint{from{background-position:0 -45%}to{background-position:0 145%}}

/* ── Footer: the socials are a FOURTH ROW, not a footnote ─────────
   Same border, same ground, same bracket language as a channel. */
.foot{display:flex; flex-direction:column; gap:clamp(9px,1.4vh,14px);}

.socials{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(2px,.4vw,6px);
  height:auto;
}
[data-net="ig"]  {--c:#ff6fc8; --c-rgb:255,111,200;}
[data-net="yt"]  {--c:#ff4d4d; --c-rgb:255,77,77;}
[data-net="tt"]  {--c:#4ef1cc; --c-rgb:78,241,204;}
[data-net="li"]  {--c:#1986ff; --c-rgb:25,134,255;}
[data-net="mail"]{--c:#f7d507; --c-rgb:247,213,7;}

.slink{
  position:relative; overflow:hidden; min-width:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(3px,.5vh,5px);
  padding:clamp(3px,.8vh,8px) 0;
  text-decoration:none; color:var(--ink-dim);
  border:1px solid transparent; border-radius:3px;
  background:transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease),
             transform .3s var(--ease),background .3s var(--ease);
}
.slink:hover,.slink:focus-visible{
  color:var(--c);
  border-color:rgba(var(--c-rgb),.3);
  transform:translateY(-2px);
}
.slink:focus-visible{outline:2px solid rgba(var(--c-rgb),.9); outline-offset:3px;}
.slink:active{transform:translateY(0) scale(.99);}
/* Bloom lives on its own layer so it can fade without repainting the icon. */
.sglow{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(120% 150% at 50% 118%,rgba(var(--c-rgb),.13),transparent 66%);
  transition:opacity .3s var(--ease);
}
.slink:hover .sglow,.slink:focus-visible .sglow{opacity:1;}

.slink svg{
  width:clamp(49px,7.3vw,78px); height:auto; display:block;   /* 15% smaller */
  fill:none; stroke:currentColor; stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.slink svg .dot,.slink svg .fill{fill:currentColor; stroke:none;}
.slink:hover svg,.slink:focus-visible svg{
  transform:translateY(-3px);
  filter:drop-shadow(0 0 7px rgba(var(--c-rgb),.75));
  animation:socPower .5s steps(1,end);
}
@keyframes socPower{
  0%{opacity:.45} 14%{opacity:1} 28%{opacity:.4} 42%{opacity:1}
  58%{opacity:.72} 74%{opacity:1} 100%{opacity:1}
}

.slabel{
  font-size:clamp(8.5px,1.05vw,10.5px);
  letter-spacing:.17em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

.colophon{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  margin:0; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint);
}
.colophon .rule{width:34px; height:1px; background:var(--line);}

/* ── Idle screensaver ──────────────────────────────────────────── */
.saver{position:fixed; inset:0; z-index:90; background:#000; cursor:none;}
.saver[hidden]{display:none;}
/* Jon's own SIMO/DVD mark, painted through a CSS mask rather than dropped in
   as an <img>, so `background: currentColor` still colour-cycles on every bounce. */
.saver-mark{
  position:absolute; top:0; left:0;
  width:clamp(200px,22vw,340px);
  aspect-ratio:932 / 520;
  color:#4ef1cc;
  background:currentColor;
  -webkit-mask:url("assets/simo-mark.png") center / contain no-repeat;
          mask:url("assets/simo-mark.png") center / contain no-repeat;
  will-change:transform;
  filter:drop-shadow(0 0 10px currentColor);
  transition:color .25s linear;
}
/* The corner hit — the entire reason anyone watches this. */
.saver-mark.corner{animation:cornerHit 1.4s var(--ease);}
@keyframes cornerHit{
  0%{filter:drop-shadow(0 0 14px currentColor); transform-origin:center}
  6%{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 40px currentColor) brightness(2.6)}
  18%{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 70px currentColor) brightness(2)}
  100%{filter:drop-shadow(0 0 14px currentColor)}
}

/* ── Easter egg: VECTORSCOPE MODE (konami) ───────────────────────── */
/* Flatten each mark to black first, THEN tint — hue-rotating the full-colour
   art turned the wizard and the pink wordmark into muddy green blobs. Black
   collapses every hue to one value, so the result is a clean single-phosphor
   stencil instead of a mistake. */
@keyframes warp{0%,100%{transform:perspective(1400px) rotateX(0deg)}50%{transform:perspective(1400px) rotateX(1.1deg) scale(1.004)}}

/* ── Easter egg: CRT power-cycle ─────────────────────────────────── */
body.degauss .stage{animation:degauss .9s var(--ease);}
@keyframes degauss{
  0%{transform:scaleY(1) scaleX(1); filter:none}
  12%{transform:scaleY(.004) scaleX(1.4); filter:brightness(4)}
  22%{transform:scaleY(.004) scaleX(.02); filter:brightness(6)}
  30%{transform:scaleY(.004) scaleX(1.35); filter:brightness(3)}
  55%{transform:scaleY(1.06) scaleX(1); filter:brightness(1.5) blur(1px)}
  72%{transform:scaleY(.98) scaleX(1.01); filter:none}
  100%{transform:none; filter:none}
}


/* ── SEE MY WORK bar — the 4th bar; scrolls to the showcase ──────── */
html{scroll-behavior:smooth;}
.seework{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(6px,1.4vh,16px); padding:clamp(12px,1.8vh,20px) 0;
  text-decoration:none; color:var(--ink-dim);
  font-family:var(--tty); font-size:clamp(22px,3.4vw,32px); letter-spacing:.05em;
  border-top:1px solid var(--line);
  transition:color .3s var(--ease),letter-spacing .3s var(--ease);
}
.seework:hover,.seework:focus-visible{color:#4ef1cc; letter-spacing:.22em;}
.seework:focus-visible{outline:2px solid rgba(78,241,204,.7); outline-offset:4px; border-radius:3px;}
.seework-arrow{display:flex;}
.seework-arrow svg{
  width:1.5em; height:1.5em; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(78,241,204,.5));
  animation:nudge 1.8s var(--ease) infinite;
}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ── Showcase — the next screen ──────────────────────────────────── */
.showcase{
  position:relative; z-index:70;
  content-visibility:auto; contain-intrinsic-size:1px 2000px;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:clamp(18px,3vh,36px);
  max-width:1180px; margin:0 auto; width:100%;
  padding:clamp(40px,7vh,80px) clamp(18px,5vw,64px) clamp(32px,5vh,60px);
}
.showcase-head{
  margin:0; text-align:center;
  font-family:var(--tty); font-size:clamp(15px,2.6vw,26px); letter-spacing:.12em;
  color:var(--ink);
  text-shadow:0 0 14px rgba(120,220,200,.18);
}
.showcase-head span{color:#4ef1cc; opacity:.75; margin-right:.4em;}

.work-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,26px);
}
[data-accent="vd"]{--c:#4ef1cc; --c-rgb:78,241,204;}
[data-accent="cj"]{--c:#1986ff; --c-rgb:25,134,255;}
[data-accent="at"]{--c:#11cab8; --c-rgb:17,202,184;}

.work-card{margin:0; display:flex; flex-direction:column; gap:10px;}
.work-card .media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid rgba(var(--c-rgb),.28); border-radius:4px;
  background:
    radial-gradient(120% 140% at 50% 120%,rgba(var(--c-rgb),.08),transparent 64%),
    var(--bg-lift);
  transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.work-card:hover .media,.work-card:focus-within .media{
  border-color:rgba(var(--c-rgb),.6); transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 26px rgba(var(--c-rgb),.16);
}
/* whatever gets embedded fills the frame */
.work-card .media :is(iframe,video,img){
  position:absolute; inset:0; width:100%; height:100%; border:0;
  object-fit:cover; display:block;
}
/* Click-to-play facade: a dark poster + our own neon play button, so the grid
   shows no YouTube chrome until you click. The iframe loads (autoplay) on click. */
.facade{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  border:0; background:none; cursor:pointer; display:block; color:var(--c);
  -webkit-tap-highlight-color:transparent;
}
.poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(46px,6vw,66px); height:auto; color:#fff;
  transition:transform .3s var(--ease),color .3s var(--ease),filter .3s var(--ease);
  filter:drop-shadow(0 0 10px rgba(0,0,0,.6));
}
.play svg{width:100%; height:auto; display:block; fill:none;
  stroke:currentColor; stroke-width:1.3; stroke-linejoin:round;}
.play .tri{fill:currentColor; stroke:none;}
.facade:hover .play,.facade:focus-visible .play{
  transform:translate(-50%,-50%) scale(1.08);
  color:var(--c); filter:drop-shadow(0 0 12px rgba(var(--c-rgb),.7));
}
.facade:focus-visible{outline:2px solid rgba(var(--c-rgb),.9); outline-offset:-2px;}
/* the poster dims a touch so the play button reads */
.facade::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.12));
  transition:background .3s var(--ease);}
.facade:hover::after{background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.2),transparent);}

/* Instagram reel card — no clean dark embed exists, so this opens the reel.
   Dark card with the IG glyph behind the play button. */
.ig-media{display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 50% 30%,rgba(var(--c-rgb),.14),transparent 62%),
    var(--bg-lift);}
.ig-glyph{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44%; max-width:180px; color:rgba(var(--c-rgb),.35);}
.ig-glyph svg{width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1;}
.ig-glyph .dot{fill:currentColor; stroke:none;}
.ig-card .play{color:var(--c);}
.facade-link{text-decoration:none;}
/* small Instagram badge, top-right, marks the reel card */
.ig-badge{position:absolute; top:8px; right:8px; width:26px; height:26px; color:#fff;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.7)); opacity:.9;}
.ig-badge svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6;}
.ig-badge .dot{fill:currentColor; stroke:none;}

.media-ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; color:var(--c);
}
.media-ph svg{width:clamp(38px,5vw,54px); height:auto; fill:none; stroke:currentColor; stroke-width:1.3;
  filter:drop-shadow(0 0 8px rgba(var(--c-rgb),.4));}
.media-ph .tri{fill:currentColor; stroke:none;}
.media-ph em{font:400 clamp(9px,1.1vw,11px)/1 var(--mono); letter-spacing:.24em; color:var(--ink-faint); font-style:normal;}
.work-card figcaption{
  font-size:clamp(10px,1.2vw,12px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); text-align:center;
}

.backtop{
  align-self:center; display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--ink-faint);
  font:400 clamp(12px,1.6vw,16px)/1 var(--tty); letter-spacing:.08em; text-transform:uppercase;
  transition:color .3s var(--ease);
}
.backtop:hover,.backtop:focus-visible{color:#4ef1cc;}
.backtop svg{width:1.4em; height:1.4em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* ── Collapsed channels ──────────────────────────────────────────
   Default state shows only the wordmark, so all three fit compactly and
   the socials + SEE MY WORK bar stay in view. Hovering a channel expands
   it — the icon slides in, the caption drops open, and the flicker + bg
   glow fire. Only where a real pointer can hover; touch devices get the
   full, always-open lockup. */
@media (hover:hover) and (pointer:fine){
  .tile{padding:clamp(4px,.7vh,9px) clamp(12px,2vw,22px);}
  .lock{gap:0;}
  /* icon collapses to nothing, then slides open on hover */
  .mark{
    width:0; margin-inline-end:0; opacity:0;
    transition:width .38s var(--ease),margin .38s var(--ease),
               opacity .3s var(--ease),filter .35s var(--ease);
  }
  /* wordmark shrinks to a thin bar when collapsed, grows back on hover */
  .tile{--type-h-shown:min(var(--type-h), clamp(58px,8.6vh,94px)); --mark-h-shown:0px;
         min-height:clamp(100px,15vh,146px);}
  /* VD wordmark carries a ship glint + two lines, so it reads smaller at the
     shared cap — give it a taller collapsed cap to match CJ/AT optically. */
  [data-brand="vd"]{--type-h-shown:min(var(--type-h), clamp(76px,11.5vh,124px));}
  .type{transition:height .38s var(--ease),filter .35s var(--ease),opacity .2s;}
  /* caption folds away */
  .meta{
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .42s var(--ease),opacity .3s var(--ease);
  }
  .tile.open .mark,.tile.open .mark{
    width:var(--icon-w); margin-inline-end:var(--lock-gap); opacity:1;
  }
  .tile.open,.tile.open{--type-h-shown:var(--type-h); --mark-h-shown:var(--mark-h);
         min-height:clamp(150px,24vh,220px);}
  .tile.open .meta,.tile.open .meta{max-height:5em; opacity:1;}
}

/* ── Instagram feed — clean 3×3 of recent stills + a see-more link ── */
.ig-head{
  margin:clamp(10px,2vh,22px) 0 0; text-align:center;
  font-family:var(--tty); font-size:clamp(15px,2.4vw,24px); letter-spacing:.08em;
  color:var(--ink); text-shadow:0 0 14px rgba(120,220,200,.16);
}
.ig-head span{color:#4ef1cc; opacity:.75; margin-right:.4em;}
.ig-feed{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px);
  width:100%;
}
.ig-tile{
  position:relative; display:block; aspect-ratio:4/5; overflow:hidden;
  border-radius:3px; background:var(--bg-lift);
}
.ig-tile img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease),filter .4s var(--ease);
  filter:brightness(.92) saturate(.95);
}
.ig-tile::after{content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  opacity:0; transition:opacity .3s var(--ease);}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.06); filter:brightness(1.05) saturate(1.05);}
.ig-tile:hover::after,.ig-tile:focus-visible::after{opacity:1; box-shadow:inset 0 0 0 1px rgba(78,241,204,.5);}
.ig-tile:focus-visible{outline:2px solid rgba(78,241,204,.8); outline-offset:2px;}
.ig-more{
  align-self:center; display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink-dim);
  font:400 clamp(13px,1.8vw,18px)/1 var(--tty); letter-spacing:.08em; text-transform:uppercase;
  padding:6px 2px; transition:color .3s var(--ease),gap .3s var(--ease);
}
.ig-more:hover,.ig-more:focus-visible{color:#4ef1cc; gap:14px;}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width:720px){
  .channels{grid-template-rows:none; grid-auto-rows:minmax(140px,auto); min-height:0;}
  .lock{flex-direction:column; gap:clamp(10px,2vh,16px); height:auto; width:auto; justify-content:center;}
  .mark{flex:none; width:auto;}
  .meta{width:auto; padding-left:0; justify-content:center;}
  .mark,.type{height:auto; max-width:78%;}
  [data-brand="cj"] .mark,[data-brand="vd"] .mark{max-height:clamp(64px,14vh,104px);}
  [data-brand="at"] .mark{max-height:clamp(60px,13vh,100px);}
  [data-brand="vd"] .type{max-height:clamp(52px,12vh,88px);}
  [data-brand="cj"] .type{max-height:clamp(34px,8vh,58px);}
  [data-brand="at"] .type{max-height:clamp(52px,12vh,88px); max-width:78%;}
  .meta{flex-direction:column; align-items:center; gap:5px; text-align:center;}
  .colophon{gap:9px;}
  .work-grid{grid-template-columns:1fr; gap:16px;}
  .ig-feed{gap:4px;}
  .socials{grid-template-columns:repeat(3,minmax(0,1fr)); height:auto;}
  .slink svg{width:clamp(50px,15vw,74px);}
}
@media (max-width:400px){
  .socials{grid-template-columns:repeat(2,minmax(0,1fr));}
  .slabel{font-size:9px; letter-spacing:.12em;}
}

/* ── Motion / contrast preferences ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .crt-flick,.fx,.sim{display:none;}
  .seework-arrow svg{animation:none;}

}
@media (prefers-contrast:more){
  :root{--ink-dim:rgba(207,233,226,.75); --ink-faint:rgba(207,233,226,.5); --line:rgba(207,233,226,.3);}
}