/* Animations - Keyframes and Transitions */

/* Basic fade animations */
.fade-in-up { 
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
    opacity: 0; 
    transform: translateY(10px); 
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hero-specific dramatic animations */
.hero-fade-in {
    animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(60px) scale(0.95);
}

.hero-delay-1 { animation-delay: 0.2s; }
.hero-delay-2 { animation-delay: 0.5s; }
.hero-delay-3 { animation-delay: 0.8s; }
.hero-delay-4 { animation-delay: 1.1s; }

@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Scroll-triggered animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.scroll-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Shimmer effect keyframe */
@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Glow pulse effect keyframe */
@keyframes borderGlow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 186, 255, 0.7); }
    50% { box-shadow: 0 0 0 8px rgba(0, 186, 255, 0); }
}

/* Beam animations */
@keyframes beamSlideH {
    0%, 100% { top: 20%; opacity: 0; }
    10% { opacity: 0.6; }
    50% { top: 80%; opacity: 0.6; }
    90% { opacity: 0; }
}

@keyframes beamSlideV {
    0%, 100% { left: 10%; opacity: 0; }
    10% { opacity: 0.4; }
    50% { left: 90%; opacity: 0.4; }
    90% { opacity: 0; }
}

/* Noodle draw animation */
@keyframes drawNoodle {
    0%, 100% { stroke-dashoffset: 1000; opacity: 0; }
    10% { opacity: 1; }
    50% { stroke-dashoffset: 0; opacity: 1; }
    90% { opacity: 0; }
}

/* Blob morph animation */
@keyframes morph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    25% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    75% {
        border-radius: 70% 30% 40% 60% / 40% 70% 50% 30%;
    }
}

@keyframes float-blob {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 30px) scale(0.9) rotate(240deg);
    }
}

/* Connection path animations */
.connection-path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawPath 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.connection-path-1 { animation-delay: 0.6s; }
.connection-path-2 { animation-delay: 0.6s; }
.connection-path-3 { animation-delay: 1.2s; }

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* Node cards - always visible with simple fade in */
.map-node {
    opacity: 1 !important;
}

/* Status pulse animations */
.status-pulse {
    animation: statusPulse 2s ease-in-out infinite;
}

.status-pulse-fast {
    animation: statusPulseFast 1.5s ease-in-out infinite;
}

.status-pulse-slow {
    animation: statusPulseSlow 3s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes statusPulseFast {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@keyframes statusPulseSlow {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.5;
    }
}

/* Glow effect for center node */
.node-glow {
    animation: nodeGlow 3s ease-in-out infinite;
}

@keyframes nodeGlow {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* Spin animation for loader */
@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .noodle-path,
    .signal-dot,
    .cta-button::before,
    .cta-button::after,
    .shimmer,
    .fade-in-up,
    .hero-fade-in,
    .connection-path,
    .map-node,
    .status-pulse,
    .node-glow {
        animation: none !important;
    }

    .connection-path {
        stroke-dashoffset: 0;
    }

    .map-node,
    .hero-fade-in {
        opacity: 1;
        transform: scale(1);
    }
}