/* Módulo LRC — estilos */

/* El botón "Letra" usa la clase del Design System
   `mdd-player-overlay__lyrics-btn` (`assets/styles/mdd.css`), incluido su
   estado activo (`aria-pressed="true"`: papel/carbón, VIK-347). La
   recolocación del reproductor en modo karaoke
   (`.mdd-player-overlay--lyrics`) también vive allí; aquí solo la zona de
   letra, que es contenido de este módulo. */

/* ---- Zona de letra (modo karaoke, VIK-347; modo lista, VIK-355) ----------- */
.lrc-karaoke { display: none; }

.mdd-player-overlay--lyrics .lrc-karaoke {
    /* Absoluta respecto a `.mdd-player-overlay__layout` (relative): ocupa el
       hueco sobre la tarjeta de controles. `--lrc-card-h` lo mide
       `lrc_controller.js` (ResizeObserver sobre `__main`); 200px/260px son
       solo el valor de respaldo hasta la primera medida. Para que `bottom`
       se resuelva contra `__layout` ningún ancestro intermedio puede crear
       bloque contenedor (transform/filter/backdrop-filter...). */
    position: absolute; inset: 0 var(--space-4) calc(var(--lrc-card-h, 200px) + var(--space-4));
    display: flex; flex-direction: column; justify-content: center;
    min-height: 0; text-align: center; color: var(--heading);
    container-type: size;
    /* La zona nunca se come los clics de la tarjeta: solo la lista, el
       respaldo en texto plano y el botón reciben puntero. */
    pointer-events: none;
}
.lrc-karaoke__lines, .lrc-karaoke__plain {
    margin: 0 auto; width: min(960px, 100%); max-height: 100%; overflow-y: auto; scrollbar-width: none;
    pointer-events: auto;
}
.lrc-karaoke__lines::-webkit-scrollbar, .lrc-karaoke__plain::-webkit-scrollbar { display: none; }
.lrc-karaoke__lines[hidden], .lrc-karaoke__plain[hidden] { display: none; }

/* Modo lista: la letra completa con scroll y todas las líneas del mismo
   tamaño (la lista no salta al cambiar de línea). El relleno en bloque
   (≈ media zona) permite centrar la primera y la última línea.
   `position: relative` para que `offsetTop` se mida contra la lista. */
.lrc-karaoke__lines {
    position: relative; list-style: none; flex: 1 1 auto; min-height: 0; margin-block: 0; padding: 50cqh 0;
    display: flex; flex-direction: column; gap: var(--space-5);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.lrc-karaoke__line {
    margin: 0; font-size: 44px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
    /* Estados por color y no por `opacity`: la línea actual pinta el relleno
       con `background-clip: text` y la opacidad lo apagaría. */
    color: color-mix(in srgb, var(--heading) 60%, transparent);
    cursor: pointer; border-radius: var(--radius-md);
}
.lrc-karaoke__line:focus-visible { outline: 2px solid var(--heading); outline-offset: 4px; }
.lrc-karaoke__line.is-past { color: color-mix(in srgb, var(--heading) 38%, transparent); }
.lrc-karaoke__line.is-current {
    /* Parte ya cantada en blanco, el resto atenuado; `--progress` lo escribe
       `lrc_controller.js` (interpolación lineal entre marcas de línea). */
    color: transparent;
    background: linear-gradient(to right, var(--heading) var(--progress, 0%),
                color-mix(in srgb, var(--heading) 45%, transparent) var(--progress, 0%));
    -webkit-background-clip: text; background-clip: text;
}

/* Botón «Sincronizar»: píldora abajo a la derecha de la zona; la zona ya
   termina `--space-4` por encima de la tarjeta de controles. */
.lrc-karaoke__sync {
    position: absolute; right: 0; bottom: 0; pointer-events: auto;
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 44px; padding: 0 var(--space-5); border: 0; border-radius: 999px;
    background: var(--primary); color: var(--on-primary); font-weight: 700;
    box-shadow: var(--shadow-md); cursor: pointer;
}
.lrc-karaoke__sync[hidden] { display: none; }
.lrc-karaoke__sync:focus-visible { outline: 2px solid var(--heading); outline-offset: 3px; }

/* Respaldo en texto plano: sin relleno, con scroll. */
.lrc-karaoke__plain { padding: var(--space-4) 0; }
.lrc-karaoke__note {
    display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4);
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.lrc-karaoke__plain-text { margin: 0; white-space: pre-line; font-size: 24px; line-height: 1.6; color: var(--heading); }

@container mdd-overlay (max-width: 599.98px) {
    .mdd-player-overlay--lyrics .lrc-karaoke {
        inset: 0 var(--space-3) calc(var(--lrc-card-h, 260px) + var(--space-4));
    }
    .lrc-karaoke__lines { gap: var(--space-4); }
    .lrc-karaoke__line { font-size: 28px; overflow-wrap: anywhere; }
    .lrc-karaoke__plain-text { font-size: 18px; }
}

/* Sin relleno progresivo: la línea actual entera en blanco. */
@media (prefers-reduced-motion: reduce) {
    .lrc-karaoke__line.is-current { color: var(--heading); background: none; }
}