/* ════════════════════════════════════════════════════
   SYS//LINK.INDEX
   white paper · black ink · one red signal
   ════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#ffffff;
  --ink:#0b0b0d;
  --purp:#d900ff;
  --disp:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --link-count:4; /* set by JS automatically */
}
html,body{height:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--mono);
  height:100dvh;overflow:hidden;overscroll-behavior:none;
  touch-action:manipulation;position:relative;
  -webkit-font-smoothing:antialiased;
}
/* halftone print grain */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(0,0,0,.055) 1px,transparent 1.4px);
  background-size:16px 16px}
/* broadcast scanlines — sits above everything except the cursor */
body::after{content:'';position:fixed;inset:0;z-index:9;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.02) 3px 4px);
  mix-blend-mode:multiply}
@media(pointer:fine){body,a,button{cursor:none}}
::selection{background:var(--purp);color:#fff}

/* ── depth layer: giant node-count numeral ── */
#bgnum{position:fixed;inset:0;z-index:0;display:grid;place-items:center;
  pointer-events:none;user-select:none;
  font-family:var(--disp);font-weight:900;font-size:64vmin;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(0,0,0,.07);
  will-change:transform}

/* ── particle canvas ── */
#fx{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ── the menu ── */
main{position:relative;z-index:3;height:100dvh;display:grid;place-items:center}
nav{display:flex;flex-direction:column;align-items:center;
  gap:clamp(4px,1.6vh,22px);user-select:none;-webkit-user-select:none}

.menu-link{
  position:relative;display:inline-block;text-decoration:none;color:var(--ink);
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:min(11vmin,calc(58vh / var(--link-count)));
  line-height:.92;letter-spacing:.01em;padding:.04em .18em;
  -webkit-tap-highlight-color:transparent;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s,filter .45s;
}
.menu-link:focus{outline:none}
.menu-link:focus-visible{outline:2px solid var(--purp);outline-offset:8px}

/* everyone else scatters + falls out of focus */
nav.has-hot .menu-link:not(.hot){
  opacity:.12;filter:blur(2px) grayscale(1);
  transform:translateX(var(--sx,0)) scale(.965)}
.menu-link.hot{color:#fff}

/* jagged red band sweeps in behind the hot link */
.band{position:absolute;inset:.06em -.12em .02em;z-index:0;background:var(--purp);
  transform:skewX(-9deg) scaleX(0);transform-origin:left center;
  clip-path:polygon(0 14%,2.5% 0,100% 4%,98.5% 86%,100% 100%,1.5% 96%);
  transition:transform .26s cubic-bezier(.85,0,.15,1)}
.menu-link.hot .band{transform:skewX(-9deg) scaleX(1)}

/* node number tag */
.num{position:absolute;top:-14px;left:4px;font:700 10px/1 var(--mono);
  letter-spacing:.22em;color:var(--ink);opacity:.55;transition:.3s}
.menu-link.hot .num{color:#fff;opacity:1;background:var(--ink);padding:3px 6px;top:-19px}

/* letters — outer span is pointer-physics (JS), inner span is the menu jump (CSS) */
.word{position:relative;z-index:1;display:inline-block;white-space:nowrap}
.lt{display:inline-block;will-change:transform}
.lt-in{display:inline-block;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1);
  transition-timing-function:linear(0,.62 11%,1.1 22%,1.24 31%,.94 47%,1.05 62%,.99 78%,1);
  transition-delay:calc(var(--i)*16ms)}
.menu-link.hot .lt-in{transform:translateY(-.07em) skewX(-11deg) scaleY(1.06)}
.menu-link.hot .word .lt:nth-child(even) .lt-in{
  transform:translateY(.055em) skewX(-11deg) scaleY(.97)}

/* glitch ghosts — sliced purp/black echoes of the label */
.ghost{position:absolute;inset:.04em .18em;z-index:2;pointer-events:none;
  text-align:center;white-space:nowrap;clip-path:inset(0 0 100% 0)}
.g1{color:var(--purp)} .g2{color:var(--ink)}
.menu-link.hot .g1{color:#fff}
.menu-link.hot .ghost,.menu-link.auto-glitch .ghost{
  animation:gflick 1.15s steps(1,end) infinite}
.menu-link.hot .g2,.menu-link.auto-glitch .g2{
  animation-duration:1.38s;animation-direction:reverse}
@keyframes gflick{
  0%,86%{clip-path:inset(0 0 100% 0);transform:none}
  87%{clip-path:inset(8% -2% 58% -2%);transform:translate(-7px,3px) skewX(-4deg)}
  92%{clip-path:inset(64% -2% 6% -2%);transform:translate(6px,-2px)}
  96%{clip-path:inset(34% -2% 38% -2%);transform:translate(-4px,1px)}
  100%{clip-path:inset(0 0 100% 0)}
}

/* ── HUD furniture ── */
.hud{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;
  justify-content:space-between;gap:12px;padding:14px 18px;
  font:700 10px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  pointer-events:none;user-select:none}
.hud .dot{display:inline-block;width:7px;height:7px;background:var(--purp);
  border-radius:50%;margin:0 4px 0 10px;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.corner{position:fixed;z-index:4;font:400 14px/1 var(--mono);opacity:.45;pointer-events:none}
.c-tl{top:36px;left:16px}.c-tr{top:36px;right:16px}
.credit{position:fixed;left:16px;bottom:40px;z-index:4;font:400 9px/1 var(--mono);
  letter-spacing:.16em;opacity:.4;text-transform:uppercase;pointer-events:none}

#snd{position:fixed;right:14px;bottom:38px;z-index:5;
  font:700 10px/1 var(--mono);letter-spacing:.14em;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);
  padding:6px 10px;-webkit-tap-highlight-color:transparent}
#snd:hover{background:var(--ink);color:#fff}
#snd:focus-visible{outline:2px solid var(--purp);outline-offset:3px}

#ticker{position:fixed;left:0;right:0;bottom:0;z-index:4;overflow:hidden;
  border-top:1px solid rgba(0,0,0,.12);background:var(--paper);
  padding:6px 0;pointer-events:none}
#tin{display:inline-block;white-space:nowrap;font:700 9px/1 var(--mono);
  letter-spacing:.3em;text-transform:uppercase;opacity:.55;
  animation:slide 26s linear infinite}
#tin b{color:var(--purp);font-weight:700}
@keyframes slide{to{transform:translateX(-33.3333%)}}

/* ── inversion lens — black-hole disc that flips reality beneath it ── */
#lens{position:fixed;z-index:6;left:0;top:0;width:124px;height:124px;
  border-radius:50%;background:#fff;mix-blend-mode:difference;
  pointer-events:none;will-change:transform}

/* ── star wipe (link transition) ── */
#wipe{position:fixed;inset:0;z-index:8;display:none;pointer-events:none}
.wl{position:absolute;inset:0}
#wRed{background:var(--purp)}
#wInk{background:var(--ink)}
#wLab{position:absolute;inset:0;display:grid;place-content:center;
  justify-items:center;gap:16px;opacity:0;text-align:center;padding:0 5vw}
#wName{font-family:var(--disp);font-weight:900;color:#fff;
  font-size:min(15vmin,16vw);line-height:.9;text-transform:uppercase;
  white-space:nowrap;
  transform:skewX(-8deg) rotate(-3.5deg)}
#wSub{font:700 11px/1.6 var(--mono);letter-spacing:.5em;color:#fff;text-transform:uppercase}
#wSub::after{content:'_';color:var(--purp);animation:blink .7s steps(2) infinite}

/* ── custom cursor: red dot + difference reticle ── */
#curRing{position:fixed;z-index:10;left:0;top:0;width:36px;height:36px;
  border:1.5px solid #fff;border-radius:50%;mix-blend-mode:difference;
  pointer-events:none;will-change:transform;
  transition:border-radius .25s,width .25s,height .25s,border-width .25s}
#curRing.lock{border-radius:0;width:48px;height:48px;border-width:2px}
#curDot{position:fixed;z-index:10;left:0;top:0;width:7px;height:7px;
  background:var(--purp);pointer-events:none;will-change:transform}
@media(pointer:coarse){#curRing,#curDot{display:none}}

/* ── reduced motion: calm everything, restore native cursor ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  body,a,button{cursor:auto}
  #lens,#curRing,#curDot{display:none}
}