/* ══════════════════════════════════════════
   BASE — Variables, Reset, Body, Cursor
══════════════════════════════════════════ */

:root {
  --bg: #080808;
  --bg2: #0f0f0f;
  --bg3: #141414;
  --white: #f0f0f0;
  --white-dim: rgba(240,240,240,0.45);
  --pink: #ff1d78;
  --cyan: #00e5ff;
  --gold: #ffd600;
  --border: rgba(240,240,240,0.1);
  --cond: 'Barlow Condensed', sans-serif;
  --body: 'Barlow', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --grid: 1px solid var(--border);
  --header-h: 88px;
  --footer-h: 36px;
}

@media (max-width: 600px) {
  :root {
    --footer-h: 95px;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow: hidden; height: 100%; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--body);
  height: 100vh;
  overflow: hidden;
  cursor: none;
}

/* NOISE */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 180px; mix-blend-mode: overlay; opacity: 0.5;
}

/* SCANLINES */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.04) 2px, rgba(0,0,0,0.04) 4px);
}

/* CURSOR */
#cur {
  position: fixed; z-index: 10000; pointer-events: none;
  width: 22px; height: 22px;
  border: 1.5px solid var(--pink); border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: transform 0.12s, border-color 0.15s, width 0.15s, height 0.15s;
  mix-blend-mode: difference;
}
#cur.hover { transform: translate(-50%,-50%) scale(2.2); border-color: var(--cyan); }
#cur-dot {
  position: fixed; z-index: 10001; pointer-events: none;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--white); transform: translate(-50%,-50%);
}
@media (max-width: 768px) { #cur, #cur-dot { display: none; } body { cursor: default; } }

/* SCROLLBAR */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }