/* ============================================================
   Interactive FX (shared: landing + app)
   - Adaptive cursor light: bright on dark, dark tint on light
   - Click sparks
   JS (interactive.js) drives positions; tilt transforms set inline.
   All effects are motion — disabled for reduced-motion + touch.
   ============================================================ */

/* ---------- Adaptive cursor light (two blend layers) ---------- */
.cursor-fx {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.cursor-fx-glow,
.cursor-fx-dark {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 450ms var(--ease);
}
.cursor-fx.is-active .cursor-fx-glow,
.cursor-fx.is-active .cursor-fx-dark { opacity: 1; }

/* emerald aura — a soft bioluminescent light that follows the cursor
   across the cinematic night. Screen-blend so it only ever adds light. */
.cursor-fx-glow {
  mix-blend-mode: screen;
  background: radial-gradient(
    420px 420px at var(--mx, 50%) var(--my, 50%),
    rgba(53, 240, 160, 0.2),
    rgba(34, 199, 230, 0.12) 34%,
    rgba(34, 199, 230, 0.05) 55%,
    transparent 72%
  );
}
/* second, tighter core for a little extra intensity near the pointer */
.cursor-fx-dark {
  mix-blend-mode: screen;
  background: radial-gradient(
    180px 180px at var(--mx, 50%) var(--my, 50%),
    rgba(75, 255, 176, 0.14),
    transparent 68%
  );
}

/* ---------- Click sparks ---------- */
.fx-sparks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  overflow: hidden;
}
.spark {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  box-shadow: 0 0 10px 0 rgba(75, 255, 176, 0.55);
}

/* ---------- Disable all FX for calm / touch ---------- */
@media (prefers-reduced-motion: reduce) {
  .cursor-fx, .fx-sparks { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor-fx { display: none; }
}