/* =============================================
   InfinitySpace42 - Animations
   Keyframes, Transitions, Gradient Effects
   ============================================= */

/* =============================================
   Gradient Title Effects
   ============================================= */

/* Animated Gradient Title Effects */
@keyframes titleGradient {
    0% { 
        color: #39ff14;
        text-shadow: 0 0 10px rgba(57, 255, 20, 0.6), 0 0 20px rgba(57, 255, 20, 0.4);
    }
    33% { 
        color: var(--primary-cyan);
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.4);
    }
    66% { 
        color: var(--primary-purple);
        text-shadow: 0 0 10px rgba(139, 92, 246, 0.6), 0 0 20px rgba(139, 92, 246, 0.4);
    }
    100% { 
        color: #39ff14;
        text-shadow: 0 0 10px rgba(57, 255, 20, 0.6), 0 0 20px rgba(57, 255, 20, 0.4);
    }
}

.hero-title,
.section-title,
.category-header h1,
h1.hero-title,
h2.section-title {
    animation: titleGradient 3s ease infinite !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}


/* =============================================
   Keyframe Animations
   ============================================= */

/* Animations */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

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

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 20px var(--primary-purple); }
    50% { box-shadow: 0 0 30px var(--primary-purple), 0 0 40px var(--primary-purple); }
    100% { box-shadow: 0 0 20px var(--primary-purple); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .navbar {
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 70px;
        flex-direction: row;
        padding: 1rem 2rem;
        border-left: none;
        border-bottom: 2px solid rgba(0, 255, 255, 0.4);
    }
    
    .nav-container {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
    }

    .nav-menu {
        flex-direction: row;
        gap: 2rem;
    }
    
    .hero {
        padding-right: 0;
        padding-top: 70px;
    }
    
    .active-areas,
    .phases,
    .center-vision {
        padding-right: 0;
    }
}