/* ============================================
   HERO ANIMATED BACKGROUND SYSTEM
   Clean, premium, tech-driven animations
   ============================================ */

/* Base hero background container */
.hero-bg-animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
}

/* Animated gradient wave layer - creates depth */
.gradient-wave {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(34, 211, 238, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(124, 58, 237, 0.08) 0%, transparent 40%);
    animation: waveFloat 20s ease-in-out infinite alternate;
    opacity: 1;
    filter: blur(40px);
}

/* Additional floating orbs for depth */
.gradient-wave::before,
.gradient-wave::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    animation: orbFloat 25s ease-in-out infinite;
}

.gradient-wave::before {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.05) 50%, transparent 70%);
    top: -100px;
    right: -100px;
    animation-delay: -5s;
}

.gradient-wave::after {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, rgba(124, 58, 237, 0.05) 50%, transparent 70%);
    bottom: -50px;
    left: -50px;
    animation-delay: -12s;
}

/* Particle canvas - tech nodes animation */
.particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 5;
    pointer-events: none;
    background-image:
        radial-gradient(var(--secondary-color) 1px, transparent 1px),
        radial-gradient(var(--secondary-color) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* Gradient wave animation - slow, calming movement */
@keyframes waveFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-30px, -20px) scale(1.05);
    }
}

/* Floating orbs animation */
@keyframes orbFloat {

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

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 30px) scale(0.9);
    }
}

/* Ensure hero content stays above animations */
.hero-content {
    position: relative;
    z-index: 10;
}

/* Text readability enhancement */
.hero-title,
.hero-subtitle {
    user-select: text;
}

.hero-title {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-color);
    /* Fallback */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gradient-wave {
        animation-duration: 15s;
    }

    .gradient-wave::before {
        width: 300px;
        height: 300px;
        filter: blur(40px);
    }

    .gradient-wave::after {
        width: 250px;
        height: 250px;
        filter: blur(40px);
    }
}

/* Reduced motion support - accessibility */
@media (prefers-reduced-motion: reduce) {

    .gradient-wave,
    .gradient-wave::before,
    .gradient-wave::after {
        animation: none;
    }
}