/* ==========================================
   Portfolio Animations
========================================== */

/* Floating Profile Image */

.profile-image{

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

}

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* Gradient Animation */

.hero h1{

    background:linear-gradient(
        90deg,
        #38bdf8,
        #2563eb,
        #7c3aed,
        #38bdf8
    );

    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%;

}

}

/* Typing Cursor */

#typing::after{

content:"|";

animation:blink .8s infinite;

}

@keyframes blink{

0%{

opacity:1;

}

50%{

opacity:0;

}

100%{

opacity:1;

}

}

/* Buttons */

.btn{

transition:.35s;

}

.btn:hover{

transform:translateY(-5px);

}

/* Navbar */

.glass-nav{

animation:slideDown .8s;

}

@keyframes slideDown{

from{

transform:translateY(-100%);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

/* Fade Up */

.fade-up{

animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

0%{

transform:translateY(40px);

opacity:0;

}

100%{

transform:translateY(0);

opacity:1;

}

}

/* Fade Left */

.fade-left{

animation:fadeLeft 1s;

}

@keyframes fadeLeft{

from{

transform:translateX(-70px);

opacity:0;

}

to{

transform:translateX(0);

opacity:1;

}

}

/* Fade Right */

.fade-right{

animation:fadeRight 1s;

}

@keyframes fadeRight{

from{

transform:translateX(70px);

opacity:0;

}

to{

transform:translateX(0);

opacity:1;

}

}

/* Zoom */

.zoom{

animation:zoom .8s;

}

@keyframes zoom{

0%{

transform:scale(.7);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

/* Cards */

.card-glass{

position:relative;

overflow:hidden;

}

.card-glass::before{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:250%;

height:250%;

background:linear-gradient(

45deg,

transparent,

rgba(255,255,255,.12),

transparent

);

transform:rotate(30deg);

transition:.8s;

}

.card-glass:hover::before{

left:100%;

top:100%;

}

/* Counter Animation */

.counter{

animation:counterGlow 2s infinite alternate;

}

@keyframes counterGlow{

from{

text-shadow:0 0 8px #38bdf8;

}

to{

text-shadow:

0 0 25px #38bdf8,

0 0 45px #2563eb;

}

}

/* Hero Background */

.hero{

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

background:rgba(37,99,235,.15);

top:-220px;

right:-180px;

filter:blur(120px);

animation:blob1 10s infinite alternate;

}

.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(124,58,237,.18);

bottom:-180px;

left:-120px;

filter:blur(120px);

animation:blob2 12s infinite alternate;

}

@keyframes blob1{

from{

transform:translate(0,0);

}

to{

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

}

}

@keyframes blob2{

from{

transform:translate(0,0);

}

to{

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

}

}

/* Social Icons */

.social-icon{

transition:.4s;

}

.social-icon:hover{

transform:rotate(360deg) scale(1.2);

color:#38bdf8;

}

/* Scroll Indicator */

.scroll-down{

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}

/* Section Heading */

.section-title h2{

position:relative;

display:inline-block;

}

.section-title h2::after{

content:"";

position:absolute;

bottom:-12px;

left:50%;

transform:translateX(-50%);

width:80px;

height:4px;

border-radius:20px;

background:linear-gradient(

90deg,

#2563eb,

#7c3aed

);

}