/* Estado inicial: Cómo se ve el elemento antes de scrollear hasta él */
[data-aos="custom-fade-up"] {
    --scale: 1;
    --translateY: 15%;
    --duration: .6s;
    --delay: .3s;
    --blur: 0px;
    --grayscale: 0%;
    opacity: 0;
    filter: blur(var(--blur)) grayscale(var(--grayscale));
    transform: translateY(var(--translateY)) scale(var(--scale));
    transition-property: filter, transform, opacity;
    transition-duration: var(--duration) !important;
    transition-delay: var(--delay) !important;
}

/* Estado final: Cómo se ve cuando el elemento entra en el viewport */
[data-aos="custom-fade-up"].aos-animate {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) grayscale(0%);
}

/* custom-fade-zoom-in */
[data-aos="custom-fade-zoom-in"] {
    --scale: 1.2;
    --duration: .8s;
    --blur: 50px;
    /* grayscale ?? */
    --grayscale: 100%;
    --translateY: 20px;
    opacity: 0;
    filter: blur(var(--blur)) grayscale(var(--grayscale));
    transform: scale(var(--scale)) translateY(var(--translateY));
    transition-property: filter, transform, opacity;
    transition-duration: var(--duration) !important;
}

[data-aos="custom-fade-zoom-in"].aos-animate {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) grayscale(0%);
}


/* custom-zoom-in */
[data-aos="custom-zoom-in"] {
    /* 5 */
    --scale: 1;
    --duration: .8s;
    /* 20px */
    --blur: 50px;
    /* grayscale ?? */
    --grayscale: 100%;
    opacity: .5;
    filter: blur(var(--blur)) grayscale(var(--grayscale));
    transform: scale(var(--scale));
    transition-property: filter, transform, opacity;
    transition-duration: var(--duration) !important;
}

[data-aos="custom-zoom-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) grayscale(0%);
}



/* Make secuential inner elements delayed from x delay base */

/* Definimos un valor por defecto por si te olvidás de ponerlo en el HTML */
[data-aos="custom-fade-secuential"] {
    --delay-start: .3s;
    --scale: 1;
    --translateY: 150px;
    --duration: .6s;
}

/* Definimos el estado inicial de los hijos */
[data-aos="custom-fade-secuential"]>* {
    opacity: 0;
    transform: translateY(var(--translateY)) scale(var(--scale));
    transition-property: opacity, transform;
    transition-duration: var(--duration) !important;
    transition-delay: calc(var(--delay-start));
}

/* El estado final cuando el contenedor se activa */
[data-aos="custom-fade-secuential"].aos-animate>* {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* El "truco" de la secuencia usando nth-child */
[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(1) {
    transition-delay: calc(var(--delay-start) + 100ms);
}

[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(2) {
    transition-delay: calc(var(--delay-start) + 200ms);
}

[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(3) {
    transition-delay: calc(var(--delay-start) + 300ms);
}

[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(4) {
    transition-delay: calc(var(--delay-start) + 400ms);
}

[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(5) {
    transition-delay: calc(var(--delay-start) + 500ms);
}

[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(6) {
    transition-delay: calc(var(--delay-start) + 600ms);
}

[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(7) {
    transition-delay: calc(var(--delay-start) + 700ms);
}

[data-aos="custom-fade-secuential"].aos-animate>*:nth-child(8) {
    transition-delay: calc(var(--delay-start) + 800ms);
}