/*
 * UPSEX SCROLL REVEAL LITE V5
 * Solo opacity + transform.
 * Sin blur, filtros, loader ni ocultamiento del body.
 */

/* Elementos completos: secciones, módulos y tarjetas. */
.upsex-reveal-lite-v5 {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 480ms cubic-bezier(.22,.61,.36,1),
        transform 560ms cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--upsex-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.upsex-reveal-lite-v5.upsex-reveal-visible-v5 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/*
 * Imágenes lazy:
 * permanecen transparentes mientras el navegador termina de descargarlas.
 * Cuando disparan el evento load, aparecen completas y suavemente.
 */
html.upsex-motion-lite-v5-js
#content img[loading="lazy"]:not(.upsex-image-loaded-v5),

html.upsex-motion-lite-v5-js
main img[loading="lazy"]:not(.upsex-image-loaded-v5) {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(.995);
    transition:
        opacity 300ms ease,
        transform 420ms cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;

    /*
     * Seguridad:
     * aunque el JS externo fuera bloqueado, la imagen nunca permanece oculta.
     */
    animation:
        upsex-image-failsafe-v5 1ms linear 4s forwards;
}

html.upsex-motion-lite-v5-js
#content img[loading="lazy"].upsex-image-loaded-v5,

html.upsex-motion-lite-v5-js
main img[loading="lazy"].upsex-image-loaded-v5 {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    animation: none;
    will-change: auto;
}

@keyframes upsex-image-failsafe-v5 {
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Movimiento más compacto en pantallas pequeñas. */
@media screen and (max-width: 767px) {
    .upsex-reveal-lite-v5 {
        transform: translate3d(0, 14px, 0);
        transition-duration: 420ms, 500ms;
    }

    .upsex-reveal-lite-v5.upsex-reveal-visible-v5 {
        transform: translate3d(0, 0, 0);
    }
}

/* Respeta accesibilidad y ahorro de movimiento. */
@media (prefers-reduced-motion: reduce) {
    .upsex-reveal-lite-v5,
    .upsex-reveal-lite-v5.upsex-reveal-visible-v5,

    html.upsex-motion-lite-v5-js
    #content img[loading="lazy"],

    html.upsex-motion-lite-v5-js
    main img[loading="lazy"] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}