/* ==========================
   FLOATING BACKGROUND BLOBS
========================== */

.blob1{
    animation:blobFloat1 18s ease-in-out infinite;
}

.blob2{
    animation:blobFloat2 20s ease-in-out infinite;
}

.blob3{
    animation:blobFloat3 22s ease-in-out infinite;
}

@keyframes blobFloat1{

    0%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(80px,60px) scale(1.15);
    }

    100%{
        transform:translate(0,0) scale(1);
    }

}

@keyframes blobFloat2{

    0%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(-100px,80px) scale(.9);
    }

    100%{
        transform:translate(0,0) scale(1);
    }

}

@keyframes blobFloat3{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-70px,-70px);
    }

    100%{
        transform:translate(0,0);
    }

}

/* ==========================
   PROFILE IMAGE
========================== */

.profile-card{

    animation:profileFloat 6s ease-in-out infinite;

}

@keyframes profileFloat{

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

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

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

}

/* ==========================
   GLOW RING
========================== */

.glow-ring{

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

}

@keyframes ringPulse{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    50%{

        transform:scale(1.05);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.7;

    }

}

/* ==========================
   FLOATING TECH TAGS
========================== */

.tag1{

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

}

.tag2{

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

}

.tag3{

    animation:floatTag3 6s ease-in-out infinite;

}

.tag4{

    animation:floatTag4 4.5s ease-in-out infinite;

}

.tag5{

    animation:floatTag5 5.5s ease-in-out infinite;

}

@keyframes floatTag1{

    50%{

        transform:translateY(-12px);

    }

}

@keyframes floatTag2{

    50%{

        transform:translateY(15px);

    }

}

@keyframes floatTag3{

    50%{

        transform:translateX(-10px);

    }

}

@keyframes floatTag4{

    50%{

        transform:translateY(10px);

    }

}

@keyframes floatTag5{

    50%{

        transform:translateX(12px);

    }

}

/* ==========================
   HERO TEXT
========================== */

.left h1{

    animation:fadeUp .8s ease forwards;

}

.left p{

    animation:fadeUp 1.1s ease forwards;

}

.buttons{

    animation:fadeUp 1.4s ease forwards;

}

.terminal{

    animation:fadeUp .5s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.btn1,
.btn2,
.resume-btn{

    transition:all .35s ease;

}

.btn1:hover{

    transform:translateY(-5px) scale(1.03);

    box-shadow:
    0 0 25px #7f5cff,
    0 0 60px rgba(0,153,255,.4);

}

.btn2:hover{

    transform:translateY(-5px);

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

    box-shadow:
    0 0 25px rgba(255,255,255,.15);

}

.resume-btn:hover{

    transform:translateY(-5px);

}

/* ==========================
   NAVBAR LINKS
========================== */

nav ul li a{

    position:relative;

}

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#8b5cff;

    transition:.35s;

}

nav ul li a:hover::after{

    width:100%;

}

/* ==========================
   CARDS
========================== */

.skill-card,
.project-card,
.glass{

    transition:all .35s ease;

}

.skill-card:hover{

    transform:translateY(-10px);

}

.project-card:hover{

    transform:translateY(-12px);

}

.glass:hover{

    transform:translateY(-6px);

}

/* ==========================
   TERMINAL CURSOR
========================== */

.cursor{

    display:inline-block;

    width:10px;

    height:20px;

    background:#00ff8c;

    margin-left:4px;

    animation:blink 1s infinite;

}

@keyframes blink{

    50%{

        opacity:0;

    }

}

/* ==========================
   INPUT FOCUS
========================== */

input:focus,
textarea:focus{

    border:1px solid #8a6cff;

    box-shadow:
    0 0 20px rgba(123,60,255,.3);

}

/* ==========================
   SEND BUTTON
========================== */

.contact-card button{

    transition:.35s;

}

.contact-card button:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 25px rgba(123,60,255,.5);

}

/* ==========================
   SECTION REVEAL
========================== */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#060816;

}

::-webkit-scrollbar-thumb{

    background:#7b3cff;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0099ff;

}

/* ==========================
   SELECTION
========================== */

::selection{

    background:#7b3cff;

    color:white;

}
/* =====================================
GLITCH EFFECT
===================================== */

.glitch{

    animation:glitch .18s linear;

}

@keyframes glitch{

    0%{

        transform:translate(0);

    }

    20%{

        transform:translate(-2px,2px);

        color:#00ffff;

    }

    40%{

        transform:translate(2px,-2px);

        color:#ff00ff;

    }

    60%{

        transform:translate(-2px,0);

    }

    80%{

        transform:translate(2px,2px);

    }

    100%{

        transform:translate(0);

        color:#00ff8c;

    }

}