/* ar.rbkavin.studio — brand tokens, base reset, custom cursor
   Copied from rbkavin.studio/css/main.css — keep in sync. */

/* ─── TOKENS ─────────────────────────────── */
:root {
  --ink:   #0c0f10;
  --surf:  #141a1c;
  --mid:   #1e2a2e;
  --slate: #536168;
  --mist:  #e8ecee;
  --teal:  #01819c;
  --tealD: #015f75;
  --tealL: #02a8cb;
  --yel:   #f2c94c;
  --ember: #e05c3a;
  --D: 'Syne', sans-serif;
  --B: 'DM Sans', sans-serif;
  --lens:  cubic-bezier(0.4, 0, 0.2, 1);
  --deep:  ease-in-out;
}

/* ─── RESET ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--B);
  background: var(--ink);
  color: var(--mist);
  overflow-x: hidden;
  cursor: none;
}

/* ─── SCROLLBAR ──────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--tealD); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--tealL); }

/* ─── NOISE ──────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .018; pointer-events: none; z-index: 9990;
}

/* ─── CUSTOM CURSOR ──────────────────────── */
#cur {
  position: fixed; width: 8px; height: 8px;
  border-radius: 50%; background: var(--tealL);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  transition: width .18s var(--lens), height .18s var(--lens);
}
#cur-r {
  position: fixed; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid rgba(2,168,203,.45);
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .35s var(--lens), height .35s var(--lens), border-color .3s;
}
body.hov #cur  { width: 16px; height: 16px; }
body.hov #cur-r { width: 54px; height: 54px; border-color: var(--tealL); }

/* ─── REDUCED MOTION ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}