/**
 * OS TigerLab — Page Transitions
 *
 * Estilos para View Transitions API (Chrome 111+, Safari 18+).
 * Browsers sin soporte ven una página estática (no hay degradación visual).
 *
 * Pseudo-elements (CSS Working Draft):
 *   ::view-transition                         → root
 *   ::view-transition-old(<name>)             → snapshot saliente
 *   ::view-transition-new(<name>)             → snapshot entrante
 *
 * Nombrado de elementos:
 *   <main id="main" style="view-transition-name: main-content">
 *   <header style="view-transition-name: site-header">
 *   <footer style="view-transition-name: site-footer">
 *
 * Default group: root crossfade.
 */

/* Cuando el browser SOPORTA y está animando */
::view-transition {
    pointer-events: none;
}

/* Crossfade del root (toda la página) */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    animation-name: ostl-fade-out;
}
::view-transition-new(root) {
    animation-name: ostl-fade-in;
}

/* Header & footer "persistentes" — se quedan en el lugar */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: none !important;
    mix-blend-mode: normal;
}

/* Main content — slide-x sutil */
::view-transition-old(main-content) {
    animation: ostl-slide-out-x 240ms cubic-bezier(0.5, 0, 0.75, 0) both;
}
::view-transition-new(main-content) {
    animation: ostl-slide-in-x 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Asignación de view-transition-name */
[data-vt-main] { view-transition-name: main-content; }
[data-vt-header] { view-transition-name: site-header; }
[data-vt-footer] { view-transition-name: site-footer; }

/* ============================================================ */
/* Keyframes                                                     */
/* ============================================================ */
@keyframes ostl-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes ostl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ostl-slide-out-x {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-12px); }
}
@keyframes ostl-slide-in-x {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Cuando navegamos hacia atrás (browser back), invertir slide-x */
[data-transitioning="back"] ::view-transition-old(main-content) {
    animation-name: ostl-slide-out-x-back;
}
[data-transitioning="back"] ::view-transition-new(main-content) {
    animation-name: ostl-slide-in-x-back;
}
@keyframes ostl-slide-out-x-back {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12px); }
}
@keyframes ostl-slide-in-x-back {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Reduce motion — sólo crossfade rápido */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(main-content),
    ::view-transition-new(main-content) {
        animation-duration: 80ms !important;
        animation-name: ostl-fade-in !important;
    }
    ::view-transition-old(root),
    ::view-transition-old(main-content) {
        animation-name: ostl-fade-out !important;
    }
}

[data-motion="off"] ::view-transition-old(root),
[data-motion="off"] ::view-transition-new(root) {
    animation-duration: 1ms !important;
}