/* ============================================================
   cursor-fx.css — Custom Blood-Drop Cursor Layer
   Vampires vs. Werewolves
   ============================================================
   Opt-in custom cursor for hero / lore sections. Add the class
   `.cursor-fx-scope` to any container (e.g. a hero or lore
   section) to enable a blood-drop follower inside it.

   Behaviour:
     - Active ONLY on desktop fine pointers
       (@media hover:hover and pointer:fine).
     - Native cursor is hidden inside the scope on those devices.
     - Follower element (.cursor-fx-dot) is created + driven by
       cursor-fx.js. It is inert (never rendered) when JS is
       disabled, when no scope exists, on touch devices, or when
       the user prefers reduced motion.

   All colours/tokens come from variables.css. No HTML edits.
   ============================================================ */

/* The follower dot itself — hidden by default. Only shown when JS
   adds `.is-enabled` (guaranteed to satisfy pointer/motion checks). */
.cursor-fx-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;                 /* above content, below halloween/blood-moon fog (9998) is fine — this is a pointer overlay */
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;          /* centre on the pointer */
  pointer-events: none;           /* never intercept clicks/hover */
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
  transform: translate3d(-100px, -100px, 0);
  transition:
    opacity var(--dur-fast, 150ms) ease,
    visibility 0s linear var(--dur-fast, 150ms);
  contain: layout style paint;
}

/* Blood-drop shape: teardrop via border-radius trick + rotation.
   The inner ::before carries the vampire gradient + glow so the
   wrapper transform (position) and the shape rotation stay
   independent. */
.cursor-fx-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;   /* teardrop: pointed bottom-left */
  transform: rotate(45deg);        /* point downward */
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg,
      var(--color-vampire, #8b0000) 0%,
      var(--color-vampire-dark, #5a0000) 100%);
  box-shadow:
    0 0 10px var(--color-vampire-glow, rgba(139, 0, 0, 0.35)),
    0 0 4px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-base, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* Enabled + on-scope state (set by JS while pointer is inside a scope). */
.cursor-fx-dot.is-enabled {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-fast, 150ms) ease,
    visibility 0s;
}

/* Pointer left every scope — fade the dot out (JS drops .active). */
.cursor-fx-dot:not(.active) {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast, 150ms) ease,
    visibility 0s linear var(--dur-fast, 150ms);
}

/* Hovering an interactive element (link / button) — swell + brighten. */
.cursor-fx-dot.hover-cta::before {
  transform: rotate(45deg) scale(1.65);
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg,
      var(--color-vampire, #8b0000) 0%,
      var(--color-vampire-dark, #5a0000) 100%);
  box-shadow:
    0 0 18px var(--color-vampire-glow, rgba(139, 0, 0, 0.35)),
    0 0 6px rgba(0, 0, 0, 0.45);
}

/* On the werewolf race, retint the drop to the faction colour so the
   custom cursor stays on-brand. */
body.race-werewolf .cursor-fx-dot::before {
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg,
      var(--color-werewolf, #2d5a27) 0%,
      var(--color-werewolf-dark, #1a3a16) 100%);
  box-shadow:
    0 0 10px var(--color-werewolf-glow, rgba(45, 90, 39, 0.35)),
    0 0 4px rgba(0, 0, 0, 0.4);
}

/* ── Native-cursor hiding ────────────────────────────────────
   Only on true fine-pointer + hover devices, and only once JS has
   confirmed the layer is live (body gets `.cursor-fx-on`). This
   prevents touch/coarse devices ever losing their cursor and keeps
   the native cursor if JS/localStorage disabled the effect. */
@media (hover: hover) and (pointer: fine) {
  body.cursor-fx-on .cursor-fx-scope,
  body.cursor-fx-on .cursor-fx-scope * {
    cursor: none;
  }
}

/* Reduced-motion: never show the custom follower. JS also bails out,
   this is a defensive belt-and-braces for the CSS layer. */
@media (prefers-reduced-motion: reduce) {
  .cursor-fx-dot {
    display: none !important;
  }
  body.cursor-fx-on .cursor-fx-scope,
  body.cursor-fx-on .cursor-fx-scope * {
    cursor: auto;
  }
}

/* Coarse / touch pointers: guarantee the native cursor is untouched. */
@media (hover: none), (pointer: coarse) {
  .cursor-fx-dot { display: none !important; }
}

@media print {
  .cursor-fx-dot { display: none !important; }
}