/* ==========================================================================
   GOLAZO — Custom cursor v3 — THE BALL + KEEPER CATCH
   The cursor IS the brand ball (cropped from the logo).

   STATES
   · idle     — 22px ball, soft shadow, ROLLS (rotates) with horizontal movement
   · hover    — over interactive elements: ball scales up slightly (no ring)
   · click    — KEEPER CATCH: two goalkeeper gloves clamp the ball from the
                sides, ball squeezes; held while the button is down, gloves
                release on mouseup. Works EVERYWHERE (no special markup needed).
   · drag     — same catch visual persists while moving with the button down
   · text     — thin green caret bar (ball hides — precision first in fields)
   · disabled — greyed, half-transparent ball
   · hidden   — leaves window / blur
   · dark zones — [data-cursor-theme="dark"] or html.gcur-dark: white ball

   SAFETY RAILS: fine pointers only (JS-gated), native cursor returns if JS
   fails, pointer-events:none, transform-only, reduced-motion = no roll /
   instant states, keyboard & focus untouched.
   ========================================================================== */

/* Hide the native cursor on EVERYTHING while the follower is active.
   `*` + !important is deliberate: theme rules like `label{cursor:pointer}`
   or Woo's `cursor:pointer` on cards would otherwise win and show the native
   pointer next to the ball (seen live on the filter labels). Safe because
   this only exists under .gcur-on, which only JS adds on fine pointers. */
html.gcur-on, html.gcur-on *{
  cursor:none !important;
}

#gcursor{position:fixed; left:0; top:0; z-index:99999; pointer-events:none; opacity:0; transition:opacity .2s}
html.gcur-on #gcursor{opacity:1}
#gcursor[data-state="hidden"]{opacity:0}

/* ---- wrapper: squash / scale per state ---- */
.gc-wrap{position:absolute; left:0; top:0; width:22px; height:22px; margin:-11px 0 0 -11px;
  transition:transform .16s var(--ease-out)}
/* ---- the ball: rolls via JS rotate ---- */
.gc-ball{width:100%; height:100%;
  background:url("../img/golazo-ball.png") center/contain no-repeat;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
  will-change:transform}
html.gcur-dark .gc-ball{background-image:url("../img/golazo-ball-white.png")}

/* ---- hover: subtle grow, NO ring ---- */
#gcursor[data-state="hover"] .gc-wrap{transform:scale(1.22)}

/* ---- click & drag: KEEPER CATCH (glove asset: assets/icons/keeper-glove.svg) ---- */
.gc-glove{position:absolute; top:-16px; width:23px; height:29px; opacity:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
  transition:opacity .12s, transform .16s var(--ease-out)}
.gc-glove--l{left:-26px; transform:translateX(-12px) rotate(-16deg)}
.gc-glove--r{right:-26px; transform:translateX(12px) rotate(16deg) scaleX(-1)}
#gcursor[data-state="click"] .gc-glove, #gcursor[data-state="drag"] .gc-glove{opacity:1}
#gcursor[data-state="click"] .gc-glove--l, #gcursor[data-state="drag"] .gc-glove--l{transform:translateX(0) rotate(-5deg)}
#gcursor[data-state="click"] .gc-glove--r, #gcursor[data-state="drag"] .gc-glove--r{transform:translateX(0) rotate(5deg) scaleX(-1)}
#gcursor[data-state="click"] .gc-wrap, #gcursor[data-state="drag"] .gc-wrap{transform:scale(1.1,.94)} /* gripped squeeze */

/* ---- text: caret (ball hides) ---- */
.gc-caret{position:absolute; left:-1.5px; top:-13px; width:3px; height:26px; border-radius:2px;
  background:var(--golazo-green); opacity:0; transition:opacity .15s}
html.gcur-dark .gc-caret{background:var(--pitch-white)}
#gcursor[data-state="text"] .gc-caret{opacity:1}
#gcursor[data-state="text"] .gc-wrap{transform:scale(0)}
#gcursor[data-state="text"] .gc-glove{opacity:0}

/* ---- disabled ---- */
#gcursor[data-state="disabled"] .gc-ball{filter:grayscale(1) opacity(.55) drop-shadow(0 2px 4px rgba(0,0,0,.25))}

@media (prefers-reduced-motion:reduce){
  .gc-wrap,.gc-glove{transition:none}
}