/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #00091E;
}

::-webkit-scrollbar-thumb {
    background: #ED641A;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #FDA70F;
}

/* Glassmorphism Navigation */
.glass-nav {
    background: rgba(0, 9, 30, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(237, 38, 38, 0.3);
}

/* Tech Patterns */
.bg-tech-pattern {
    background-size: 30px 30px;
    background-image: linear-gradient(to right, rgba(237, 100, 26, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(237, 100, 26, 0.08) 1px, transparent 1px);
}

.bg-tech-pattern-strong {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

/* ============================================
   SCROLL ANIMATIONS (IntersectionObserver)
   ============================================ */

/* Base state: hidden before animation */
[data-animate] {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-animate="fade-up"] {
    transform: translateY(40px);
}

[data-animate="fade-left"] {
    transform: translateX(-40px);
}

[data-animate="fade-right"] {
    transform: translateX(40px);
}

[data-animate="fade-in"] {
    transform: scale(0.97);
}

[data-animate="fade-down"] {
    transform: translateY(-30px);
}

/* Animated state: visible */
[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* Delay helpers */
[data-delay="100"] {
    transition-delay: 0.1s;
}

[data-delay="200"] {
    transition-delay: 0.2s;
}

[data-delay="300"] {
    transition-delay: 0.3s;
}

[data-delay="400"] {
    transition-delay: 0.4s;
}

[data-delay="500"] {
    transition-delay: 0.5s;
}

[data-delay="600"] {
    transition-delay: 0.6s;
}

[data-delay="700"] {
    transition-delay: 0.7s;
}

/* ============================================
   HERO / CAROUSEL ANIMATIONS
   ============================================ */
@keyframes kenBurns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.animate-ken-burns {
    animation: kenBurns 8s ease-in-out infinite alternate;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

.delay-100 {
    animation-delay: 0.1s;
    opacity: 0;
}

.delay-200 {
    animation-delay: 0.2s;
    opacity: 0;
}

.delay-300 {
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes pulseRing {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(253, 167, 15, 0.6);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(253, 167, 15, 0);
    }
}

.animate-pulse-ring {
    animation: pulseRing 2s infinite;
}