/* ─── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #0a0a0a;
  --white: #f5f2ee;
  --mid: #888;
  --border: rgba(255,255,255,0.10);
  --font-display: 'Syne', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-mono);
  overflow-x: hidden;
  cursor: none;
}

/* ─── Custom Cursor ─────────────────────────────────── */
.cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--white); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .15s ease, width .2s ease, height .2s ease, background .2s ease;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid rgba(245,242,238,0.4);
  border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94),
              width .35s ease, height .35s ease;
}
body:hover .cursor { opacity: 1; }

/* ─── Grain Overlay ─────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity: .55;
}