/* RESET */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Manrope', sans-serif;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* CURSOR */
.cur {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  pointer-events: none; z-index: 9999; transform: translate(-50%,-50%);
  background: var(--grad);
}
.cur-r {
  position: fixed; width: 28px; height: 28px; border-radius: 50%;
  pointer-events: none; z-index: 9998; transform: translate(-50%,-50%);
  border: 1px solid rgba(0,212,255,0.35);
  transition: width .25s, height .25s, border-color .25s;
}
.cur.h  { width: 14px; height: 14px; }
.cur-r.h { width: 50px; height: 50px; border-color: rgba(0,229,195,0.2); }

/* NOISE OVERLAY */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(255,255,255,0.006) 3px, rgba(255,255,255,0.006) 4px
  );
}

/* ANIMATIONS */
@keyframes up      { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes fi      { from { opacity:0; } to { opacity:1; } }
@keyframes blink   { 0%,100% { opacity:1; } 50% { opacity:.2; } }
@keyframes fadeUp  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes drift   { 0%,100% { transform:translate(0,0); } 50% { transform:translate(20px,-20px); } }

/* SCROLL REVEAL */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
.d1 { transition-delay:.07s; }
.d2 { transition-delay:.14s; }
.d3 { transition-delay:.21s; }
.d4 { transition-delay:.28s; }