/* ════════════════════════════════════════════════════════════════════════════
   TRANSICIONES DE VISTA — SÓLO EL CURSO

   POR QUÉ ESTE FICHERO EXISTE APARTE Y NO SE IMPORTA DESDE main.css

   `@view-transition` es una regla de DOCUMENTO, no de selector: no se puede
   acotar a `.curso-*`. Si viviera en main.css la heredarían las catorce páginas
   de la landing, y navegar de index.html a pricing.html empezaría a
   desvanecerse. Eso es cambiar el comportamiento de la landing, que en esta
   rama no se toca.

   Por eso lo carga base.njk con un <link> propio y sólo cuando la sección es el
   curso. Es la única excepción a "el estilo se importa desde main.css", y está
   aquí escrita para que nadie la deshaga por limpieza.

   QUÉ HACE Y QUÉ NO

   La transición es cross-document: la navegación sigue siendo real, de un
   documento servido al siguiente, con su URL y su HTML completo. Sólo se
   suaviza el corte. Si el navegador no la soporta, la navegación es la de
   siempre y no falta nada.
   ════════════════════════════════════════════════════════════════════════════ */

@view-transition {
    navigation: auto;
}

/* El cuerpo del documento entra y sale con un desplazamiento corto; el índice
   lateral NO se anima: es el elemento que da continuidad entre sesiones y verlo
   moverse en cada salto lo desmiente. */
::view-transition-group(curso-temario) {
    animation: none;
}

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation-duration: var(--duration-fast);
        animation-timing-function: var(--ease-standard);
    }

    ::view-transition-new(root) {
        animation-duration: var(--duration-base);
        animation-timing-function: var(--ease-decelerate);
    }
}

/* Sin movimiento: corte limpio, cero animación. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}