/*
 * cursor-magic.css
 * Magical cursor and touch sparkle effects.
 *
 * Desktop:
 * - cursor glow follows pointer
 * - small sparkle particles trail behind it
 *
 * Mobile:
 * - no custom cursor
 * - touch/click creates a short sparkle burst
 */

.cursor-magic-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-cursor);
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--sparkle-glow-size);
  height: var(--sparkle-glow-size);
  margin-left: calc(var(--sparkle-glow-size) / -2);
  margin-top: calc(var(--sparkle-glow-size) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 236, 196, 0.52), rgba(255, 174, 83, 0.22) 36%, transparent 72%);
  filter: blur(1px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) scale(1);
  transition: opacity var(--duration-base) var(--ease-standard);
  will-change: transform, opacity;
}

.cursor-glow.is-visible {
  opacity: 0.86;
}

.cursor-sparkle,
.touch-sparkle {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  margin-left: calc(var(--sparkle-size) / -2);
  margin-top: calc(var(--sparkle-size) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 18%, rgba(255, 222, 164, 0.88) 22% 42%, transparent 74%);
  box-shadow:
    0 0 10px rgba(255, 222, 164, 0.62),
    0 0 20px rgba(255, 141, 75, 0.28);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) scale(0.6);
  will-change: transform, opacity;
}

.cursor-sparkle.is-active {
  animation: cursorSparkleFade 700ms var(--ease-out) forwards;
}

.touch-sparkle {
  z-index: 3;
  width: clamp(6px, 2vw, 10px);
  height: clamp(6px, 2vw, 10px);
  margin-left: -4px;
  margin-top: -4px;
}

.touch-sparkle.is-active {
  animation: touchSparkleBurst 680ms var(--ease-out) forwards;
}

.touch-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border: 1px solid rgba(255, 222, 164, 0.72);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 174, 83, 0.22);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) scale(0.4);
}

.touch-ring.is-active {
  animation: touchRingFade 520ms var(--ease-out) forwards;
}

@keyframes cursorSparkleFade {
  0% {
    opacity: 0;
    transform: translate3d(var(--sparkle-x, 0), var(--sparkle-y, 0), 0) scale(0.45) rotate(0deg);
  }

  18% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--sparkle-x, 0) + var(--sparkle-dx, 0px)),
        calc(var(--sparkle-y, 0) + var(--sparkle-dy, -18px)),
        0
      )
      scale(0.1)
      rotate(90deg);
  }
}

@keyframes touchSparkleBurst {
  0% {
    opacity: 0;
    transform: translate3d(var(--sparkle-x, 0), var(--sparkle-y, 0), 0) scale(0.4);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--sparkle-x, 0) + var(--sparkle-dx, 0px)),
        calc(var(--sparkle-y, 0) + var(--sparkle-dy, 0px)),
        0
      )
      scale(0.15);
  }
}

@keyframes touchRingFade {
  0% {
    opacity: 0;
    transform: translate3d(var(--touch-x, 0), var(--touch-y, 0), 0) scale(0.25);
  }

  18% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--touch-x, 0), var(--touch-y, 0), 0) scale(2.8);
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-glow {
    display: none;
  }
}

@supports not (height: 100dvh) {
  .cursor-magic-layer {
    height: 100vh;
  }
}