/* ==========================
   GOOGLE FONT
========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}
body{
    background:linear-gradient(
        -45deg,
        #08111f,
        #0f172a,
        #111827,
        #1e1b4b
    );

    background-size:400% 400%;

    animation:gradientMove 15s ease infinite;

    color:#fff;

    overflow-x:hidden;
}

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

.navbar{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:90%;
    max-width:1200px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 35px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:50px;

    z-index:1000;
}

.logo{
    font-size:28px;
    font-weight:700;
}

.logo span{
    color:#38bdf8;
}

.nav-links{
    display:flex;
    list-style:none;
    gap:35px;
}

.nav-links a{
    text-decoration:none;
    color:white;
    transition:.3s;
}

.nav-links a:hover{
    color:#38bdf8;
}

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

.hero{
    min-height:100vh;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:120px 8%;
}

.hero-left{
    width:50%;
}

.hero-right{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}

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

.hello{
    color:#38bdf8;
    font-size:22px;
    margin-bottom:15px;
}

.hero h1{
    font-size:70px;
    margin-bottom:15px;
}

.hero h1 span{
    color:#38bdf8;
}

.hero h2{
    font-size:30px;
    color:#cbd5e1;
    margin-bottom:20px;
}

.description{
    color:#94a3b8;
    line-height:1.8;
    margin-bottom:40px;
}

/* ==========================
   BUTTONS
========================== */

.buttons{
    display:flex;
    gap:20px;
}

.btn{
    text-decoration:none;
    padding:15px 35px;
    border-radius:40px;
    font-weight:600;
    transition:.3s;
}

.primary{
    background:#8b5cf6;
    color:#fff;
}

.primary:hover{
    transform:translateY(-5px);
}

.secondary{
    border:2px solid #38bdf8;
    color:#38bdf8;
}

.secondary:hover{
    background:#38bdf8;
    color:#08111f;
}

/* ==========================
   ROBOT
========================== */

.robot-container{
    position:relative;
    width:500px;
    height:600px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.robot-container::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(59,130,246,.55),
        rgba(139,92,246,.25),
        transparent 75%);
    filter:blur(20px);
    animation:pulseGlow 4s ease-in-out infinite;
}

.robot{
    width:340px;
    position:relative;
    z-index:5;
    animation:robotFloat 5s ease-in-out infinite;
    filter:drop-shadow(0 0 40px #38bdf8);
}

/* ==========================
   RINGS
========================== */

.ring{
    position:absolute;
    border-radius:50%;
    border:2px solid rgba(56,189,248,.35);
    animation:rotateRing 15s linear infinite;
}

.ring1{
    width:320px;
    height:320px;
}

.ring2{
    width:420px;
    height:420px;
    animation-duration:20s;
}

.ring3{
    width:520px;
    height:520px;
    animation-duration:28s;
}

/* ==========================
   BLOBS
========================== */

.background-blobs{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-2;
}

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:.4;
    animation:floatBlob 10s ease-in-out infinite;
}

.blob1{
    width:400px;
    height:400px;
    background:#8b5cf6;
    top:-100px;
    left:-100px;
}

.blob2{
    width:350px;
    height:350px;
    background:#2563eb;
    right:-100px;
    bottom:-100px;
}

.blob3{
    width:280px;
    height:280px;
    background:#06b6d4;
    top:45%;
    left:45%;
}

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

@keyframes robotFloat{
    0%{transform:translateY(0);}
    50%{transform:translateY(-20px);}
    100%{transform:translateY(0);}
}

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

@keyframes floatBlob{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(40px,-30px);
    }
    100%{
        transform:translate(0,0);
    }
}
@keyframes pulseGlow{

    0%{
        transform:scale(1);
        opacity:.7;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }

    100%{
        transform:scale(1);
        opacity:.7;
    }

}
/* ==========================
   FLOATING TECH ICONS
========================== */

.tech-icon{
    position:absolute;
    width:60px;
    height:60px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);

    display:flex;
    justify-content:center;
    align-items:center;

    color:#38bdf8;
    font-size:28px;

    animation:floatIcon 4s ease-in-out infinite;
    z-index:20;
}

.tech-icon.python{
    top:40px;
    left:40px;
}

.tech-icon.github{
    top:120px;
    right:30px;
    animation-delay:1s;
}

.tech-icon.brain{
    bottom:120px;
    left:30px;
    animation-delay:2s;
}

.tech-icon.code{
    bottom:40px;
    right:40px;
    animation-delay:3s;
}

@keyframes floatIcon{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}
/* ==========================
   ANIMATED BACKGROUND
========================== */

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}
/* ==========================
   FLOATING PARTICLES
========================== */


.particles{

    position:fixed;
    inset:0;

    overflow:hidden;

    z-index:-1;

}


.particles span{

    position:absolute;

    width:8px;
    height:8px;

    background:#38bdf8;

    border-radius:50%;

    box-shadow:
    0 0 15px #38bdf8,
    0 0 30px #38bdf8;

    animation:particleMove 10s linear infinite;

}


/* positions */

.particles span:nth-child(1){
    left:10%;
    top:80%;
    animation-duration:12s;
}


.particles span:nth-child(2){
    left:25%;
    top:20%;
    animation-duration:8s;
}


.particles span:nth-child(3){
    left:40%;
    top:70%;
    animation-duration:15s;
}


.particles span:nth-child(4){
    left:60%;
    top:30%;
    animation-duration:11s;
}


.particles span:nth-child(5){
    left:75%;
    top:80%;
    animation-duration:14s;
}


.particles span:nth-child(6){
    left:85%;
    top:40%;
    animation-duration:9s;
}


.particles span:nth-child(7){
    left:50%;
    top:90%;
    animation-duration:13s;
}


.particles span:nth-child(8){
    left:15%;
    top:50%;
    animation-duration:10s;
}



@keyframes particleMove{


    0%{

        transform:
        translateY(0)
        scale(1);

        opacity:0;

    }


    50%{

        opacity:1;

    }


    100%{

        transform:
        translateY(-600px)
        scale(.5);

        opacity:0;

    }

}
/* ==========================
   ABOUT SECTION
========================== */


.about{

    min-height:80vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:80px 8%;

}


.about-card{


    width:900px;

    padding:50px;


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


    backdrop-filter:blur(20px);


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


    border-radius:30px;


    text-align:center;


    box-shadow:
    0 0 40px rgba(56,189,248,.15);


}



.about-card h2{


    font-size:45px;

    margin-bottom:25px;

    color:#38bdf8;

}



.about-card p{


    color:#cbd5e1;

    line-height:1.8;

    font-size:18px;

}



.about-info{


    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:40px;

    flex-wrap:wrap;


}



.about-info div{


    width:150px;

    padding:25px;


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


    border-radius:20px;


    transition:.3s;


}



.about-info div:hover{


    transform:translateY(-10px);


    box-shadow:
    0 0 25px rgba(56,189,248,.5);


}



.about-info h3{


    font-size:28px;

    color:#8b5cf6;


}



.about-info span{


    color:#94a3b8;


}
.about{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:90px;

    padding:100px 8%;

}



.about-photo{

    width:35%;

}



.photo-ring{

    width:330px;

    height:330px;

    padding:8px;

    border-radius:50%;

    background:linear-gradient(
    45deg,
    #38bdf8,
    #8b5cf6
    );

    box-shadow:
    0 0 60px rgba(56,189,248,.5);

}



.photo-ring img{

    width:100%;

    height:100%;

    border-radius:50%;

    object-fit:cover;

    border:8px solid #08111f;

}




.about-details{

    width:50%;

}



.section-tag{

    color:#38bdf8;

    font-size:22px;

}



.about-details h2{

    font-size:55px;

}



.about-details h3{

    color:#8b5cf6;

}



.about-description{

    color:#cbd5e1;

    line-height:1.8;

    margin:20px 0;

}




.personal-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}



.personal-info > div{

    display:flex;

    gap:15px;

    padding:15px;

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

    border-radius:15px;

    backdrop-filter:blur(15px);

}



.personal-info i{

    color:#38bdf8;

    font-size:22px;

}



.personal-info h4{

    color:white;

}



.personal-info p{

    color:#94a3b8;

}





.skills{

    margin:30px 0;

}



.skills span{

    display:inline-block;

    padding:10px 18px;

    margin:5px;

    border-radius:20px;

    background:rgba(56,189,248,.15);

    color:#38bdf8;

}
.personal-info a{

    color:#38bdf8;

    text-decoration:none;

    transition:.3s;

}


.personal-info a:hover{

    color:#8b5cf6;

}


/*=========================================
            CONTACT SECTION
=========================================*/

.contact{
    padding:80px 8% 120px;
    position:relative;
    z-index:1;
}

.contact-wrapper{
    max-width:1000px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:50px;
    align-items:start;
}

@media (max-width: 800px){
    .contact-wrapper{
        grid-template-columns:1fr;
    }
}

.contact-lead{
    color:#94a3b8;
    line-height:1.7;
    margin-bottom:30px;
    font-size:15px;
}

.contact-item{
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:22px;
}

.contact-item i{
    color:#38bdf8;
    font-size:20px;
    margin-top:4px;
}

.contact-item h4{
    color:#fff;
    font-size:15px;
    margin-bottom:4px;
}

.contact-item p{
    color:#94a3b8;
    font-size:14px;
}

.contact-item a{
    color:#94a3b8;
    text-decoration:none;
    transition:.3s;
}

.contact-item a:hover{
    color:#38bdf8;
}

.contact-socials{
    display:flex;
    gap:14px;
    margin-top:30px;
}

.contact-socials a{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#38bdf8;
    font-size:18px;
    transition:.3s;
}

.contact-socials a:hover{
    transform:translateY(-4px);
    background:#38bdf8;
    color:#08111f;
    box-shadow:0 0 20px rgba(56,189,248,.5);
}

.contact-form{
    background:rgba(21,27,47,.55);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    padding:35px;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    color:#cbd5e1;
    font-size:13px;
    margin-bottom:8px;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:12px 16px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:14px;
    outline:none;
    transition:.3s;
    resize:vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
    color:#64748b;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#38bdf8;
    box-shadow:0 0 0 3px rgba(56,189,248,.15);
}

.form-submit{
    width:100%;
    border:none;
    cursor:pointer;
    font-family:'Poppins',sans-serif;
}

/*=========================================
            EDUCATION SECTION
=========================================*/

.education{
    padding:100px 8% 60px;
    position:relative;
    z-index:1;
}

.education-timeline{
    max-width:700px;
    margin:0 auto;
    position:relative;
    padding-left:30px;
}

.education-timeline::before{
    content:"";
    position:absolute;
    left:6px;
    top:8px;
    bottom:8px;
    width:2px;
    background:linear-gradient(180deg,#38bdf8,#8b5cf6);
    opacity:.5;
}

.edu-card{
    position:relative;
    margin-bottom:35px;
}

.edu-card:last-child{
    margin-bottom:0;
}

.edu-dot{
    position:absolute;
    left:-30px;
    top:6px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#38bdf8;
    box-shadow:0 0 12px #38bdf8;
    border:3px solid #08111f;
}

.edu-content{
    background:rgba(21,27,47,.55);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:22px 26px;
    transition:.35s ease;
}

.edu-content:hover{
    transform:translateX(6px);
    border-color:rgba(56,189,248,.4);
    box-shadow:0 0 25px rgba(56,189,248,.15);
}

.edu-content h3{
    color:#fff;
    font-size:18px;
    margin-bottom:6px;
}

.edu-place{
    color:#94a3b8;
    font-size:14px;
    margin-bottom:14px;
}

.edu-meta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.edu-year{
    padding:5px 14px;
    border-radius:14px;
    font-size:12px;
    color:#8b5cf6;
    border:1px solid rgba(139,92,246,.4);
    background:rgba(139,92,246,.08);
}

.edu-score{
    padding:5px 14px;
    border-radius:14px;
    font-size:12px;
    color:#38bdf8;
    border:1px solid rgba(56,189,248,.4);
    background:rgba(56,189,248,.08);
}

@media (max-width: 600px){
    .education-timeline{
        padding-left:24px;
    }
    .edu-content{
        padding:18px 20px;
    }
}

/*=========================================
            CERTIFICATIONS SECTION
=========================================*/

.certifications{
    padding:60px 8% 60px;
    position:relative;
    z-index:1;
}

.cert-grid{
    max-width:900px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

@media (max-width: 700px){
    .cert-grid{
        grid-template-columns:1fr;
    }
}

.cert-card{
    position:relative;
    background:rgba(21,27,47,.55);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    padding:26px 24px;
    transition:.35s ease;
}

.cert-card:hover{
    transform:translateY(-6px);
    border-color:rgba(56,189,248,.4);
    box-shadow:0 15px 30px rgba(0,0,0,.3), 0 0 25px rgba(56,189,248,.15);
}

.cert-badge{
    display:inline-block;
    padding:5px 14px;
    border-radius:14px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:14px;
}

.cert-badge.gold{
    color:#fbbf24;
    background:rgba(251,191,36,.12);
    border:1px solid rgba(251,191,36,.4);
}

.cert-badge.elite{
    color:#f87171;
    background:rgba(248,113,113,.12);
    border:1px solid rgba(248,113,113,.4);
}

.cert-card h3{
    color:#fff;
    font-size:17px;
    margin-bottom:8px;
    line-height:1.4;
}

.cert-issuer{
    color:#94a3b8;
    font-size:13px;
    margin-bottom:16px;
}

.cert-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.cert-score{
    padding:5px 13px;
    border-radius:14px;
    font-size:12px;
    color:#38bdf8;
    border:1px solid rgba(56,189,248,.4);
    background:rgba(56,189,248,.08);
}

.cert-date{
    padding:5px 13px;
    border-radius:14px;
    font-size:12px;
    color:#8b5cf6;
    border:1px solid rgba(139,92,246,.4);
    background:rgba(139,92,246,.08);
}

/*=========================================
            PROJECTS SECTION LAYOUT
=========================================*/

.projects{
    padding:100px 8% 80px;
    position:relative;
    z-index:1;
}

.section-heading{
    text-align:center;
    margin-bottom:45px;
}

.section-heading p{
    color:#38bdf8;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:14px;
    margin-bottom:8px;
}

.section-heading h2{
    color:#fff;
    font-size:38px;
}

.projects-grid{
    max-width:900px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    justify-items:center;
}

@media (max-width: 900px){
    .projects-grid{
        grid-template-columns:1fr;
    }
}

/*=========================================
            PROJECTS CARD
=========================================*/

/*=============================
   GLASSMORPHISM UPGRADE
=============================*/

.project-card{
    position:relative;
    width:360px;
    max-width:100%;
    overflow:hidden;

    background:rgba(21,27,47,.55);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);

    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);

    transition:transform .5s ease, box-shadow .5s ease;
    box-shadow:
        0 8px 32px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.06);

    z-index:1;

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

    /* enable 3D tilt via JS */
    transform-style:preserve-3d;
    will-change:transform;
}

.project-card.reveal{
    animation:cardEntrance .8s ease forwards;
}

.projects-grid .project-card:nth-child(1){ animation-delay:.1s; }
.projects-grid .project-card:nth-child(2){ animation-delay:.25s; }
.projects-grid .project-card:nth-child(3){ animation-delay:.4s; }
.projects-grid .project-card:nth-child(4){ animation-delay:.55s; }

@keyframes cardEntrance{
    to{ opacity:1; transform:translateY(0); }
}

/* subtle glass highlight along top edge */
.project-card .glass-highlight{
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    z-index:2;
}

/*=============================
   ANIMATED GRADIENT BORDER (smoother)
=============================*/

.project-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:24px;
    background:linear-gradient(45deg,#00e5ff,#8b5cf6,#38bdf8,#00e5ff);
    background-size:300% 300%;
    animation:borderAnimation 6s ease infinite;
    z-index:-2;
    opacity:.7;
    transition:opacity .4s ease;
}

.project-card:hover::before{
    opacity:1;
    filter:blur(1px);
}

.project-card::after{
    content:"";
    position:absolute;
    inset:2px;
    background:rgba(15,20,38,.85);
    backdrop-filter:blur(20px);
    border-radius:20px;
    z-index:-1;
}

/*=============================
   HOVER — lift + glow + tilt (JS adds rotateX/Y)
=============================*/

.project-card:hover{
    box-shadow:
        0 0 30px rgba(56,189,248,.3),
        0 0 55px rgba(139,92,246,.2),
        0 25px 45px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.1);
}

/*=============================
   IMAGE — parallax + overlay
=============================*/

.project-image{
    position:relative;
    width:100%;
    height:170px;
    overflow:hidden;
    border-radius:16px 16px 0 0;
}

.project-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(15,20,38,.9) 100%);
    opacity:.6;
    transition:opacity .5s ease;
}

.project-card:hover .project-image::after{
    opacity:.3;
}

.project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
    transition:transform .7s cubic-bezier(.25,.8,.25,1), filter .5s ease;
    filter:saturate(.9) brightness(.95);
}

.project-card:hover img{
    transform:scale(1.1);
    filter:saturate(1.1) brightness(1.05);
}

/* Live badge on image */
.project-image .status-badge{
    position:absolute;
    top:14px; right:14px;
    padding:5px 12px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#4ade80;
    background:rgba(15,20,38,.7);
    backdrop-filter:blur(10px);
    border:1px solid rgba(74,222,128,.4);
    border-radius:20px;
    z-index:3;
    display:flex;
    align-items:center;
    gap:6px;
}

.status-badge::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4ade80;
    box-shadow:0 0 8px #4ade80;
    animation:pulse 1.6s ease infinite;
}

@keyframes pulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.4; transform:scale(1.3); }
}

/*=============================
   CONTENT
=============================*/

.project-content{
    position:relative;
    overflow:hidden;
    padding:18px 20px 22px;
    z-index:2;
}

.project-content h3{
    color:#fff;
    font-size:19px;
    margin-bottom:8px;
    background:linear-gradient(90deg,#fff,#cbd5e1);
    -webkit-background-clip:text;
    background-clip:text;
    transition:.4s;
}

.project-card:hover .project-content h3{
    background:linear-gradient(90deg,#38bdf8,#8b5cf6);
    -webkit-background-clip:text;
    background-clip:text;
}

.project-content p{
    color:#94a3b8;
    font-size:13px;
    line-height:1.5;
    margin-bottom:14px;
}

/* shine sweep */
.project-content::before{
    content:"";
    position:absolute;
    top:-150%;
    left:-60%;
    width:50%;
    height:350%;
    background:rgba(255,255,255,.06);
    transform:rotate(25deg);
    transition:1s;
    pointer-events:none;
}

.project-card:hover .project-content::before{
    left:170%;
}

/*=============================
   TAGS — staggered pop-in
=============================*/

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

.tags span{
    padding:5px 13px;
    border-radius:16px;
    font-size:11px;
    color:#38bdf8;
    border:1px solid rgba(56,189,248,.35);
    background:rgba(56,189,248,.06);
    backdrop-filter:blur(6px);
    cursor:default;
    transition:.35s cubic-bezier(.34,1.56,.64,1);
    opacity:0;
    transform:translateY(10px);
    animation:tagPop .5s ease forwards;
}

.tags span:nth-child(1){ animation-delay:.15s; }
.tags span:nth-child(2){ animation-delay:.27s; }
.tags span:nth-child(3){ animation-delay:.39s; }
.tags span:nth-child(4){ animation-delay:.51s; }

@keyframes tagPop{
    to{ opacity:1; transform:translateY(0); }
}

.tags span:hover{
    background:#38bdf8;
    color:#fff;
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 4px 18px rgba(56,189,248,.5);
}

/*=============================
   BUTTONS — magnetic + ripple
=============================*/

.project-buttons{
    display:flex;
    gap:10px;
}

.project-btn{
    position:relative;
    overflow:hidden;
    padding:8px 18px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.project-btn::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:0; height:0;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    transform:translate(-50%,-50%);
    transition:width .5s ease, height .5s ease;
}

.project-btn:active::before{
    width:220px;
    height:220px;
}

.live{
    background:linear-gradient(135deg,#7c3aed,#8b5cf6);
    color:white;
    box-shadow:0 0 18px rgba(124,58,237,.35);
}

.live:hover{
    transform:translateY(-3px);
    box-shadow:0 0 18px #8b5cf6, 0 0 35px #8b5cf6, 0 10px 25px rgba(0,0,0,.3);
}

.github{
    border:2px solid #38bdf8;
    color:#38bdf8;
    background:rgba(56,189,248,.05);
}

.github:hover{
    background:#38bdf8;
    color:#111827;
    transform:translateY(-3px);
    box-shadow:0 0 18px #38bdf8, 0 0 35px #38bdf8, 0 10px 25px rgba(0,0,0,.3);
}

/*=============================
   CURSOR GLOW (global, follows mouse)
=============================*/

.cursor-glow{
    position:fixed;
    width:400px;
    height:400px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(139,92,246,.15), transparent 70%);
    pointer-events:none;
    transform:translate(-50%,-50%);
    z-index:0;
    transition:opacity .3s ease;
    left:0; top:0;
    filter:blur(20px);
}

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

@keyframes borderAnimation{
    0%{ background-position:0% 50%; }
    50%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
}