/* =====================================================
   MIDHUN SURESH PORTFOLIO
   Animation Styles
===================================================== */


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


a,
button,
.card,
.project-card,
.resume-btn,
.primary-btn,
.secondary-btn {

    transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    color .35s ease;

}






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


.hero-content {

    animation:
    heroSlide 1s ease forwards;

}



.hero-image {

    animation:
    heroImageReveal 1.2s ease forwards;

}




@keyframes heroSlide {


    from {

        opacity:0;

        transform:
        translateY(40px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }

}





@keyframes heroImageReveal {


    from {

        opacity:0;

        transform:
        translateX(80px)
        scale(.9);

    }



    to {

        opacity:1;

        transform:
        translateX(0)
        scale(1);

    }


}








/* =====================================================
   PROFILE IMAGE FLOATING EFFECT
===================================================== */


.hero-image img {


    animation:

    floatingImage
    5s ease-in-out infinite;


}



@keyframes floatingImage {


    0% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(-15px);

    }


    100% {

        transform:
        translateY(0);

    }


}








/* =====================================================
   HERO GLOW EFFECT
===================================================== */


.hero-image::before {


    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:

    radial-gradient(
    circle,
    rgba(0,217,255,.25),
    transparent 70%
    );


    filter:blur(40px);

    z-index:-1;


    animation:

    pulseGlow 4s infinite;


}




@keyframes pulseGlow {


    0% {

        opacity:.5;

        transform:scale(.9);

    }


    50% {

        opacity:1;

        transform:scale(1.1);

    }


    100% {

        opacity:.5;

        transform:scale(.9);

    }


}








/* =====================================================
   BUTTON EFFECTS
===================================================== */


.primary-btn:hover {


    transform:
    translateY(-5px);


    box-shadow:

    0 15px 40px
    rgba(0,217,255,.35);


}



.secondary-btn:hover {


    border-color:#00d9ff;


    transform:
    translateY(-5px);


}









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


.section,
.card,
.project-card,
.timeline-item {

    opacity:0;

    transform:translateY(40px);

}


.visible {

    opacity:1;

    transform:translateY(0);

    transition:
    opacity .8s ease,
    transform .8s ease;

}



@keyframes sectionReveal {


    from {

        opacity:0;

        transform:
        translateY(50px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }


}








/* =====================================================
   STAT COUNTER STYLE
===================================================== */


.stat-box {


    animation:

    statAppear
    .8s ease both;


}



.stat-box:nth-child(1){

    animation-delay:.1s;

}


.stat-box:nth-child(2){

    animation-delay:.2s;

}


.stat-box:nth-child(3){

    animation-delay:.3s;

}


.stat-box:nth-child(4){

    animation-delay:.4s;

}


.stat-box:nth-child(5){

    animation-delay:.5s;

}





@keyframes statAppear {


    from {

        opacity:0;

        transform:
        scale(.8);

    }


    to {

        opacity:1;

        transform:
        scale(1);

    }


}








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


.card {


    position:relative;

    overflow:hidden;

}



.card::after {


    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(
    120deg,
    transparent,
    rgba(0,217,255,.15),
    transparent
    );


    transform:
    translateX(-100%);


}




.card:hover::after {


    animation:

    shine .8s;


}





@keyframes shine {


    from {

        transform:
        translateX(-100%);

    }


    to {

        transform:
        translateX(100%);

    }


}









/* =====================================================
   PROJECT CARD EFFECT
===================================================== */


.project-card {


    animation:

    projectReveal
    .8s ease both;


}



.project-card:hover img {


    transform:

    scale(1.08);


}



.project-card img {


    transition:

    transform .5s ease;


}




@keyframes projectReveal {


    from {


        opacity:0;

        transform:

        translateY(40px);


    }


    to {


        opacity:1;

        transform:

        translateY(0);


    }


}








/* =====================================================
   TIMELINE EFFECT
===================================================== */


.timeline-item {


    animation:

    timelineReveal
    .8s ease both;


}




@keyframes timelineReveal {


    from {

        opacity:0;

        transform:
        translateX(-40px);

    }



    to {

        opacity:1;

        transform:
        translateX(0);

    }


}








/* =====================================================
   SKILL TAG ANIMATION
===================================================== */


.skill-list span:hover {


    background:#00d9ff;

    color:#000;


    transform:

    translateY(-5px);


}









/* =====================================================
   BACKGROUND TECH GRID
===================================================== */


body::before {


    content:"";

    position:fixed;

    inset:0;


    background-image:


    linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px
    ),


    linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px
    );


    background-size:

    80px 80px;


    pointer-events:none;


    z-index:-2;



    animation:

    gridMove
    30s linear infinite;


}





@keyframes gridMove {


    from {

        transform:
        translateY(0);

    }


    to {

        transform:
        translateY(80px);

    }


}








/* =====================================================
   REDUCED MOTION SUPPORT
===================================================== */


@media(prefers-reduced-motion:reduce){


* {

    animation:none !important;

    transition:none !important;

}


}