/*==================================================
  FADE IN ANIMATION
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
  FLOATING CARD
==================================================*/

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
  SCROLL INDICATOR
==================================================*/

@keyframes scrollWheel{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

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

    }

}


/*==================================================
  DATA FLOW
==================================================*/

@keyframes dataFlow{

    from{

        background-position:0 0;

    }

    to{

        background-position:0 100%;

    }

}


/*==================================================
  PULSE
==================================================*/

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.08);

        opacity:.8;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}


/*==================================================
  GRADIENT FLOAT
==================================================*/

@keyframes gradientFloat{

    0%{

        transform:translate(0,0);

    }

    50%{

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

    }

    100%{

        transform:translate(0,0);

    }

}


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

@keyframes glow{

    0%{

        box-shadow:0 0 10px rgba(59,130,246,.2);

    }

    50%{

        box-shadow:0 0 30px rgba(59,130,246,.45);

    }

    100%{

        box-shadow:0 0 10px rgba(59,130,246,.2);

    }

}


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

.hero-content{

    animation:fadeUp .8s ease forwards;

}

.hero-visual{

    animation:fadeUp 1s ease forwards;

}

.glass-card{

    animation:floatCard 8s ease-in-out infinite;

}

.gradient-one{

    animation:gradientFloat 12s ease-in-out infinite;

}

.gradient-two{

    animation:gradientFloat 18s ease-in-out infinite reverse;

}

.status{

    animation:pulse 2s infinite;

}


/*==================================================
  HOVER EFFECTS
==================================================*/

.timeline-content:hover,

.project-case:hover,

.highlight-item:hover,

.expertise-card:hover,

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


/*==================================================
  SCROLL REVEAL
==================================================*/

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
  CURSOR GLOW
==================================================*/

.cursor-glow{

    position:fixed;

    width:300px;

    height:300px;

    border-radius:50%;

    background:radial-gradient(

        rgba(59,130,246,.18),

        transparent 70%

    );

    pointer-events:none;

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

    z-index:-1;

    transition:

        left .08s linear,

        top .08s linear;

}


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

.progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

    z-index:100000;

}