/* ============================================
   HERO ANIMATION - Modern Corporate Style
   Deep Navy (#0A192F) + Cyan (#00E5FF/00D4FF)
   ============================================ */

/* Hero Section Container */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 120px 20px 80px;
    overflow: hidden;
    background: var(--hero-navy, #0A192F);
}

/* Animated Gradient Background */
.hero-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(0, 229, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #0A192F 0%, #0D2137 40%, #112240 100%);
    z-index: 0;
}

/* Animated Mesh Gradient Overlay */
.hero-gradient-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(0, 229, 255, 0.03) 60deg,
            transparent 120deg,
            rgba(0, 212, 255, 0.05) 180deg,
            transparent 240deg,
            rgba(0, 229, 255, 0.03) 300deg,
            transparent 360deg);
    animation: heroRotate 30s linear infinite;
    z-index: 1;
}

/* Secondary Rotating Layer */
.hero-gradient-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle 800px at 20% 30%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle 600px at 80% 70%, rgba(0, 180, 255, 0.06) 0%, transparent 50%);
    animation: heroPulse 8s ease-in-out infinite alternate;
    z-index: 2;
}

/* Animated Grid Pattern */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-image:
        linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    background-position: -1px -1px;
    animation: gridFloat 20s linear infinite;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 70%);
}

/* Floating Orbs */
.hero-particles::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: orbFloat1 15s ease-in-out infinite;
    z-index: 1;
}

.hero-particles::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 180, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    animation: orbFloat2 18s ease-in-out infinite;
    z-index: 1;
}

/* Geometric Shapes - Floating Elements */
.hero-section::before {
    content: '';
    position: absolute;
    top: 15%;
    right: 20%;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(0, 229, 255, 0.2);
    border-radius: 50%;
    animation: floatShape1 10s ease-in-out infinite;
    z-index: 4;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 15%;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.1) 0%, transparent 100%);
    transform: rotate(45deg);
    animation: floatShape2 12s ease-in-out infinite;
    z-index: 4;
}

/* Light Beams */
.hero-gradient-bg .light-beam {
    position: absolute;
    top: 0;
    right: 10%;
    width: 300px;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(0, 229, 255, 0.1) 0%,
            rgba(0, 229, 255, 0.03) 30%,
            transparent 70%);
    transform: skewX(-15deg);
    animation: beamPulse 6s ease-in-out infinite;
    z-index: 2;
}

/* Keyframe Animations */
@keyframes heroRotate {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes heroPulse {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }

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

@keyframes gridFloat {
    0% {
        background-position: -1px -1px;
    }

    100% {
        background-position: 99px 99px;
    }
}

@keyframes orbFloat1 {

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

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

    50% {
        transform: translate(30px, -60px) scale(0.9);
        opacity: 0.7;
    }

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

@keyframes orbFloat2 {

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

    25% {
        transform: translate(-40px, 20px) scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: translate(-60px, 40px) scale(1.1);
        opacity: 1;
    }

    75% {
        transform: translate(-30px, 20px) scale(1);
        opacity: 0.75;
    }
}

@keyframes floatShape1 {

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

    50% {
        transform: translate(-20px, 30px) rotate(180deg);
        opacity: 0.6;
    }
}

@keyframes floatShape2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(45deg) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(30px, -20px) rotate(135deg) scale(1.2);
        opacity: 0.5;
    }
}

@keyframes beamPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Particles/Dots Animation */
@keyframes particleDrift {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-100vh) translateX(50px);
        opacity: 0;
    }
}

/* Hero Content Adjustments */
.hero-wrapper {
    position: relative;
    z-index: 10;
}



/* Updated Hero Badge */
.hero-badge {
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
    backdrop-filter: blur(10px);
}






/* Image Card Badge Update */
.image-card-badge {
    background: rgba(10, 25, 47, 0.8);
    border: 1px solid rgba(0, 229, 255, 0.3);
}

/* Scroll Indicator Update */
.scroll-indicator {
    color: rgba(0, 229, 255, 0.6);
}

.mouse {
    border-color: rgba(0, 229, 255, 0.4);
}

.wheel {
    background: #00E5FF;
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .hero-section::before,
    .hero-section::after {
        display: none;
    }

    .hero-particles::before,
    .hero-particles::after {
        width: 200px;
        height: 200px;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    .hero-gradient-bg::before,
    .hero-gradient-bg::after,
    .hero-particles,
    .hero-particles::before,
    .hero-particles::after,
    .hero-section::before,
    .hero-section::after {
        animation: none;
    }
}