/* ----------------------------------------- Soulmix - Transición entre páginas ----------------------------------------- Dos paneles que suben desde abajo, escalonados: primero el claro (--pt-color-1) y detrás el oscuro (--pt-color-2), que queda cubriendo la pantalla con el logo centrado. Al cargar la página nueva los mismos paneles siguen subiendo hacia arriba hasta salir del viewport. ----------------------------------------- */ :root { --pt-color-1: #FAF9F2; --pt-color-2: #1F1E1D; --pt-duration: 560ms; --pt-stagger: 90ms; /* El logo entra SOLAPADO con el panel que aún sube, no después: si espera a que el panel se detenga, se percibe una pausa entre "se ha tapado" y "aparece el logo". */ --pt-logo-duration: 300ms; --pt-logo-delay: 200ms; /* Easing de entrada (ease-out puro): arranca rápido y llega al final con la velocidad ya casi consumida, así el momento de cubrir no se lee como un frenazo. Un ease-in-out como el anterior acelera en el medio y clava el final, que es justo lo que se notaba como parón. */ --pt-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* Al destapar interesa lo contrario: salir ganando velocidad. */ --pt-ease-out: cubic-bezier(0.55, 0, 0.55, 0.2); } .page-transition { position: fixed; inset: 0; z-index: 9999; pointer-events: none; /* Oculto por completo mientras no haya navegación en curso, para que no intercepte nada ni se pinte en el primer render. */ visibility: hidden; } .page-transition__panel { position: absolute; inset: 0; /* Un pelo más alto que el viewport: evita que el subpíxel del easing deje una línea del fondo asomando por el borde inferior. */ height: 100.5%; transform: translateY(100%); will-change: transform; } .page-transition__panel--1 { background-color: var(--pt-color-1); } .page-transition__panel--2 { background-color: var(--pt-color-2); } .page-transition__logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* El logo NO se desplaza con el panel: un translateY(100%) aquí sería sobre la altura del propio contenedor, no del viewport, así que llegaría al centro más tarde que el panel oscuro. Aparece en su sitio con fade + un pequeño empuje hacia arriba. */ opacity: 0; color: var(--pt-color-1); will-change: transform, opacity; } .page-transition__logo svg { width: clamp(120px, calc(185 / 1920 * 100vw), 260px); height: auto; } /* --- Salida: los paneles entran cubriendo la pantalla --------------------- */ .page-transition.is-leaving { visibility: visible; } .page-transition.is-leaving .page-transition__panel--1 { animation: pt-cover var(--pt-duration) var(--pt-ease) forwards; } .page-transition.is-leaving .page-transition__panel--2 { animation: pt-cover var(--pt-duration) var(--pt-ease) var(--pt-stagger) forwards; } .page-transition.is-leaving .page-transition__logo { /* Entra ya con el panel oscuro cubriendo (de ahí el retardo mayor) y en menos tiempo, para que se lea antes de que el navegador cambie de página. */ animation: pt-logo-in var(--pt-logo-duration) var(--pt-ease) var(--pt-logo-delay) forwards; } /* Puesto por el JS en el , antes de que exista el overlay en el DOM: pinta el color oscuro sobre todo para que no se vea ni un frame de la página nueva destapada mientras se monta el overlay. */ html.is-page-transitioning:not(.is-overlay-ready) body::before { content: ''; position: fixed; inset: 0; z-index: 9998; background-color: var(--pt-color-2); pointer-events: none; } /* --- Entrada: los paneles siguen subiendo y descubren la página nueva ----- */ .page-transition.is-entering { visibility: visible; } .page-transition.is-entering .page-transition__panel--1 { /* El claro va delante también al salir, por eso se retrasa: destapa la página después de que el oscuro se haya ido. */ transform: translateY(0); animation: pt-uncover var(--pt-duration) var(--pt-ease-out) var(--pt-stagger) forwards; } .page-transition.is-entering .page-transition__panel--2 { transform: translateY(0); animation: pt-uncover var(--pt-duration) var(--pt-ease-out) forwards; } .page-transition.is-entering .page-transition__logo { /* Al destapar se va primero el logo, y después los paneles. */ opacity: 1; animation: pt-logo-out var(--pt-logo-duration) var(--pt-ease) forwards; } @keyframes pt-cover { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes pt-uncover { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes pt-logo-in { from { transform: translateY(24px) scale(0.94); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes pt-logo-out { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-24px) scale(0.94); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .page-transition { display: none; } }