/*=========================================
    BLINK LAB
    animations.css
==========================================*/

/* Fade In Up */

.fade-up{
    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;
}

.fade-up.active{
    opacity:1;
    transform:translateY(0);
}


/* Fade Left */

.fade-left{
    opacity:0;
    transform:translateX(-60px);
    transition:all .8s ease;
}

.fade-left.active{
    opacity:1;
    transform:translateX(0);
}


/* Fade Right */

.fade-right{
    opacity:0;
    transform:translateX(60px);
    transition:all .8s ease;
}

.fade-right.active{
    opacity:1;
    transform:translateX(0);
}


/* Zoom */

.zoom{
    opacity:0;
    transform:scale(.9);
    transition:.8s;
}

.zoom.active{
    opacity:1;
    transform:scale(1);
}


/* Floating Animation */

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

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


/* Glow Pulse */

@keyframes glow{

    0%{

        box-shadow:
        0 0 15px rgba(91,95,255,.2);

    }

    50%{

        box-shadow:
        0 0 40px rgba(91,95,255,.45);

    }

    100%{

        box-shadow:
        0 0 15px rgba(91,95,255,.2);

    }

}

.glow{

    animation:glow 3s infinite;

}


/* Hero Gradient */

@keyframes heroGradient{

    0%{

        background-position:left;

    }

    100%{

        background-position:right;

    }

}


/* Button Shine */

.btn-primary{

    overflow:hidden;
    position:relative;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transition:.8s;

}

.btn-primary:hover::before{

left:140%;

}


/* Cards Hover */

.card,
.project,
.price-card{

transition:.4s;

}

.card:hover,
.project:hover,
.price-card:hover{

transform:translateY(-10px);

}


/* Scale Hover */

.scale{

transition:.3s;

}

.scale:hover{

transform:scale(1.04);

}


/* Rotate Hover */

.rotate{

transition:.4s;

}

.rotate:hover{

transform:rotate(2deg);

}


/* Image Hover */

.project-image{

transition:.5s;

}

.project:hover .project-image{

transform:scale(1.06);

}


/* Hero Logo */

.hero-logo{

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

}


/* Aurora */

.background-gradient{

animation:

aurora 18s ease infinite;

background-size:300% 300%;

}

@keyframes aurora{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/* Loader */

#loader{

animation:

loaderDisappear .8s ease 1.8s forwards;

}

@keyframes loaderDisappear{

to{

opacity:0;

visibility:hidden;

}

}


/* Navbar */

.navbar{

transition:.35s;

}


/* Button Click */

.btn-primary:active{

transform:scale(.96);

}


/* Smooth Reveal */

.reveal{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.reveal.show{

opacity:1;

transform:translateY(0);

}


/* Hero Circle */

.hero-circle{

animation:

floating 7s ease-in-out infinite,

glow 5s infinite;

}


/* Border Glow */

.border-glow{

position:relative;

}

.border-glow::after{

content:"";

position:absolute;

inset:-1px;

border-radius:inherit;

padding:1px;

background:

linear-gradient(

135deg,

#5B5FFF,

#00D9FF,

#5B5FFF

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:.35;

pointer-events:none;

}


/* Mouse Light */

.mouse-light{

position:fixed;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(91,95,255,.14),

transparent 70%);

pointer-events:none;

z-index:-1;

filter:blur(20px);

transition:.08s;

}


/* Text Gradient */

.gradient-text{

background:

linear-gradient(

135deg,

#ffffff,

#7C7CFF,

#00D9FF

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


/* Blur Glass */

.glass{

backdrop-filter:blur(20px);

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

}


/* Cursor Hover */

.cursor-hover{

transition:.25s;

}

.cursor-hover:hover{

letter-spacing:1px;

}


/* Infinite Rotation */

@keyframes rotate360{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

.rotate360{

animation:rotate360 25s linear infinite;

}


/* Scroll Indicator */

@keyframes scrollDown{

0%{

transform:translateY(0);

opacity:0;

}

30%{

opacity:1;

}

100%{

transform:translateY(25px);

opacity:0;

}

}

.scroll-indicator{

animation:scrollDown 2s infinite;

}