/* ============================================================
   CardEffects — estilos.
   Las capas (.card-fx) se posicionan absolutamente sobre el
   contenedor padre, sin interferir con su layout.
   ============================================================ */

.card-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --- Glow ---
   El JS rota las custom properties --card-fx-glow-c1/c2/c3 cuando
   la paleta tiene más de 3 colores; el keyframe sólo pulsa el tamaño.
   Las props se registran como <color> para poder interpolarlas, y una
   transition (ligada al periodo de rotación vía --card-fx-glow-period)
   hace que el cambio de color sea un crossfade suave en vez de un salto. */
@property --card-fx-glow-c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}
@property --card-fx-glow-c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}
@property --card-fx-glow-c3 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffffff;
}

.card-fx-glow {
  animation: card-fx-glow-pulse 2s ease-in-out infinite;
  transition:
    --card-fx-glow-c1 var(--card-fx-glow-period, 660ms) linear,
    --card-fx-glow-c2 var(--card-fx-glow-period, 660ms) linear,
    --card-fx-glow-c3 var(--card-fx-glow-period, 660ms) linear;
}

@keyframes card-fx-glow-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 12px var(--card-fx-glow-c1, #fff))
      drop-shadow(0 0 24px var(--card-fx-glow-c2, #fff))
      drop-shadow(0 0 36px var(--card-fx-glow-c3, #fff));
  }
  50% {
    filter:
      drop-shadow(0 0 18px var(--card-fx-glow-c1, #fff))
      drop-shadow(0 0 32px var(--card-fx-glow-c2, #fff))
      drop-shadow(0 0 48px var(--card-fx-glow-c3, #fff));
  }
}

/* --- Snake (canvas, sólo z-index) --- */
.card-fx-snake {
  z-index: 4;
}

/* --- Unicorn (canvas, sólo z-index) --- */
.card-fx-unicorn {
  z-index: 4;
}