/* =========================================================
   Techmate AI - Animation System
   ========================================================= */

/* ========================================
   Base Transition
======================================== */

* {
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

/* ========================================
   Reveal Animation
======================================== */

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

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

/* ========================================
   Fade In
======================================== */

.fade-in {
    opacity: 0;
    transition: opacity .8s ease;
}

.fade-in.active {
    opacity: 1;
}

/* ========================================
   Scale In
======================================== */

.scale-in {
    opacity: 0;
    transform: scale(.9);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

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

/* ========================================
   Slide Left
======================================== */

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

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

/* ========================================
   Slide Right
======================================== */

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

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

/* ========================================
   Floating Animation
======================================== */

.float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

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

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

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

}

/* ========================================
   Pulse Glow
======================================== */

.pulse-glow {
    animation: pulseGlow 4s infinite ease-in-out;
}

@keyframes pulseGlow {

    0% {
        box-shadow: 0 0 0 rgba(37,99,235,0);
    }

    50% {
        box-shadow: 0 0 35px rgba(37,99,235,.35);
    }

    100% {
        box-shadow: 0 0 0 rgba(37,99,235,0);
    }

}

/* ========================================
   Gradient Animation
======================================== */

.gradient-animated {

    background: linear-gradient(
        -45deg,
        #2563EB,
        #06B6D4,
        #7C3AED,
        #2563EB
    );

    background-size: 300% 300%;

    animation: gradientMove 12s ease infinite;
}

@keyframes gradientMove {

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

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

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

}

/* ========================================
   Rotation
======================================== */

.rotate-slow {
    animation: rotateSlow 25s linear infinite;
}

@keyframes rotateSlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* ========================================
   Shimmer
======================================== */

.shimmer {

    position: relative;

    overflow: hidden;
}

.shimmer::after {

    content: "";

    position: absolute;

    top: 0;

    left: -150%;

    width: 50%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15),
        transparent
    );

    animation: shimmer 3s infinite;
}

@keyframes shimmer {

    100% {
        left: 180%;
    }

}

/* ========================================
   Hover Lift
======================================== */

.hover-lift {
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.hover-lift:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);
}