/* ============================================================================
   Star cursor (brand motif) — shared module for every public page EXCEPT home.
   IDENTICAL to the home page's cursor CSS block (in css/landing.css). Position is
   set by GSAP via js/cursor.js; this file only styles the star + sparkle trail.
   Desktop only (pointer:fine); disabled under reduced-motion.
   NOT loaded on the dashboards (which keep the native cursor).
   ========================================================================== */
.cursor-star, .cursor-spark {
  position: fixed; top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 300;
  color: var(--brand-pink);
}
.cursor-star { opacity: 0; transition: opacity 0.25s ease, scale 0.18s ease; }
body.star-cursor-on .cursor-star { opacity: 1; }
.cursor-star.is-hovering { scale: 1.45; color: var(--brand-blue); }
.cursor-star svg, .cursor-spark svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 0 5px rgba(255, 64, 129, 0.55));
}
.cursor-spark {
  width: 13px; height: 13px;
  transform: translate(-50%, -50%) scale(var(--s, 0.6));
  animation: sparkFade 0.72s ease-out forwards;
}
@keyframes sparkFade {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(var(--s, 0.6)) rotate(0deg); }
  100% { opacity: 0;    transform: translate(-50%, calc(-50% - 16px)) scale(0) rotate(40deg); }
}
/* Star is the cursor everywhere on the page — beats any element-level
   cursor:grab/pointer via the universal selector. Scoped to body.star-cursor-on
   so pages that don't load this file (dashboards) keep the native cursor. */
body.star-cursor-on,
body.star-cursor-on * { cursor: none !important; }
[data-theme="light"] .cursor-star svg, [data-theme="light"] .cursor-spark svg {
  filter: drop-shadow(0 0 5px rgba(194, 24, 91, 0.5));
}
@media (prefers-reduced-motion: reduce) {
  .cursor-star, .cursor-spark { display: none; }
  /* Star hidden -> return the native cursor; must also be !important to beat the rule above. */
  body.star-cursor-on,
  body.star-cursor-on * { cursor: auto !important; }
}