*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; cursor: none;
}

::selection { background: var(--accent); color: var(--ink); }

/* Shared pulse animation used by accent dots across the site */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.7); opacity: .5; }
}

/* ── CURSOR ── */
#cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .22s, height .22s;
  mix-blend-mode: multiply;
}
#cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9998;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(34,61,74,0.25);
  pointer-events: none; transform: translate(-50%,-50%);
  transition: width .4s cubic-bezier(.23,1,.32,1), height .4s cubic-bezier(.23,1,.32,1);
}
body.cl #cursor  { width: 44px; height: 44px; opacity: .45; }
body.cl #cursor-ring { width: 0; height: 0; }

/* When the cursor is over a dark background, swap to a light variant
   (mix-blend-mode disabled so it stays visible against navy/ink). */
body.on-dark-bg #cursor {
  background: var(--bg);
  mix-blend-mode: normal;
}
body.on-dark-bg #cursor-ring {
  border-color: rgba(245, 243, 239, 0.45);
}

/* Touch / pointer-coarse devices: drop the custom cursor */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  #cursor, #cursor-ring { display: none !important; }
  a, button { cursor: auto; }
}

/* Belt-and-braces: also hide on narrow viewports in case the device
   misreports hover/pointer capabilities (iOS Safari quirks). */
@media (max-width: 900px) {
  #cursor, #cursor-ring { display: none !important; }
}

/* ── SCROLL PROGRESS ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 3px; background: var(--accent); width: 0;
}

/* ── REVEAL ON SCROLL ── */
.reveal {
  opacity: 0; transform: translateY(28px); filter: blur(4px);
  transition:
    opacity .7s cubic-bezier(.23,1,.32,1),
    transform .7s cubic-bezier(.23,1,.32,1),
    filter .7s cubic-bezier(.23,1,.32,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.rd1 { transition-delay: .08s; }
.rd2 { transition-delay: .16s; }
.rd3 { transition-delay: .24s; }
.rd4 { transition-delay: .32s; }