/* ===== Shared custom cursor + ambient glow =====
   Single source of truth — linked by every page so the cursor is identical
   site-wide. Edit here once and it changes everywhere. */

/* Defaults so the cursor renders on pages that don't define these vars.
   Pages/sections may override --glow / --accent-glow to tint it. */
:root {
  --accent-glow: #ff4438;
  --glow: 230,40,40;   /* default ambient cursor glow = red */
}

/* big soft light that trails the cursor (only on fine pointers) */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 540px; height: 540px;
  border-radius: 50%; pointer-events: none; z-index: 90;
  transform: translate(-50%, -50%);
  /* colour is driven by --glow-rgb, updated in JS to match the section under the cursor */
  background: radial-gradient(circle,
    rgba(var(--glow-rgb, 230,40,40), .14) 0%,
    rgba(var(--glow-rgb, 230,40,40), 0) 62%);
  mix-blend-mode: multiply; opacity: 0; transition: opacity .5s ease;
}
/* creative cursor — a white dot inside an accent ring that grows on hover */
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%);
}
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--accent-glow); pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .3s, height .3s, background .3s, border-color .3s;
}
.cursor-ring.is-hover { width: 70px; height: 70px; background: rgba(230,40,40,.12); border-color: rgba(20,20,20,.4); }

@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, .explore, .discuss { cursor: none; }
  .cursor-glow { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-glow, .cursor-dot, .cursor-ring { display: none; }
}