/* ==========================================================================
   MAGIA AL PASAR EL RATÓN (y al tocar en el móvil)
   Brillo dorado y leve cambio de color en botones, regalos y tarjetas; una luz
   cálida que sigue al cursor y una estela de destellos (magia.js).
   Se usa también en las páginas de adornos y de juegos.
   ========================================================================== */

@keyframes magia-encender {
  to {
    filter: brightness(1.12) saturate(1.22) drop-shadow(0 0 0.6rem rgba(255, 214, 120, 0.55));
  }
}

@media (hover: hover) and (pointer: fine) {
  :where(button, a[class], [role="button"], select, summary, label.switch,
         .menu-tile, .carol-card, .craft-card, .food-card, .curiosity-card, .notebook-index-card, .game-card):not(:disabled) {
    transition: filter 0.3s ease;
  }
  :where(button, a[class], [role="button"], select, summary, label.switch,
         .menu-tile, .carol-card, .craft-card, .food-card, .curiosity-card, .notebook-index-card, .game-card):not(:disabled):hover {
    animation: magia-encender 0.35s ease-out forwards;
  }
}

/* Luz que sigue al cursor sobre lo que se puede pulsar */
.magia-luz {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(255, 226, 160, 0.26) 0%, rgba(255, 210, 120, 0.1) 32%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}
.magia-luz.on { opacity: 1; }

/* Destellos: estrellas de cuatro puntas que se apagan al subir */
.magia-chispa {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--t, 8px);
  height: var(--t, 8px);
  margin: calc(var(--t, 8px) / -2) 0 0 calc(var(--t, 8px) / -2);
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, #fffdf3 0%, #ffe7a3 45%, #f2b84b 100%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 4px rgba(255, 210, 120, 0.9));
  animation: magia-chispa var(--d, 0.9s) ease-out forwards;
}
@keyframes magia-chispa {
  from { transform: translate(var(--x), var(--y)) scale(1) rotate(0deg); opacity: 1; }
  to   { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(0.15) rotate(90deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .magia-luz, .magia-chispa { display: none !important; }
  :where(button, a[class], [role="button"], select, summary, .menu-tile, .carol-card, .craft-card, .food-card, .curiosity-card, .notebook-index-card, .game-card):hover {
    animation: none !important;
  }
}