/* Estado inicial: Cómo se ve el elemento antes de scrollear hasta él */
[data-aos="custom"] {

    --opacity: 0;
    --delay: .2s;
    --delay-out: .2s;
    --scale: 1;
    --translateX: 0;
    --translateY: 15%;
    --duration: .8s;
    --duration-out: .8s;
    --blur: 0px;
    --grayscale: 0%;

    opacity: var(--opacity);
    filter: blur(var(--blur)) grayscale(var(--grayscale));
    transform: translate3d(var(--translateX), var(--translateY), 0) scale(var(--scale));
    transition-property: filter, transform, opacity;
    transition-duration: var(--duration-out) !important;
    transition-delay: var(--delay-out) !important;

}

[data-aos="custom"].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) grayscale(0%);
    transition-duration: var(--duration) !important;
    transition-delay: var(--delay) !important;
}


[data-aos="secuential"] {
    --delay-start: var(--aos-delay-start, 0.15s);
    --delay-step: 120ms;
    --translateY: 30px;
    --scale: 1;
    --duration: 0.6s;
}

/* Selecciona los items asignados */
[data-aos="secuential"]>*,
[data-aos="secuential"] form>.form-group {
    opacity: 0;
    transform: translateY(var(--translateY)) scale(var(--scale));
    transition-property: opacity, transform;
    transition-duration: var(--duration) !important;
    transition-delay: calc(var(--delay-start) + (var(--i, 1) - 1) * var(--delay-step));
}

[data-aos="secuential"].aos-animate>*,
[data-aos="secuential"].aos-animate form>.form-group {
    opacity: 1;
    transform: translateY(0) scale(1);
}