/* ============================================================
   PIXEL ÉTINCELLE — CURSEUR ÉTINCELLE
   Remplace le curseur par une étincelle animée aux couleurs de
   la marque, uniquement sur pointeur précis (souris) et si
   l'utilisateur n'a pas demandé de réduire les animations.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  body.has-spark-cursor,
  body.has-spark-cursor a,
  body.has-spark-cursor button,
  body.has-spark-cursor [role="button"] {
    cursor: none;
  }
}

.spark-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: var(--z-top);
  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: transform;
}
.spark-cursor.is-visible { opacity: 1; }

.spark-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
  animation: spark-spin 5s linear infinite, spark-pulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(246, 160, 73, 0.75)) drop-shadow(0 0 16px rgba(229, 18, 35, 0.45));
}

.spark-cursor.is-active svg {
  animation-duration: 1.6s, 0.7s;
}

.spark-trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pe-orange);
  pointer-events: none;
  z-index: calc(var(--z-top) - 1);
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes spark-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spark-pulse {
  0%, 100% { transform: scale(0.85) rotate(var(--r, 0deg)); }
  50% { transform: scale(1.05) rotate(var(--r, 0deg)); }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .spark-cursor, .spark-trail { display: none !important; }
  body.has-spark-cursor { cursor: auto; }
}