/* ============================================================
   EFECTOS DE TÍTULO Y DE TARJETA
   Este archivo es idéntico en el sitio y en el panel, para que la
   vista previa del panel sea exactamente lo que verá el visitante.
   ============================================================ */

/* ---------- Efecto continuo del título ---------- */

.fx-idle-none { animation: none !important; background-position: 24% 50% !important; }

/* sheen: el degradado recorre las letras (animación `sheen` del sitio) */

.fx-idle-shimmer {
  animation: none !important;
  background-image: linear-gradient(
    100deg,
    var(--accent-1) 0%, var(--accent-1) 38%,
    #ffffff 46%, #ffffff 52%,
    var(--accent-2) 60%, var(--accent-2) 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: fx-shimmer 5.5s var(--ease-inout, ease-in-out) infinite !important;
}
@keyframes fx-shimmer {
  0%, 12% { background-position: 130% 50%; }
  55%, 100% { background-position: -30% 50%; }
}

.fx-idle-pulse {
  animation: fx-pulse 4.5s ease-in-out infinite !important;
}
@keyframes fx-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); background-position: 10% 50%; }
  50% {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent-glow) 55%, transparent));
    background-position: 60% 50%;
  }
}

.fx-idle-flicker { animation: fx-flicker 7s steps(1) infinite !important; }
@keyframes fx-flicker {
  0%, 42%, 45%, 51%, 100% { opacity: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-glow) 45%, transparent)); }
  43% { opacity: 0.45; filter: none; }
  46%, 50% { opacity: 0.8; filter: none; }
  47% { opacity: 0.3; filter: none; }
}

.fx-idle-hue { animation: fx-hue 12s linear infinite !important; }
@keyframes fx-hue {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

/* ---------- Efecto del título al pasar el cursor ---------- */

@media (hover: hover) and (pointer: fine) {
  .fx-hover-neon:hover {
    background-image: linear-gradient(100deg, #f7ecff 0%, #d9a6ff 30%, #ffffff 52%, #c98cff 74%, #efd9ff 100%) !important;
    filter: drop-shadow(0 0 2px rgba(244, 226, 255, 0.95))
            drop-shadow(0 0 10px rgba(214, 160, 255, 0.9))
            drop-shadow(0 0 30px rgba(184, 116, 255, 0.7))
            drop-shadow(0 0 66px rgba(150, 80, 255, 0.4)) !important;
  }

  .fx-hover-gold:hover {
    background-image: linear-gradient(100deg, #fff6e2 0%, #ffcf7a 30%, #ffffff 52%, #ffb14d 74%, #ffe9c0 100%) !important;
    filter: drop-shadow(0 0 2px rgba(255, 246, 226, 0.95))
            drop-shadow(0 0 10px rgba(255, 190, 100, 0.9))
            drop-shadow(0 0 30px rgba(255, 150, 40, 0.6))
            drop-shadow(0 0 66px rgba(255, 120, 0, 0.35)) !important;
  }

  .fx-hover-storm:hover {
    background-image: linear-gradient(100deg, #ffffff 0%, #dbe9ff 40%, #ffffff 60%, #c9d8ff 100%) !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1))
            drop-shadow(0 0 18px rgba(190, 215, 255, 0.9))
            drop-shadow(0 0 50px rgba(120, 170, 255, 0.55)) !important;
    animation: fx-storm 0.5s steps(2) 1 !important;
  }
  @keyframes fx-storm {
    0% { transform: translateX(0); opacity: 1; }
    20% { transform: translateX(-2px); opacity: 0.5; }
    40% { transform: translateX(2px); opacity: 1; }
    60% { transform: translateX(-1px); opacity: 0.7; }
    100% { transform: none; opacity: 1; }
  }

  .fx-hover-solid:hover {
    background-image: linear-gradient(var(--accent-glow), var(--accent-glow)) !important;
    animation: none !important;
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent-glow) 45%, transparent)) !important;
  }

  /* El contorno necesita que el relleno sea transparente de verdad,
     así que aquí se abandona el recorte del degradado. */
  .fx-hover-outline:hover {
    background-image: none !important;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.2px var(--accent-glow);
    animation: none !important;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent-glow) 40%, transparent)) !important;
  }

  .fx-hover-chroma:hover {
    filter: drop-shadow(2px 0 0 rgba(255, 60, 120, 0.75))
            drop-shadow(-2px 0 0 rgba(60, 200, 255, 0.75))
            drop-shadow(0 0 20px color-mix(in srgb, var(--accent-glow) 35%, transparent)) !important;
    animation-duration: 2.4s !important;
  }

  .fx-hover-grow:hover {
    transform: scale(1.035);
    transform-origin: left center;
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--accent-glow) 55%, transparent)) !important;
  }

  .fx-hover-none:hover { filter: none !important; }
}

/* ---------- Efecto de la tarjeta ---------- */

.song-card.fx-card-none:hover { transform: none; box-shadow: var(--shadow-2); }

.song-card.fx-card-glow:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--accent-glow) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-glow) 30%, transparent),
              0 20px 70px -20px color-mix(in srgb, var(--accent-2) 75%, transparent);
}

.song-card.fx-card-zoom:hover { transform: none; }
.song-card.fx-card-zoom:hover .song-cover img { transform: scale(1.14); }

.song-card.fx-card-border { position: relative; }
.song-card.fx-card-border::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, var(--accent-1), var(--accent-2), var(--accent-glow), var(--accent-1));
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.song-card.fx-card-border:hover { transform: none; }
.song-card.fx-card-border:hover::after { opacity: 1; animation: fx-border 3s linear infinite; }
@keyframes fx-border { to { background-position: 300% 50%; } }

.song-card.fx-card-shine { overflow: hidden; }
.song-card.fx-card-shine::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.16) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none; z-index: 3;
}
.song-card.fx-card-shine:hover::before { transform: translateX(130%); }

.song-card.fx-card-tilt { transform-style: preserve-3d; }
.song-card.fx-card-tilt:hover {
  transform: perspective(900px) rotateX(4deg) rotateY(-5deg) translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  [class*="fx-idle-"], [class*="fx-hover-"], [class*="fx-card-"] { animation: none !important; }
}