/* ===== Imagen base y overlay de iluminación ===== */

.auth-illustration {
    position: relative;
    overflow: hidden;
}
    /* por si el zoom se sale */
    .auth-illustration::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--bg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0; /* capa de imagen */
    }

    /* Barrido de luz diagonal sutil */
    .auth-illustration::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1; /* por encima de la imagen */
        mix-blend-mode: screen; /* ilumina sin tapar */
        background: linear-gradient( 115deg, rgba(255,255,255,0) 35%, rgba(88,133,255,.24) 50%, rgba(255,255,255,0) 65% );
        transform: translateX(-120%) skewX(-8deg);
        animation: vss-sweep 5.5s ease-in-out infinite;
        opacity: .75;
    }

/* Animación de barrido */
@keyframes vss-sweep {
    0% {
        transform: translateX(-120%) skewX(-8deg);
    }

    55% {
        transform: translateX(120%) skewX(-8deg);
    }

    100% {
        transform: translateX(120%) skewX(-8deg);
    }
}

/* ===== Profundidad (zoom-parallax) “respirando” ===== */

.auth-illustration::after {
    will-change: transform;
    transform-origin: center center;
    animation: vss-depth 5.5s ease-in-out infinite; /* <-- CAMBIO AQUI */
}

/* Leve pulso de brillo del overlay (opcional) */
.auth-illustration::before {
    will-change: transform, opacity;
    animation: vss-sweep 5.5s ease-in-out infinite, vss-glow 6.5s ease-in-out infinite;
}

/* Zoom respirando (parece que se acerca/aleja) */
@keyframes vss-depth {
    0% {
        transform: scale(1.03) translateZ(0);
    }

    50% {
        transform: scale(1.06) translateZ(0);
    }

    100% {
        transform: scale(1.03) translateZ(0);
    }
}

/* Pulso de brillo MUY sutil del haz */
@keyframes vss-glow {
    0% {
        opacity: .70;
    }

    50% {
        opacity: .85;
    }

    100% {
        opacity: .70;
    }
}

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .auth-illustration::after {
        animation: none;
    }

    .auth-illustration::before {
        animation: none;
        opacity: .6;
    }
}

/* Hover: un toque más vivo sin romper layout */
@media (hover:hover) {
    .auth-illustration:hover::after {
        animation-duration: 6.5s;
    }

    .auth-illustration:hover::before {
        animation-duration: 4.8s, 5.4s;
    }
}