/* Custom scrollbar and utility classes for ASP.NET Core / React portability */
body {
    background-color: #F8FAFC;
    color: #050D26;
    overflow-x: hidden;
}

.bg-esaa-mesh {
    background-color: #050D26;
    background-image: radial-gradient(at 15% 15%, rgba(0, 82, 255, 0.28) 0px, transparent 50%), radial-gradient(at 85% 25%, rgba(0, 242, 254, 0.18) 0px, transparent 50%), radial-gradient(at 50% 85%, rgba(0, 148, 255, 0.22) 0px, transparent 50%);
}

.text-gradient-esaa {
    background: linear-gradient(135deg, #0052FF 0%, #00C6FF 55%, #00F2FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-light {
    background: linear-gradient(135deg, #FFFFFF 0%, #A5F3FC 50%, #00F2FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-esaa-primary {
    background: linear-gradient(135deg, #0052FF 0%, #0094FF 55%, #00E1FF 100%);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

    .btn-esaa-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px -6px rgba(0, 148, 255, 0.55);
    }

.card-elevate {
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

    .card-elevate:hover {
        transform: translateY(-4px);
    }

/* Animated audio bars for Voice AI preview */
@keyframes pulseWave {
    0%, 100% {
        height: 6px;
        opacity: 0.5;
    }

    50% {
        height: 24px;
        opacity: 1;
    }
}

.wave-bar {
    width: 4px;
    background: linear-gradient(to top, #0052FF, #00F2FE);
    border-radius: 9999px;
    animation: pulseWave 1.2s ease-in-out infinite;
}

    .wave-bar:nth-child(2) {
        animation-delay: 0.15s;
    }

    .wave-bar:nth-child(3) {
        animation-delay: 0.3s;
    }

    .wave-bar:nth-child(4) {
        animation-delay: 0.45s;
    }

    .wave-bar:nth-child(5) {
        animation-delay: 0.2s;
    }

    .wave-bar:nth-child(6) {
        animation-delay: 0.5s;
    }

    .wave-bar:nth-child(7) {
        animation-delay: 0.1s;
    }

    .wave-bar:nth-child(8) {
        animation-delay: 0.35s;
    }

    .wave-bar:nth-child(9) {
                animation-delay: 0.25s;
            }

    .wave-bar:nth-child(10) {
        animation-delay: 0.4s;
    }
/* Floating & glowing animations for the Hero AI Ecosystem Visual */
@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px);
    }

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

@keyframes floatSlowReverse {
    0%, 100% {
        transform: translateY(0px);
    }

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

@keyframes pulseGlowHub {
    0%, 100% {
        filter: drop-shadow(0 0 18px rgba(0, 242, 254, 0.55));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 32px rgba(0, 148, 255, 0.9));
        transform: scale(1.03);
    }
}

@keyframes streamDash {
    to {
        stroke-dashoffset: -40;
    }
}

.hero-float-1 {
    animation: floatSlow 5.5s ease-in-out infinite;
}

.hero-float-2 {
    animation: floatSlowReverse 6.2s ease-in-out infinite;
}

.hero-float-3 {
    animation: floatSlow 6.8s ease-in-out infinite 0.6s;
}

.hero-float-4 {
    animation: floatSlowReverse 5.8s ease-in-out infinite 0.3s;
}

.hero-hub-glow {
    animation: pulseGlowHub 4.5s ease-in-out infinite;
}

.neural-stream {
    stroke-dasharray: 6 6;
    animation: streamDash 2.2s linear infinite;
}

/* Hero Sequential Blur & Static Background Image Component Styles */
/* Plain stage sitting directly on the Hero section background (no border, box, or background) */
.esaa-hero-blur-stage {
    position: relative;
    width: 120%;
    min-height: 380px;
    background: transparent;
    overflow: visible;
}

@media (min-width: 640px) {
    .esaa-hero-blur-stage {
        min-height: 640px;
    }
}

/* Static background image (Layer 1) - exact same size as foreground images */
.esaa-static-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

/* Foreground slides container (Layer 2) */
.esaa-foreground-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Foreground transparent-background image slide wrapper (same size as background) */
.esaa-blur-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    will-change: filter, opacity, transform;
    transition: opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1), filter 1.15s cubic-bezier(0.22, 1, 0.36, 1), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

    .esaa-blur-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Active sharp state (unblurred in front of static background) */
    .esaa-blur-slide.is-active {
        opacity: 1 !important;
        filter: blur(0px) brightness(1) !important;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg) !important;
        z-index: 20;
    }

    /* Effect 1: Blur + Zoom In/Out */
    .esaa-blur-slide.fx-blur-zoom.is-entering {
        opacity: 0;
        filter: blur(24px) brightness(1.3);
        transform: scale(0.84);
    }

    .esaa-blur-slide.fx-blur-zoom.is-exiting {
        opacity: 0;
        filter: blur(26px) brightness(0.85);
        transform: scale(1.12);
    }

    /* Effect 2: Blur + Float Upward */
    .esaa-blur-slide.fx-blur-up.is-entering {
        opacity: 0;
        filter: blur(22px) brightness(1.25);
        transform: translateY(34px) scale(0.92);
    }

    .esaa-blur-slide.fx-blur-up.is-exiting {
        opacity: 0;
        filter: blur(24px) brightness(0.85);
        transform: translateY(-34px) scale(1.04);
    }

    /* Effect 3: Blur + Horizontal Glide */
    .esaa-blur-slide.fx-blur-glide.is-entering {
        opacity: 0;
        filter: blur(24px) brightness(1.25);
        transform: translateX(38px) scale(0.92);
    }

    .esaa-blur-slide.fx-blur-glide.is-exiting {
        opacity: 0;
        filter: blur(24px) brightness(0.85);
        transform: translateX(-38px) scale(1.04);
    }

    /* Effect 4: Blur + Soft 3D Perspective Swirl */
    .esaa-blur-slide.fx-blur-swirl.is-entering {
        opacity: 0;
        filter: blur(26px) brightness(1.35);
        transform: scale(0.86) rotate(-3deg);
    }

    .esaa-blur-slide.fx-blur-swirl.is-exiting {
        opacity: 0;
        filter: blur(26px) brightness(0.85);
        transform: scale(1.08) rotate(3deg);
    }