/* =========================================================
   DHE Studio - Animations Stylesheet
========================================================= */

/* =========================================================
   GLOBAL ANIMATION VARIABLES
========================================================= */

:root{

    --animation-fast:0.3s;
    --animation-normal:0.6s;
    --animation-slow:1s;

    --ease-default:ease;
    --ease-smooth:cubic-bezier(0.4,0,0.2,1);

}

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

.fade-in{

    animation:fadeIn var(--animation-normal) var(--ease-smooth) forwards;

}

.fade-in-up{

    opacity:0;

    animation:fadeInUp 0.9s var(--ease-smooth) forwards;

}

.fade-in-down{

    opacity:0;

    animation:fadeInDown 0.9s var(--ease-smooth) forwards;

}

.fade-in-left{

    opacity:0;

    animation:fadeInLeft 0.9s var(--ease-smooth) forwards;

}

.fade-in-right{

    opacity:0;

    animation:fadeInRight 0.9s var(--ease-smooth) forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeInUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeInDown{

    from{

        opacity:0;
        transform:translateY(-60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeInLeft{

    from{

        opacity:0;
        transform:translateX(-60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes fadeInRight{

    from{

        opacity:0;
        transform:translateX(60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

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

.zoom-in{

    animation:zoomIn 0.8s ease forwards;

}

.zoom-out{

    animation:zoomOut 0.8s ease forwards;

}

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(0.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:0;
        transform:scale(1.2);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/* =========================================================
   FLOATING EFFECT
========================================================= */

.floating{

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

}

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

.pulse{

    animation:pulseEffect 2s infinite;

}

@keyframes pulseEffect{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}

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

.rotate{

    animation:rotate360 10s linear infinite;

}

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,
    20%,
    50%,
    80%,
    100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-18px);

    }

    60%{

        transform:translateY(-10px);

    }

}

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

.shake:hover{

    animation:shake 0.5s;

}

@keyframes shake{

    0%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-5px);
    }

    50%{
        transform:translateX(5px);
    }

    75%{
        transform:translateX(-5px);
    }

    100%{
        transform:translateX(0);
    }

}

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

.btn-animate{

    position:relative;
    overflow:hidden;

}

.btn-animate::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:rgba(255,255,255,0.2);

    transition:0.6s;

}

.btn-animate:hover::before{

    left:100%;

}

/* =========================================================
   CARD HOVER EFFECT
========================================================= */

.hover-lift{

    transition:0.4s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,0.12);

}

.hover-scale{

    overflow:hidden;

}

.hover-scale img{

    transition:0.5s ease;

}

.hover-scale:hover img{

    transform:scale(1.08);

}

/* =========================================================
   TEXT GRADIENT ANIMATION
========================================================= */

.gradient-text{

    background:linear-gradient(
        90deg,
        #1E3A5F,
        #D6B36A,
        #1E3A5F
    );

    background-size:300%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:gradientMove 6s linear infinite;

}

@keyframes gradientMove{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

/* =========================================================
   LINE ANIMATION
========================================================= */

.line-animation{

    position:relative;
    display:inline-block;

}

.line-animation::after{

    content:'';

    position:absolute;

    left:0;
    bottom:-5px;

    width:0;
    height:3px;

    background:var(--secondary-color);

    transition:0.5s ease;

}

.line-animation:hover::after{

    width:100%;

}

/* =========================================================
   BLINK EFFECT
========================================================= */

.blink{

    animation:blinkEffect 1.5s infinite;

}

@keyframes blinkEffect{

    0%{
        opacity:1;
    }

    50%{
        opacity:0.3;
    }

    100%{
        opacity:1;
    }

}

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

.slide-loop{

    animation:slideLoop 18s linear infinite;

}

@keyframes slideLoop{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-100%);

    }

}

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

.spinner{

    width:55px;
    height:55px;

    border:5px solid rgba(0,0,0,0.1);
    border-top:5px solid var(--primary-color);

    border-radius:50%;

    animation:spinLoader 1s linear infinite;

}

@keyframes spinLoader{

    100%{

        transform:rotate(360deg);

    }

}

/* =========================================================
   GLASSMORPHISM EFFECT
========================================================= */

.glass-effect{

    background:rgba(255,255,255,0.15);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.2);

}

/* =========================================================
   HERO BACKGROUND ANIMATION
========================================================= */

.hero-bg-animation{

    position:absolute;

    width:600px;
    height:600px;

    background:radial-gradient(
        circle,
        rgba(214,179,106,0.2),
        transparent 70%
    );

    border-radius:50%;

    animation:heroMove 8s infinite alternate ease-in-out;

}

@keyframes heroMove{

    0%{

        transform:translate(0,0);

    }

    100%{

        transform:translate(80px,-40px);

    }

}

/* =========================================================
   IMAGE REVEAL EFFECT
========================================================= */

.image-reveal{

    position:relative;
    overflow:hidden;

}

.image-reveal img{

    transform:scale(1.1);

    animation:imageReveal 1.2s ease forwards;

}

@keyframes imageReveal{

    to{

        transform:scale(1);

    }

}

/* =========================================================
   DELAY UTILITIES
========================================================= */

.delay-1{
    animation-delay:0.2s;
}

.delay-2{
    animation-delay:0.4s;
}

.delay-3{
    animation-delay:0.6s;
}

.delay-4{
    animation-delay:0.8s;
}

.delay-5{
    animation-delay:1s;
}

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

.reveal{

    opacity:0;
    transform:translateY(60px);

    transition:1s all ease;

}

.reveal.active{

    opacity:1;
    transform:translateY(0);

}

/* =========================================================
   TYPEWRITER EFFECT
========================================================= */

.typewriter{

    overflow:hidden;

    border-right:3px solid var(--secondary-color);

    white-space:nowrap;

    animation:
        typing 4s steps(40,end),
        blinkCursor 0.75s step-end infinite;

}

@keyframes typing{

    from{
        width:0;
    }

    to{
        width:100%;
    }

}

@keyframes blinkCursor{

    from,
    to{
        border-color:transparent;
    }

    50%{
        border-color:var(--secondary-color);
    }

}

/* =========================================================
   ICON HOVER ROTATE
========================================================= */

.icon-rotate:hover i{

    transform:rotate(15deg) scale(1.15);

}

.icon-rotate i{

    transition:0.4s ease;

}

/* =========================================================
   BACKGROUND SHIMMER
========================================================= */

.shimmer{

    position:relative;
    overflow:hidden;

}

.shimmer::before{

    content:'';

    position:absolute;

    top:0;
    left:-150%;

    width:100%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.4),
        transparent
    );

    animation:shimmerMove 2.5s infinite;

}

@keyframes shimmerMove{

    100%{

        left:150%;

    }

}

/* =========================================================
   RESPONSIVE ANIMATIONS
========================================================= */

@media(max-width:768px){

    .floating{

        animation:none;

    }

    .hero-bg-animation{

        width:300px;
        height:300px;

    }

}