/* ==========================================================
   PRIMEVAULT ANIMATIONS
========================================================== */

/* ==========================================================
   GLOBAL TRANSITIONS
========================================================== */

a,
button,
input,
textarea,
img{
    transition:all .35s ease;
}

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

.float{
    animation:float 4s ease-in-out infinite;
}

@keyframes float{

    0%{transform:translateY(0);}

    50%{transform:translateY(-12px);}

    100%{transform:translateY(0);}

}

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

.rotate{
    animation:rotate 8s linear infinite;
}

@keyframes rotate{

    from{transform:rotate(0deg);}

    to{transform:rotate(360deg);}

}

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

.pulse{
    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{transform:scale(1);}

    50%{transform:scale(1.05);}

    100%{transform:scale(1);}

}

/* ==========================================================
   BUTTON HOVER
========================================================== */

.btn-hover:hover{

    transform:translateY(-4px);

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

}

/* ==========================================================
   IMAGE HOVER
========================================================== */

.image-hover{

    overflow:hidden;

}

.image-hover img{

    transition:transform .5s ease;

}

.image-hover:hover img{

    transform:scale(1.08);

}

/* ==========================================================
   LINK HOVER
========================================================== */

.link-hover{

    position:relative;

}

.link-hover::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:var(--accent);

    transition:width .3s ease;

}

.link-hover:hover::after{

    width:100%;

}

/* ==========================================================
   SPINNER
========================================================== */

.spinner{

    width:45px;

    height:45px;

    border:4px solid #eee;

    border-top:4px solid var(--accent);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    visibility:hidden;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}

/* FADE UP */

.reveal.fade-up{

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}

/* FADE DOWN */

.reveal.fade-down{

    transform:translateY(-40px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}

/* FADE LEFT */

.reveal.fade-left{

    transform:translateX(-40px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}

/* FADE RIGHT */

.reveal.fade-right{

    transform:translateX(40px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}

/* SCALE */

.reveal.scale{

    transform:scale(.95);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}

/* ZOOM */

.reveal.zoom{

    transform:scale(.85);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}

/* ACTIVE */

.reveal.active{

    opacity:1;

    visibility:visible;

    transform:none;

}

/* ==========================================================
   DELAYS
========================================================== */

.delay-1{transition-delay:.1s;}

.delay-2{transition-delay:.2s;}

.delay-3{transition-delay:.3s;}

.delay-4{transition-delay:.4s;}

.delay-5{transition-delay:.5s;}

.delay-6{transition-delay:.6s;}


/* ==========================================================
   FAQ REVEAL
========================================================== */

.reveal-faq{

    opacity:0;

    transition:opacity .8s ease;

}

.reveal-faq.active{

    opacity:1;

}