/* ── Reset & base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Instrument Sans', sans-serif;
  overflow-x: hidden; cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Magnetic cursor ───────────────────────────────────── */
#cb-cursor {
  position: fixed; z-index: 10050; pointer-events: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--violet); mix-blend-mode: screen;
  transform: translate(-50%,-50%);
  transition: width .2s var(--spring), height .2s var(--spring), background .2s ease;
}
#cb-ring {
  position: fixed; z-index: 10049; pointer-events: none;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid oklch(0.68 0.28 295 / 0.5);
  transform: translate(-50%,-50%);
  transition: width .3s var(--snappy), height .3s var(--snappy), border-color .2s ease, opacity .2s ease;
}
body.hov #cb-cursor { width: 6px; height: 6px; background: #fff; }
body.hov #cb-ring   { width: 56px; height: 56px; border-color: var(--violet); }
body.clk #cb-cursor { transform: translate(-50%,-50%) scale(1.5); }
body.clk #cb-ring   { opacity: .4; }

/* ── Toast ─────────────────────────────────────────────── */
#toast-root {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 8000; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.cb-toast {
  background: oklch(0.13 0.03 268 / 0.96);
  border: 1px solid var(--border-hi);
  backdrop-filter: blur(20px);
  border-radius: 100px; padding: 10px 22px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  letter-spacing: .05em; color: var(--text);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  animation: t-in .4s var(--spring) forwards;
}
.cb-toast.bye { animation: t-out .3s var(--smooth) forwards; }
.td { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ── Selection & scrollbar ─────────────────────────────── */
::selection { background: oklch(0.68 0.28 295 / 0.4); color: var(--text); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--bg-float); border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: oklch(0.30 0.05 285); }

/* ── Keyboard focus (visible only for keyboard nav) ────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Scroll progress bar ───────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 900;
  background: linear-gradient(90deg, var(--violet), var(--cyan), var(--lime));
  transform-origin: left; transform: scaleX(0);
  pointer-events: none;
}

/* ── Touch devices: restore native cursor ──────────────── */
@media (hover: none), (pointer: coarse) {
  body, body * { cursor: auto !important; }
  #cb-cursor, #cb-ring { display: none; }
}

/* ── Reduced motion: honor user preference ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  body { cursor: auto; }
  body * { cursor: auto !important; }
  #cb-cursor, #cb-ring { display: none; }
  .reveal { opacity: 1; transform: none; }
}