/*
 * UPSEX.SHOP — PAGE TRANSITION LITE V6
 *
 * - View Transition nativa entre páginas.
 * - Entrada CSS como respaldo.
 * - Barra superior solo para navegaciones lentas.
 * - Sin overlay ni ocultamiento del body.
 */

/* Transición nativa entre documentos del mismo dominio. */
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: 300ms;
    animation-timing-function:
        cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(root) {
    animation:
        upsex-page-old-v6
        145ms
        ease-out
        both;

    mix-blend-mode: normal;
}

::view-transition-new(root) {
    animation:
        upsex-page-new-v6
        300ms
        cubic-bezier(.22, 1, .36, 1)
        both;

    mix-blend-mode: normal;
}

@keyframes upsex-page-old-v6 {
    from {
        opacity: 1;
    }

    to {
        opacity: .90;
    }
}

@keyframes upsex-page-new-v6 {
    from {
        opacity: .18;
        transform: translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/*
 * Respaldo para navegadores sin View Transition.
 * Anima únicamente el contenido, nunca el body completo.
 */
html.upsex-page-enter-v6 body #content,
html.upsex-page-enter-v6 body main {
    animation:
        upsex-page-fallback-v6
        300ms
        cubic-bezier(.22, 1, .36, 1)
        both;
}

@keyframes upsex-page-fallback-v6 {
    from {
        opacity: .42;
        transform: translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/*
 * En navegadores compatibles se usa la transición nativa,
 * evitando aplicar dos animaciones simultáneamente.
 */
@supports (view-transition-name: root) {
    html.upsex-page-enter-v6 body #content,
    html.upsex-page-enter-v6 body main {
        animation: none;
    }
}

/* ==========================================================
   INDICADOR DE NAVEGACIÓN
   ========================================================== */

#upsex-nav-progress-v6 {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    right: 0;
    left: 0;

    width: 100%;
    height: 3px;

    margin: 0;
    padding: 0;
    border: 0;

    pointer-events: none;

    opacity: 0;

    transform:
        translate3d(0, 0, 0)
        scaleX(.06);

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            #b40000 0%,
            #ed1c24 58%,
            #ff6b6b 100%
        );

    box-shadow:
        0 1px 7px
        rgba(180, 0, 0, .28);

    transition:
        opacity 110ms ease 380ms,
        transform 4000ms
            cubic-bezier(.12, .60, .20, 1)
            380ms;

    will-change:
        opacity,
        transform;
}

/*
 * La barra comienza después de 380 ms.
 * Una navegación rápida no muestra ningún destello.
 */
html.upsex-nav-pending-v6
#upsex-nav-progress-v6 {
    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scaleX(.86);
}

/* Finalización, en caso de permanecer en el documento. */
html.upsex-nav-finishing-v6
#upsex-nav-progress-v6 {
    opacity: 0;

    transform:
        translate3d(0, 0, 0)
        scaleX(1);

    transition:
        transform 150ms ease,
        opacity 170ms ease 70ms;
}

/* El loader antiguo permanece totalmente desactivado. */
html body #upsex-page-loader-v1 {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Accesibilidad. */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    html.upsex-page-enter-v6 body #content,
    html.upsex-page-enter-v6 body main {
        animation: none !important;
    }

    #upsex-nav-progress-v6 {
        transform: scaleX(1);
        transition:
            opacity 100ms ease 380ms;
    }
}