/* ========================================================================= URRETA — Transiciones de pantalla (CSS) ------------------------------------------------------------------------- Dos piezas y dos momentos. PIEZAS. El header (.topbar + .navbar) vive fuera de
; todo lo demás —incluido el sello vertical— vive dentro. Así el header se puede dejar quieto mientras el contenido entra y sale. PRIMERA CARGA. El header entra como un bloque (no se anima ni un solo enlace: se mueve la barra entera) y detrás aparece el contenido. Son animaciones CSS con `animation-fill-mode: backwards`: el estado inicial ya está puesto en el primer pintado —no hay destello— y al terminar cada elemento vuelve a su CSS, sin relleno que pise después a la transición de salida. ENTRE PANTALLAS. Al pulsar un enlace interno, js/animaciones.js pone `u-saliendo` en : el contenido se funde a cero y recién entonces navega. La pantalla siguiente llega marcada con `u-interna` (bandera de sessionStorage que escribe el antes de pintar), y con ella el header NO vuelve a entrar: ya está ahí, idéntico, y sólo aparece el contenido. El header parece no haberse movido nunca. REGLA DE LA CASA. A `.contenido` sólo se le toca la opacidad, nunca un transform ni un filter: dentro hay `position: fixed` (.sello-seccion) y varios `position: sticky` (.banda-track, .continuidad__titulo-track) que un transform en el ancestro rompería. La opacidad no crea bloque contenedor. ========================================================================= */ /* ---------- Tiempos propios de la transición ---------- */ :root { --tp-header: 620ms; /* entrada del header, primera carga */ --tp-entrada: 620ms; /* entrada del contenido, primera carga */ --tp-espera: 200ms; /* el contenido entra tras el header */ --tp-salida: 300ms; /* fundido de salida entre pantallas */ } /* ---------- Primera carga ---------- */ @keyframes u-header-entra { from { opacity: 0; transform: translateY(-0.75rem); } to { opacity: 1; transform: translateY(0); } } @keyframes u-aparece { from { opacity: 0; } to { opacity: 1; } } .topbar, .navbar { animation: u-header-entra var(--tp-header) var(--e-entrada) backwards; } .contenido { animation: u-aparece var(--tp-entrada) var(--e-suave) var(--tp-espera) backwards; } /* En celular el header sólo se funde: el panel del menú es `position: fixed` dentro de .navbar, y un transform en la barra —aunque dure medio segundo— lo anclaría a ella en vez de al viewport. */ @media (max-width: 479px) { .topbar, .navbar { animation-name: u-aparece; animation-duration: 450ms; } } /* ---------- Llegada por transición interna ---------- */ /* El header ya estaba en pantalla: se queda como está y sólo entra el contenido, un poco más rápido y sin espera. */ html.u-interna .topbar, html.u-interna .navbar { animation: none; } html.u-interna .contenido { animation-duration: 420ms; animation-delay: 0s; } /* ---------- Salida hacia otra pantalla ---------- */ /* Sin `will-change`: .contenido es toda la pantalla (17.000 px de alto en la home) y promocionarla de forma permanente cuesta más de lo que ahorra. El navegador ya crea la capa por su cuenta mientras dura el fundido. */ .contenido { transition: opacity var(--tp-salida) var(--e-suave); } html.u-saliendo .contenido { animation: none; /* por si aún corría la entrada */ opacity: 0; } /* ---------- Quien pide menos movimiento ---------- */ @media (prefers-reduced-motion: reduce) { .topbar, .navbar, .contenido { animation: none; transition: none; } html.u-saliendo .contenido { opacity: 1; } }