/* ==========================
   GLOBAL TRANSITIONS
========================== */

*{
    transition:
    background-color .3s ease,
    color .3s ease,
    border-color .3s ease,
    transform .4s ease,
    box-shadow .4s ease;
}

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

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

/* ==========================
   LEFT REVEAL
========================== */

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

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

/* ==========================
   RIGHT REVEAL
========================== */

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

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

/* ==========================
   SCALE REVEAL
========================== */

.reveal-scale{
    opacity:0;
    transform:scale(.9);
    transition:all .8s ease;
}

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

/* ==========================
   HERO FADE IN
========================== */

.hero-content{
    animation:heroFade 1.2s ease forwards;
}

@keyframes heroFade{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

}

/* ==========================
   STATUS BADGE PULSE
========================== */

.status{
    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(139,92,246,.5);
    }

    70%{
        box-shadow:0 0 0 12px rgba(139,92,246,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(139,92,246,0);
    }

}

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

.btn-primary:hover,
.btn-secondary:hover{

    transform:translateY(-4px);

}

/* ==========================
   NAVBAR CYLINDER EFFECT
========================== */

.navbar a:hover{

    transform:
    translateY(-2px)
    scale(1.05);

}

/* ==========================
   PROJECT IMAGE ZOOM
========================== */

.project-image{
    overflow:hidden;
    border-radius:30px;
}

.project-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:
    transform .8s ease;

}

.project:hover .project-image img{

    transform:scale(1.08);

}

/* ==========================
   PROJECT CARD FLOAT
========================== */

.project:hover{

    transform:translateY(-8px);

}

/* ==========================
   TECH STACK PILLS
========================== */

.tech-stack span:hover{

    transform:translateY(-4px);

    border-color:#8b5cf6;

    box-shadow:
    0 0 20px rgba(139,92,246,.25);

}

/* ==========================
   TECH ARSENAL CARDS
========================== */

.tech-category:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 0 30px rgba(139,92,246,.15);

}

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

.contact-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 0 35px rgba(139,92,246,.2);

}

/* ==========================
   FOOTER LINKS
========================== */

.footer a:hover{

    transform:translateX(5px);

}

/* ==========================
   UNDERLINE GROW EFFECT
========================== */

.project-links a{

    position:relative;

}

.project-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;
    height:1px;

    background:#8b5cf6;

    transition:.4s ease;

}

.project-links a:hover::after{

    width:100%;

}

/* ==========================
   FLOATING GLOW
========================== */

.cursor-glow{

    position:fixed;

    width:300px;
    height:300px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(139,92,246,.15),
        transparent 70%
    );

    pointer-events:none;

    z-index:-1;

    transform:
    translate(-50%,-50%);

}

/* ==========================
   PROJECT NUMBER
========================== */

.project-number{

    transition:.4s ease;

}

.project:hover .project-number{

    transform:rotate(-5deg);

}

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

.hero h1 span{

    transition:.5s ease;

}

.hero h1:hover span{

    color:#fff;

    -webkit-text-stroke:0;

}

/* ==========================
   SCROLL PROGRESS BAR
========================== */

.progress-bar{

    position:fixed;

    top:0;
    left:0;

    width:0;

    height:3px;

    background:#8b5cf6;

    z-index:9999;

}

/* ==========================
   STAGGER DELAYS
========================== */

.delay-1{
    transition-delay:.1s;
}

.delay-2{
    transition-delay:.2s;
}

.delay-3{
    transition-delay:.3s;
}

.delay-4{
    transition-delay:.4s;
}

.delay-5{
    transition-delay:.5s;
}

/* ==========================
   SMOOTH SECTION ENTRY
========================== */

section{
    animation:sectionFade .8s ease;
}

@keyframes sectionFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}
.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}