/* Contenedor inicial con fondo desenfocado */
.grow {
    width: 100%;
    height: 100%;
    /* Ajusta el tamaño según tus necesidades */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(10px);
    /* Desenfoque inicial */
    transition: filter 1s ease;
    /* Transición suave para el desenfoque */
}

/* Imagen principal (oculta inicialmente) */
.grow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ajusta la imagen principal al contenedor */
    opacity: 0;
    /* Oculta la imagen al inicio */
    transform: scale(1.1);
    /* Ligeramente ampliada */
    transition: opacity 1s ease, transform 1s ease;
    /* Transiciones suaves */
}

/* Estado cuando la imagen entra en el viewport */
.grow.focused {
    filter: blur(0);
    /* Elimina el desenfoque del fondo */
}

.grow.focused img {
    opacity: 1;
    /* Muestra la imagen principal */
    transform: scale(1);
    /* Ajusta el zoom al tamaño normal */
}

/* Efecto Parallax */
.grow img.parallax {
    transform-origin: center;
    transition: none;
}