/* ============================================================
   Cursor animation visuals — overlays the animations in
   cursor_animations.js spawn (sunglasses, …). Like the rest of
   the cursor system, colour comes from mix-blend-mode: difference
   so it stays visible (opposite of the background) on any page.
   ============================================================ */

/* "cool" sunglasses + sparkle. Each wrapper follows the dot (JS, per frame);
   the inner svg is animated by the GSAP timeline. */
.cursor-glasses,
.cursor-star {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  color: var(--color-muted);
  mix-blend-mode: difference;
  z-index: 10001;                 /* above the dot (10000) — shades sit ON it */
  will-change: transform;
}
.cursor-glasses__svg,
.cursor-star__svg {
  display: block;
  overflow: visible;
}

/* "weAgree" companions — coloured dots that walk in around the cursor. Unlike the
   rest of the cursor layer these do NOT use mix-blend-difference: each needs a
   distinct shade (and a true pink), so legibility comes from a soft drop-shadow
   instead. The body is currentColor (set per shade below); inked details (specs,
   cane, heels) are baked into the SVG. GSAP positions them. */
.cursor-mate {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}
.cursor-mate__svg { display: block; overflow: visible; }

.cursor-mate--nerdy  { color: #5b8a9a; }   /* scholarly blue-teal */
.cursor-mate--baby   { color: #e6c15c; }   /* soft yellow (also smaller, in SVG) */
.cursor-mate--uncle  { color: #b07f4f; }   /* warm tan */
.cursor-mate--girlie { color: #e892bd; }   /* pink */

/* the "hmm, we agree" doodle — handwritten Caveat, blend-difference like the rest
   of the doodle layer so it reads on any background. */
.cursor-agree-note {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-doodle);
  font-size: 30px;
  line-height: 1;
  color: var(--color-muted);
  mix-blend-mode: difference;
  z-index: 10002;
  will-change: transform, opacity;
}

/* loveGames gamepad — wrapper follows the dot (JS); the inner svg + buttons are
   animated by the GSAP timeline. The body adapts to the background via
   blend-difference (like the dot); the coloured buttons paint over it in true
   colour, so blend lives on the body only, not the wrapper. */
.cursor-pad {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;
  will-change: transform;
}
.cursor-pad__svg { display: block; overflow: visible; }
.cursor-pad__body {
  fill: var(--color-muted);
  mix-blend-mode: difference;
}

/* "I love games" doodle — wrapper follows the pad (JS), inner span is animated by
   GSAP. Handwritten Caveat, blend-difference so it reads on any background. */
.cursor-game-note {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10002;
  will-change: transform;
}
.cursor-game-note__txt {
  display: inline-block;
  font-family: var(--font-doodle);
  font-size: 26px;
  line-height: 1;
  color: var(--color-muted);
  mix-blend-mode: difference;
}

/* flyAway plane (cursor_behaviors.js) — coloured arcade sprite, drop-shadow for
   legibility on any bg (no blend). Wrapper follows the physics; the inner svg is
   rotated/banked each frame by JS, so it needs a centred transform-origin. */
.cursor-plane {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;
  will-change: transform;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}
.cursor-plane__svg {
  display: block;
  overflow: visible;
  transform-origin: 50% 50%;
}

/* smoke trail puffs behind the plane — soft round wisps; grow/drift/fade in JS.
   Sit below the plane (z 10000) so the trail reads behind it. */
.cursor-smoke {
  position: fixed;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-muted);
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 10000;
  will-change: transform, opacity;
}

/* crosshair marking the live mouse while the plane flies (same look as the
   landing reticle, but blend-difference so it reads on any background). */
.cursor-plane-aim {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10002;
  color: var(--color-muted);
  mix-blend-mode: difference;
  will-change: transform, opacity;
}
.cursor-plane-aim__svg { display: block; overflow: visible; width: 34px; }
.cursor-plane-aim__svg circle,
.cursor-plane-aim__svg line { fill: none; stroke: currentColor; stroke-width: 6; }

/* weAgree finale — Physics2D confetti balls. Colour + size set per-blast in JS;
   GSAP drives the physics. */
.cursor-confetti {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  will-change: transform, opacity;
}

/* turret (cursor_behaviors.js) — the watermelon morphs into a mounted gun, then
   fires seeds. Ported from the landing weapon, but blend-difference (gun + reticle)
   so it reads on the /test light/dark/accent bands like the rest of this layer. */
.cursor-weapon {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 10002;
  will-change: transform;
}
.cursor-weapon svg { display: block; overflow: visible; width: 100%; height: 100%; }
.cursor-weapon__shape,
.cursor-weapon__mount {
  fill: var(--color-muted);
  mix-blend-mode: difference;
}

.cursor-reticle {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: 10002;
  color: var(--color-muted);
  mix-blend-mode: difference;
  will-change: transform, opacity;
}
.cursor-reticle svg { display: block; overflow: visible; width: 100%; height: 100%; }
.cursor-reticle circle,
.cursor-reticle line { fill: none; stroke: currentColor; stroke-width: 3; }

/* watermelon seeds — physical objects, so true dark-seed colour (not blend) plus a
   soft light halo so they stay visible even on the dark band. */
.cursor-seed {
  position: fixed;
  top: 0;
  left: 0;
  width: 11px;
  height: 13px;
  pointer-events: none;
  z-index: 10001;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.7));
  will-change: transform, opacity;
}
.cursor-seed svg { display: block; overflow: visible; width: 100%; height: 100%; }
.cursor-seed path { fill: #1f2d12; }

/* lemon bounce (cursor_behaviors.js) — a giant lemon that leaps toward clicks.
   Coloured fruit art (reused from the lemon skin), so drop-shadow for legibility
   like the other fruit sprites, not blend-difference. Wrapper owns position +
   the huge scale (JS); the inner svg owns the landing squash. */
.cursor-lemon {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  pointer-events: none;
  z-index: 10001;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
  will-change: transform;
}
.cursor-lemon svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* orangeFamily (cursor_animations.js) — the orange dad's shy wife + 2 kids. Cute
   orange dots: body = currentColor (per member class), inked face baked into the
   SVG; drop-shadow for legibility (not blend). Wife sits above the kids so they
   tuck behind her. GSAP positions/animates them. */
.cursor-fam {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10001;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}
.cursor-fam__svg { display: block; overflow: visible; }
.cursor-fam--wife { color: #f3851a; z-index: 10002; }   /* mum in front of the kids */
.cursor-fam--kid  { color: #ffa53d; z-index: 10001; }   /* lighter little oranges */

/* the wife's bashful "hi" — handwritten Caveat, blend-difference so it reads on any
   background like the rest of the doodle layer. */
.cursor-fam-note {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-doodle);
  font-size: 24px;
  line-height: 1;
  color: var(--color-muted);
  mix-blend-mode: difference;
  z-index: 10003;
  will-change: transform, opacity;
}
/* the kids' "mommy" — smaller than the wife's "hi" so it reads as bashful. */
.cursor-fam-note--kid { font-size: 16px; }

/* No cursor animations on touch / no-fine-pointer. */
@media (hover: none), (pointer: coarse) {
  .cursor-glasses,
  .cursor-star,
  .cursor-mate,
  .cursor-agree-note,
  .cursor-confetti,
  .cursor-pad,
  .cursor-game-note,
  .cursor-plane,
  .cursor-plane-aim,
  .cursor-smoke,
  .cursor-weapon,
  .cursor-reticle,
  .cursor-seed,
  .cursor-lemon,
  .cursor-fam,
  .cursor-fam-note { display: none; }
}