/**
 * @author Eduardo Espinoza
 * Reset Custom Background - Estilos de visualización con animación de carga
 */

/* Contenedor principal: Se fija al fondo de la sección del producto */
.product-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    pointer-events: none; /* Evita que interfiera con clics en el producto */
}

/* Estado inicial de la imagen (Invisible y estática) */
.product-background img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    
    /* Máscara de degradado para desvanecer el fondo hacia abajo */
    -webkit-mask-image: linear-gradient(to bottom, black 10%, rgba(0,0,0,0) 90%);
    mask-image: linear-gradient(to bottom, black 10%, rgba(0,0,0,0) 90%);
    mask-repeat: no-repeat;
    mask-size: cover;

    /* Configuración de animación */
    opacity: 0; 
    transform: scale(1);
    filter: blur(4px); /* Opcional: empieza un poco desenfocado */
    
    /* Transición suave para cuando se active la clase .bg-animate */
    transition: 
        transform 2s cubic-bezier(0.2, 1, 0.3, 1), 
        filter 2s ease-out, 
        opacity 2s ease-out;
    
    /* Optimización de rendimiento para PS8 */
    will-change: transform, opacity;
}

/* Estado Final (Activado por JS al terminar la carga) */
.product-background img.bg-animate {
    opacity: 0.6; /* Opacidad sutil para no opacar el producto principal */
    transform: scale(1.05); /* Efecto de zoom suave */
    filter: blur(0); /* Limpia el desenfoque */
}