/* ── BASE.CSS — variables, reset, global ── */

:root {
  --bg:      #080810;
  --panel:   #0f0f1e;
  --border:  #1e1e3a;
  --glow:    #3a3aff;
  --accent:  #00d4ff;
  --accent2: #ff6b35;
  --accent3: #a855f7;
  --gold:    #ffd700;
  --green:   #00ff88;
  --text:    #e2e2f8;
  --dim:     #8585a8;

  --content-width: 1100px;
  --page-gutter: 24px;
  --section-pad-start: 96px;
  --section-pad-end: 60px;
  --radius-sm: 4px;
  --radius-card: 8px;
  --radius-large: 10px;
  --glow-cyan: rgba(0,212,255,.35);
  --shadow-cyan-card: 0 14px 44px rgba(0,212,255,.08);
  --shadow-amber-card: 0 14px 44px rgba(255,107,53,.08);
  --duration-fast: .15s;
  --duration-ui: .2s;
  --duration-enter: .6s;
  --z-background: 0;
  --z-particles: 1;
  --z-decoration: 5;
  --z-content: 10;
  --z-scanlines: 100;
  --z-corners: 150;
  --z-mobile-nav: 199;
  --z-navigation: 200;
  --z-cursor: 9999;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  overflow-x: hidden;
  cursor: none;
}

@media (hover: none) {
  body { cursor: auto; }
  #cur, #cur-dot { display: none; }
}

/* ── SCANLINES ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px
  );
  pointer-events: none;
  z-index: var(--z-scanlines);
  animation: scan 12s linear infinite;
}
@keyframes scan {
  0%   { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* ── SHARED LAYOUT ── */
.container {
  position: relative;
  z-index: var(--z-content);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

section { padding: var(--section-pad-start) 0 var(--section-pad-end); }

/* ── SHARED ANIMATIONS ── */
@keyframes fup   { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes spin  { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes shim  { 0% { left:-100%; } 100% { left:100%; } }
@keyframes ftg   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes dbounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
@keyframes hfade   { 0%,100% { opacity:.04; } 50% { opacity:.14; } }
@keyframes pbar    { 0%,100% { opacity:1;  } 50% { opacity:.6;  } }

/* ── GLITCH ── */
.glitch:hover { animation: glitch .4s; }
@keyframes glitch {
  0%   { text-shadow: none; }
  20%  { text-shadow: -2px 0 #f00, 2px 0 #0ff; }
  40%  { text-shadow:  2px 0 #f00,-2px 0 #0ff; }
  60%  { text-shadow: -2px 0 #f00, 2px 0 #0ff; }
  80%  { text-shadow:  2px 0 var(--accent); }
  100% { text-shadow: none; }
}

/* ── SECTION HEADER ── */
.section-header { margin-bottom: 52px; }
.section-tag {
  font-family: 'VT323', monospace;
  font-size: 17px; color: var(--accent2);
  letter-spacing: 4px; margin-bottom: 8px;
}
.section-tag::before { content: '// '; opacity: .4; }
.section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(14px, 2vw, 24px);
  line-height: 1.6; color: var(--text);
}
.section-title .hl { color: var(--accent); }
.section-line {
  margin-top: 14px; height: 2px; width: 80px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity var(--duration-enter), transform var(--duration-enter); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── CORNER DECORATIONS ── */
.corner-deco { position:fixed; pointer-events:none; z-index:var(--z-corners); opacity:.22; }
.corner-deco.tl { top:80px;  left:14px; }
.corner-deco.br { bottom:14px; right:14px; }
.corner-deco svg { width:52px; height:52px; }