/* ── CUSTOM CURSOR ─────────────────────────────── */
@media(any-pointer:fine){
  body.cursor-on,body.cursor-on *{cursor:none !important}
}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);will-change:transform,width,height,opacity}
/* Idle cursor — just a clean white dot. Ring is hidden by default and only
   appears for pill / text-input states (see overrides below). */
.cursor-dot{width:5px;height:5px;background:var(--text-white);box-shadow:0 0 4px rgba(255,255,255,.55)}
.cursor-ring{width:26px;height:26px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.04) 100%);-webkit-backdrop-filter:blur(6px) saturate(140%);backdrop-filter:blur(6px) saturate(140%);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:transparent;white-space:nowrap;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.12),inset 0 0 0 0.5px rgba(255,255,255,.06);opacity:0;transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),border-radius .35s cubic-bezier(.22,1,.36,1),background .3s cubic-bezier(.22,1,.36,1),border-color .3s,color .25s,opacity .25s}
.cursor-label{display:block;line-height:1;font-weight:600}

/* Clickable: ring vanishes, only dot stays — "fused" into the button */
body.cursor-merge .cursor-ring{opacity:0;width:6px;height:6px;border-color:transparent;background:transparent}
body.cursor-merge .cursor-dot{width:6px;height:6px}

/* Visual hover with label: ring becomes labelled pill */
body.cursor-pill .cursor-ring{opacity:1;width:auto;min-width:32px;height:32px;padding:0 14px;border-radius:100px;background:var(--cursor-pill-bg,var(--accent));border-color:transparent;color:#0b0b14;box-shadow:0 8px 22px -6px rgba(var(--cursor-pill-rgb,167,139,250),.5);-webkit-backdrop-filter:none;backdrop-filter:none}
body.cursor-pill .cursor-dot{opacity:0;width:0;height:0}
body.cursor-pill .cursor-label{display:inline-flex;align-items:center;gap:6px}
.cursor-arrow{width:13px;height:13px;display:inline-block;flex-shrink:0;stroke:currentColor}

/* Text input: vertical bar */
body.cursor-text .cursor-ring{opacity:1;width:3px;height:22px;border-radius:2px;background:var(--accent);border-color:transparent;color:transparent}
body.cursor-text .cursor-dot{opacity:0}

body.cursor-hidden .cursor-dot,body.cursor-hidden .cursor-ring{opacity:0 !important}
/* Moving state — fade ring out so it doesn't lag behind the dot. Dot stays default size. */
body.cursor-moving .cursor-ring{opacity:0;transition:opacity .08s linear}
/* Pill mode wins over moving — keep the OPEN label always visible while hovering */
body.cursor-moving.cursor-pill .cursor-ring{opacity:1!important}
body.cursor-moving.cursor-pill .cursor-dot{opacity:0!important;width:0!important;height:0!important}
@media(prefers-reduced-motion:reduce){
  .cursor-dot,.cursor-ring{transition:none}
}

/* ── MAGNETIC ──────────────────────────────────── */
[data-magnetic]{transition:transform .45s cubic-bezier(.22,1,.36,1);will-change:transform}
/* Small icon buttons — snappier follow so the magnet doesn't lag behind the cursor */
.case-btn-icon[data-magnetic]{transition:transform .26s cubic-bezier(.22,1,.36,1)}

/* ── TILT + SPOTLIGHT ──────────────────────────── */
.tilt{position:relative;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));transition:transform .55s cubic-bezier(.22,1,.36,1)}
.tilt > *{transform:translateZ(0)}
.tilt::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle 40px at var(--spot-x,50%) var(--spot-y,50%),rgba(var(--card-accent-rgb,167,139,250),.07) 0%,rgba(var(--card-accent-rgb,167,139,250),.02) 40%,transparent 60%);opacity:0;transition:opacity .4s cubic-bezier(.22,1,.36,1);pointer-events:none;mix-blend-mode:screen;z-index:5}
.tilt:hover::after{opacity:1}