/* ============================================================
   Monique Lam — "techie" enhancement layer
   Modular: remove the <link>/<script> to fully revert.
   Each effect is gated on a body class so it can be toggled.
   ============================================================ */

/* ---------- top scroll-progress hairline ---------- */
.tk-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--red-deep), var(--red), var(--red-bright));
  z-index:200; pointer-events:none; transition:width .08s linear;
}

/* ---------- hero atmosphere: dot grid + cursor spotlight ---------- */
.hero{ isolation:isolate; }
.tk-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.9;
}
.tk-spot{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(260px 260px at var(--mx,75%) var(--my,30%), rgba(225,40,60,.16), transparent 70%);
  opacity:0; transition:opacity .4s ease;
}
.hero:hover .tk-spot{ opacity:1; }
.hero .wrap{ position:relative; z-index:1; }

/* keep the existing radial glow but let canvas sit above the flat bg */
.hero::before{ z-index:0; }

/* ---------- corner crosshairs (HUD) ---------- */
.tk-cross{ position:absolute; width:13px; height:13px; z-index:2; pointer-events:none; opacity:.5; }
.tk-cross::before,.tk-cross::after{ content:""; position:absolute; background:var(--red); }
.tk-cross::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.tk-cross::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.tk-cross.tl{ left:calc(var(--gut) - 6px); top:96px; }
.tk-cross.tr{ right:calc(var(--gut) - 6px); top:96px; }
.tk-cross.bl{ left:calc(var(--gut) - 6px); bottom:24px; }
.tk-cross.br{ right:calc(var(--gut) - 6px); bottom:24px; }

/* ---------- hero live readout ---------- */
.tk-readout{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  margin-top:30px; font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute);
}
.tk-readout .seg{ display:inline-flex; align-items:center; gap:8px; }
.tk-readout .live{ width:7px; height:7px; border-radius:50%; background:#34d27b; box-shadow:0 0 0 0 rgba(52,210,123,.6); animation:tkPulse 1.8s ease-out infinite; }
.tk-readout b{ color:var(--fg-dim); font-weight:500; }
.tk-readout .caret{ display:inline-block; width:8px; height:14px; background:var(--red); margin-left:2px; animation:tkBlink 1.1s steps(1) infinite; transform:translateY(2px); }
@keyframes tkBlink{ 50%{ opacity:0; } }
@keyframes tkPulse{ 0%{ box-shadow:0 0 0 0 rgba(52,210,123,.5);} 70%{ box-shadow:0 0 0 7px rgba(52,210,123,0);} 100%{ box-shadow:0 0 0 0 rgba(52,210,123,0);} }

/* ---------- count-up numerals: tabular so width doesn't jump ---------- */
.stat .num .cnum{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ---------- scorecard: faint engineered grid + crosshairs ---------- */
.score-card{ position:relative; background-image:
  linear-gradient(rgba(246,239,228,.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(246,239,228,.035) 1px, transparent 1px);
  background-size:34px 34px; background-position:center; }

/* ---------- decrypt: subtle dim while scrambling ---------- */
.tk-decrypting{ color:var(--fg-dim); }

@media (prefers-reduced-motion:reduce){
  .tk-readout .live, .tk-readout .caret{ animation:none; }
}
@media (max-width:900px){
  .tk-cross{ display:none; }
}

/* ---------- light-tone palette switcher (HUD chip) ---------- */
.tk-palette{
  position:fixed; left:16px; bottom:16px; z-index:210;
  display:flex; align-items:center; gap:11px;
  padding:9px 13px;
  background:rgba(20,21,25,.86); backdrop-filter:blur(12px) saturate(1.1);
  border:1px solid rgba(244,244,246,.16); border-radius:5px;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#c5c6cb; box-shadow:0 20px 44px -22px rgba(0,0,0,.75);
}
.tk-palette .lbl{ opacity:.62; }
.tk-palette .sws{ display:flex; gap:7px; }
.tk-palette .sw{
  width:19px; height:19px; border-radius:4px; cursor:pointer; padding:0; border:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 1px rgba(244,244,246,.12);
  transition:transform .15s var(--ease), box-shadow .15s;
}
.tk-palette .sw:hover{ transform:translateY(-2px); }
.tk-palette .sw.on{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2px var(--red-bright); transform:translateY(-1px); }
@media (max-width:560px){ .tk-palette{ left:10px; bottom:10px; gap:8px; padding:8px 10px; } }
@media print{ .tk-palette, .tk-progress{ display:none; } }