/* ==========================================================
   animations.css — Sistema de animaciones del reproductor
   JS solo añade/quita clases CSS. Sin estilos inline.
   ========================================================== */

/* ── Transiciones del bloque de texto ────────────────────── */

/* Estado: entrando */
.vs-text-block.text-enter {
    opacity: 0;
    transform: translateY(16px);
}

/* Estado: activo (visible) */
.vs-text-block.text-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--vs-anim-duration, 400ms) ease,
                transform var(--vs-anim-duration, 400ms) ease;
}

/* Estado: saliendo */
.vs-text-block.text-exit {
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity var(--vs-anim-duration, 400ms) ease,
                transform var(--vs-anim-duration, 400ms) ease;
}

/* ── Variantes de animación (seleccionables desde el admin) ─ */

/* FADE: solo opacidad */
.vs-anim-fade .vs-text-block.text-enter { transform: none; }
.vs-anim-fade .vs-text-block.text-exit  { transform: none; }

/* SCALE: crece desde pequeño */
.vs-anim-scale .vs-text-block.text-enter {
    opacity: 0;
    transform: scale(0.94);
}
.vs-anim-scale .vs-text-block.text-exit {
    opacity: 0;
    transform: scale(1.04);
}

/* SLIDE-UP: deslizar hacia arriba */
.vs-anim-slide-up .vs-text-block.text-enter {
    opacity: 0;
    transform: translateY(32px);
}
.vs-anim-slide-up .vs-text-block.text-exit {
    opacity: 0;
    transform: translateY(-32px);
}

/* SLIDE-LEFT: deslizar horizontal */
.vs-anim-slide-left .vs-text-block.text-enter {
    opacity: 0;
    transform: translateX(32px);
}
.vs-anim-slide-left .vs-text-block.text-exit {
    opacity: 0;
    transform: translateX(-32px);
}

/* POP: escala con rebote */
.vs-anim-pop .vs-text-block.text-active {
    transition: opacity calc(var(--vs-anim-duration, 400ms) * 0.6) ease,
                transform calc(var(--vs-anim-duration, 400ms) * 0.6) cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vs-anim-pop .vs-text-block.text-enter {
    opacity: 0;
    transform: scale(0.85);
}

/* SOFT: muy suave, solo opacidad */
.vs-anim-soft .vs-text-block.text-active {
    transition: opacity calc(var(--vs-anim-duration, 400ms) * 1.5) ease;
}
.vs-anim-soft .vs-text-block.text-enter  { opacity: 0; transform: none; }
.vs-anim-soft .vs-text-block.text-exit   { opacity: 0; transform: none; }

/* KARAOKE: sin transición de bloque, solo palabras */
.vs-anim-karaoke .vs-text-block.text-enter  { opacity: 1; transform: none; }
.vs-anim-karaoke .vs-text-block.text-exit   { opacity: 0; transform: none; }
.vs-anim-karaoke .vs-text-block.text-active { opacity: 1; transform: none; transition: none; }

/* ── Animación de palabra activa ─────────────────────────── */

.vs-word {
    transition:
        color 0.08s ease,
        transform 0.08s ease;
    transform-origin: bottom center;
}

.vs-word.word-active {
    /* Color y escala ya definidos en player.css via CSS custom props */
    /* Se puede agregar glow aquí */
    text-shadow:
        0 0 16px var(--vs-color-active, #FFD400),
        var(--vs-text-shadow, rgba(0,0,0,0.8) 0 2px 8px);
}

/* Furigana hereda el color de la palabra */
.vs-word.word-active .vs-furigana {
    color: var(--vs-color-active, #FFD400);
}

.vs-word.word-done .vs-furigana {
    color: var(--vs-color-after, #ffffff);
}

/* ── Transición de imagen de fondo ───────────────────────── */

/* La transición base (crossfade) ya está en player.css */
/* Variante zoom: además de fade, escala ligeramente */
.vs-bg {
    transform: scale(1);
    transition:
        opacity var(--vs-anim-duration, 400ms) ease,
        transform 8s ease;  /* Zoom lento decorativo */
}

.vs-bg--active {
    transform: scale(1.03);
}

/* ── Accesibilidad: reducir movimiento ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vs-text-block,
    .vs-text-block.text-enter,
    .vs-text-block.text-active,
    .vs-text-block.text-exit,
    .vs-word,
    .vs-bg {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}