/*=========================================================
    HP-EXAM-PRO
    ANIMATIONS.CSS
==========================================================*/

/*==================================================
    ANIMATION UTILITIES
==================================================*/

.animate{
    animation-duration:.8s;
    animation-fill-mode:both;
}

.animate-fast{
    animation-duration:.4s;
}

.animate-slow{
    animation-duration:1.2s;
}

.animate-delay-1{
    animation-delay:.2s;
}

.animate-delay-2{
    animation-delay:.4s;
}

.animate-delay-3{
    animation-delay:.6s;
}

.animate-delay-4{
    animation-delay:.8s;
}

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

.fade-in{
    animation-name:fadeIn;
}

.fade-out{
    animation-name:fadeOut;
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes fadeOut{
    from{
        opacity:1;
    }
    to{
        opacity:0;
    }
}

/*==================================================
    SLIDE
==================================================*/

.slide-up{
    animation:slideUp .7s ease both;
}

.slide-down{
    animation:slideDown .7s ease both;
}

.slide-left{
    animation:slideLeft .7s ease both;
}

.slide-right{
    animation:slideRight .7s ease both;
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes slideLeft{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(-40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

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

.zoom-in{
    animation:zoomIn .6s ease both;
}

.zoom-out{
    animation:zoomOut .6s ease both;
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes zoomOut{
    from{
        opacity:1;
        transform:scale(1);
    }
    to{
        opacity:0;
        transform:scale(.8);
    }
}

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

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

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

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

.pulse{
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(13,110,253,.4);
    }
    70%{
        transform:scale(1.05);
        box-shadow:0 0 0 12px rgba(13,110,253,0);
    }
    100%{
        transform:scale(1);
    }
}

/*==================================================
    BOUNCE
==================================================*/

.bounce{
    animation:bounce 1s;
}

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform:translateY(0);
    }
    40%{
        transform:translateY(-18px);
    }
    60%{
        transform:translateY(-9px);
    }
}

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

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

@keyframes rotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/*==================================================
    SHAKE
==================================================*/

.shake{
    animation:shake .5s;
}

@keyframes shake{
    0%,100%{
        transform:translateX(0);
    }
    20%,60%{
        transform:translateX(-6px);
    }
    40%,80%{
        transform:translateX(6px);
    }
}

/*==================================================
    RIPPLE
==================================================*/

.ripple{
    position:relative;
    overflow:hidden;
}

.ripple::after{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    transform:translate(-50%,-50%);
    opacity:0;
}

.ripple:active::after{
    width:220px;
    height:220px;
    opacity:1;
    transition:all .45s ease;
}

/*==================================================
    LOADER
==================================================*/

.spinner{
    width:40px;
    height:40px;
    border:4px solid var(--gray-300);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:rotate .8s linear infinite;
}

/*==================================================
    SKELETON
==================================================*/

.skeleton{
    position:relative;
    overflow:hidden;
    background:var(--gray-200);
}

.skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-100%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );
    animation:skeleton 1.4s infinite;
}

@keyframes skeleton{
    to{
        transform:translateX(100%);
    }
}

/*==================================================
    HOVER EFFECTS
==================================================*/

.hover-lift{
    transition:var(--transition);
}

.hover-lift:hover{
    transform:translateY(-8px);
}

.hover-scale{
    transition:var(--transition);
}

.hover-scale:hover{
    transform:scale(1.04);
}

.hover-rotate{
    transition:var(--transition);
}

.hover-rotate:hover{
    transform:rotate(3deg);
}

/*==================================================
    ACCESSIBILITY
==================================================*/

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

    *,
    *::before,
    *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}