/**
 * ==================================================
 * ANIMATIONS
 * Francesco Cugini Theme
 * Design System v1.0
 * ==================================================
 */


/*==================================================
FADE IN
==================================================*/

.fade-in{

    opacity:0;

    animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*==================================================
FADE UP
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
FADE DOWN
==================================================*/

.fade-down{

    opacity:0;

    transform:translateY(-40px);

    animation:fadeDown .8s ease forwards;

}

@keyframes fadeDown{

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
FADE LEFT
==================================================*/

.fade-left{

    opacity:0;

    transform:translateX(-40px);

    animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*==================================================
FADE RIGHT
==================================================*/

.fade-right{

    opacity:0;

    transform:translateX(40px);

    animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/*==================================================
ZOOM IN
==================================================*/

.zoom-in{

    opacity:0;

    transform:scale(.9);

    animation:zoomIn .8s ease forwards;

}

@keyframes zoomIn{

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*==================================================
FLOAT
==================================================*/

.float{

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

}

@keyframes float{

    0%,
    100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

}


/*==================================================
PULSE
==================================================*/

.pulse{

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


/*==================================================
ROTATE
==================================================*/

.rotate{

    animation:rotate 18s linear infinite;

}

@keyframes rotate{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
HOVER LIFT
==================================================*/

.hover-lift{

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.hover-lift:hover{

    transform:translateY(-6px);

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

}


/*==================================================
HOVER ZOOM
==================================================*/

.hover-zoom{

    overflow:hidden;

}

.hover-zoom img{

    transition:transform .7s ease;

}

.hover-zoom:hover img{

    transform:scale(1.08);

}


/*==================================================
UNDERLINE
==================================================*/

.hover-underline{

    position:relative;

}

.hover-underline::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--color-gold);

    transition:width var(--transition);

}

.hover-underline:hover::after{

    width:100%;

}


/*==================================================
STAGGER
==================================================*/

.delay-1{

    animation-delay:.15s;

}

.delay-2{

    animation-delay:.3s;

}

.delay-3{

    animation-delay:.45s;

}

.delay-4{

    animation-delay:.6s;

}

.delay-5{

    animation-delay:.75s;

}


/*==================================================
REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}