/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg-deep:    #030306;
  --bg-surface: #0a0a12;
  --cyan:       #00f5ff;
  --purple:     #a855f7;
  --pink:       #d946ef;
  --amber:      #f59e0b;
  --green:      #10b981;
  --text:       #f8fafc;
  --muted:      #94a3b8;
}
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  cursor: none;
}
a { color: inherit; text-decoration: none; }

/* ─── SCROLL PROGRESS BAR ─── */
#progress-bar {
  position: fixed; top: 0; left: 0; z-index: 9997;
  height: 4px; width: 0%;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--purple) 50%, var(--pink) 100%);
  box-shadow: 0 0 18px rgba(0,245,255,1), 0 0 8px rgba(168,85,247,0.9);
  pointer-events: none;
}

/* ─── SECTION COUNTER ─── */
#section-counter {
  position: fixed; right: 32px; top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transition: opacity 0.4s;
}
#section-counter.visible { opacity: 1; }
.sc-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 700; color: var(--cyan);
  letter-spacing: 0.1em; margin-bottom: 6px;
}
.sc-sep { width: 3px; height: 67px; background: linear-gradient(to bottom, var(--cyan), transparent); border-radius: 1px; }
.sc-dots { display: flex; flex-direction: column; gap: 12px; }
.sc-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.15); cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.sc-dot.active { background: var(--cyan); transform: scale(1.5); box-shadow: 0 0 10px var(--cyan); }
.sc-dot:hover { background: rgba(0,245,255,0.5); }

/* ─── CUSTOM CURSOR ─── */
#cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 36px; height: 36px;
  border: 2px solid var(--cyan); border-radius: 50%;
  pointer-events: none; transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, background 0.15s;
  mix-blend-mode: difference;
}
#cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 10000;
  width: 6px; height: 6px; background: var(--cyan);
  border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%);
}
body:has(a:hover) #cursor-ring,
body:has(button:hover) #cursor-ring { width: 56px; height: 56px; border-color: var(--pink); background: rgba(217,70,239,0.08); }

/* ─── NOISE OVERLAY ─── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── SECTION SHARED ─── */
section { position: relative; z-index: 2; }