/* ========================================
   MICROBOTSS - ANIMATIONS
   GSAP-like Keyframe Animations
   ======================================== */

/* ===== HERO ANIMATIONS ===== */
@keyframes hero-text-reveal {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes hero-subtitle-reveal {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== FLOATING ROBOT ===== */
@keyframes robot-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(2deg);
    }

    50% {
        transform: translateY(-5px) rotate(0deg);
    }

    75% {
        transform: translateY(-20px) rotate(-2deg);
    }
}

@keyframes robot-eyes-blink {

    0%,
    45%,
    55%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.1);
    }
}

@keyframes robot-antenna-glow {

    0%,
    100% {
        box-shadow: 0 0 10px var(--secondary), 0 0 20px var(--secondary);
    }

    50% {
        box-shadow: 0 0 20px var(--secondary), 0 0 40px var(--secondary), 0 0 60px var(--secondary);
    }
}

/* ===== DRONE ANIMATIONS ===== */
@keyframes drone-fly {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(20px, -15px) rotate(5deg);
    }

    50% {
        transform: translate(40px, 0) rotate(0deg);
    }

    75% {
        transform: translate(20px, 15px) rotate(-5deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes propeller-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== AI CHIP ANIMATIONS ===== */
@keyframes chip-rotate {
    0% {
        transform: rotateY(0deg) rotateX(10deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(10deg);
    }
}

@keyframes circuit-pulse {

    0%,
    100% {
        opacity: 0.3;
        stroke-dashoffset: 0;
    }

    50% {
        opacity: 1;
        stroke-dashoffset: 50;
    }
}

@keyframes data-flow {
    0% {
        background-position: 0% 50%;
    }

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

/* ===== PARTICLE EFFECTS ===== */
@keyframes particle-float {
    0% {
        transform: translateY(100vh) scale(0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) scale(1) rotate(720deg);
        opacity: 0;
    }
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }
}

/* ===== GLOW ANIMATIONS ===== */
@keyframes neon-flicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        text-shadow:
            0 0 10px var(--neon-blue),
            0 0 20px var(--neon-blue),
            0 0 40px var(--primary);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}

@keyframes border-glow {

    0%,
    100% {
        border-color: var(--primary);
        box-shadow: 0 0 10px var(--primary), inset 0 0 10px rgba(24, 0, 173, 0.1);
    }

    50% {
        border-color: var(--secondary);
        box-shadow: 0 0 20px var(--secondary), inset 0 0 20px rgba(254, 182, 0, 0.1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

/* ===== COUNTER ANIMATIONS ===== */
@keyframes count-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== CARD ANIMATIONS ===== */
@keyframes card-entrance {
    0% {
        opacity: 0;
        transform: translateY(80px) rotateX(10deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

@keyframes card-hover-glow {
    0% {
        box-shadow: 0 0 0 rgba(77, 124, 255, 0);
    }

    100% {
        box-shadow: 0 0 30px rgba(77, 124, 255, 0.4), 0 0 60px rgba(168, 85, 247, 0.2);
    }
}

@keyframes tilt-3d {

    0%,
    100% {
        transform: perspective(1000px) rotateX(0) rotateY(0);
    }

    25% {
        transform: perspective(1000px) rotateX(2deg) rotateY(2deg);
    }

    75% {
        transform: perspective(1000px) rotateX(-2deg) rotateY(-2deg);
    }
}

/* ===== CERTIFICATE ANIMATIONS ===== */
@keyframes certificate-unfurl {
    0% {
        transform: rotateX(-90deg) scale(0.5);
        opacity: 0;
    }

    50% {
        transform: rotateX(-20deg) scale(0.9);
    }

    100% {
        transform: rotateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes gold-emboss-shine {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* ===== CONFETTI ANIMATION ===== */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes confetti-sway {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(30px);
    }

    75% {
        transform: translateX(-30px);
    }
}

/* ===== WAVE ANIMATIONS ===== */
@keyframes wave-motion {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }

    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.8);
    }

    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1);
    }
}

@keyframes wave-flow {
    0% {
        d: path('M0,100 C150,150 350,50 500,100 C650,150 850,50 1000,100 L1000,200 L0,200 Z');
    }

    50% {
        d: path('M0,100 C150,50 350,150 500,100 C650,50 850,150 1000,100 L1000,200 L0,200 Z');
    }

    100% {
        d: path('M0,100 C150,150 350,50 500,100 C650,150 850,50 1000,100 L1000,200 L0,200 Z');
    }
}

/* ===== BUTTON ANIMATIONS ===== */
@keyframes button-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(254, 182, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(254, 182, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(254, 182, 0, 0);
    }
}

@keyframes button-shine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

/* ===== SCROLL INDICATOR ===== */
@keyframes scroll-bounce {

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

    50% {
        transform: translateY(10px);
    }
}

@keyframes mouse-wheel {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

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

/* ===== LOADING ANIMATIONS ===== */
@keyframes loading-dots {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

@keyframes loading-bar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== ICON ANIMATIONS ===== */
@keyframes icon-bounce {

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

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

@keyframes icon-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes icon-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* ===== TEXT ANIMATIONS ===== */
@keyframes text-slide-up {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes text-fade-in {
    0% {
        opacity: 0;
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-cursor {

    0%,
    100% {
        border-color: transparent;
    }

    50% {
        border-color: var(--secondary);
    }
}

/* ===== BACKGROUND ANIMATIONS ===== */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

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

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

@keyframes aurora {

    0%,
    100% {
        opacity: 0.5;
        transform: translateY(0) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-20px) scale(1.1);
    }
}

/* ===== STAGGER ANIMATION DELAYS ===== */
.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

.stagger-4 {
    animation-delay: 0.4s;
}

.stagger-5 {
    animation-delay: 0.5s;
}

.stagger-6 {
    animation-delay: 0.6s;
}

/* ===== ANIMATION CLASSES ===== */
.animate-float {
    animation: robot-float 4s ease-in-out infinite;
}

.animate-drone {
    animation: drone-fly 8s ease-in-out infinite;
}

.animate-spin-slow {
    animation: spin 20s linear infinite;
}

.animate-pulse-glow {
    animation: glow-pulse 2s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

.animate-bounce {
    animation: icon-bounce 2s ease-in-out infinite;
}

.animate-shake {
    animation: icon-shake 0.5s ease-in-out;
}

/* ===== HOVER ANIMATION TRIGGERS ===== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hover-glow:hover {
    animation: card-hover-glow 0.3s forwards;
}

.hover-tilt {
    transition: transform 0.3s ease;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* ===== ENTRANCE ANIMATIONS ===== */
.entrance-fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.entrance-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.entrance-fade-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.entrance-fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.entrance-fade-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.entrance-fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.entrance-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.entrance-scale.visible {
    opacity: 1;
    transform: scale(1);
}