/* ==========================================
   BASE
========================================== */

.animate{

    transition:
        all var(--animation-normal)
        var(--ease);

}

.animate-hover:hover{

    transform:translateY(-5px);

}
.fade-up{

    animation:
    fadeUp .8s both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(40px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}
.fade-down{

    animation:
    fadeDown .8s both;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:
        translateY(-40px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}
.fade-left{

    animation:
    fadeLeft .8s both;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
        translateX(-50px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}
.fade-right{

    animation:
    fadeRight .8s both;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:
        translateX(50px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}
.scale-in{

    animation:
    scaleIn .6s both;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
.float{

    animation:
    floating 4s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-8px);

    }

    100%{

        transform:
        translateY(0);

    }

}
.pulse{

    animation:
    pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}
.rotate-hover{

    transition:var(--transition);

}

.rotate-hover:hover{

    transform:rotate(8deg);

}
.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.4),

        transparent

    );

    transform:
    translateX(-120%);

    transition:.8s;

}

.shine:hover::before{

    transform:
    translateX(120%);

}
.stagger>*{

    opacity:0;

    animation:
    fadeUp .5s forwards;

}

.stagger>*:nth-child(1){

    animation-delay:.1s;

}

.stagger>*:nth-child(2){

    animation-delay:.2s;

}

.stagger>*:nth-child(3){

    animation-delay:.3s;

}

.stagger>*:nth-child(4){

    animation-delay:.4s;

}

.stagger>*:nth-child(5){

    animation-delay:.5s;

}

.stagger>*:nth-child(6){

    animation-delay:.6s;

}
.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}
.zoom{

    overflow:hidden;

}

.zoom img{

    transition:.6s;

}

.zoom:hover img{

    transform:scale(1.08);

}

@keyframes floatBlob{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* home hero */
/* =========================
   ANIMATION SUPPORT
========================= */

.fade-up{
    animation:fadeUp .8s ease both;
}


.fade-up{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{
    to{
        opacity:1;
        transform:translateY(0);
    }
}