/* Keyframe Animations */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 5px var(--accent-glow); }
    50% { box-shadow: 0 0 20px var(--accent-glow); }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes slowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Utility Classes for Animations */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.17, 0.55, 0.55, 1);
}

.reveal.active {
    opacity: 1;
}

.fade-in { animation: fadeIn 0.8s ease forwards; }
.slide-up { animation: slideUp 0.8s cubic-bezier(0.17, 0.55, 0.55, 1) forwards; }
.slide-down { animation: slideDown 0.8s cubic-bezier(0.17, 0.55, 0.55, 1) forwards; }
.scale-in { animation: scaleIn 0.8s cubic-bezier(0.17, 0.55, 0.55, 1) forwards; }
.float { animation: float 3s ease-in-out infinite; }

/* Staggered Delay Utilities */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* Marquee Styles */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    padding: 20px 0;
    background: var(--bg-secondary);
    border-y: 1px solid var(--border);
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
}

.marquee-item {
    display: inline-block;
    margin-right: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-secondary);
}

.marquee-item i {
    color: var(--brand-orange);
    margin-right: 10px;
}

/* Glass Card Hover Tilt Effect */
.card-hover {
    transition: var(--transition);
}

.card-hover:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .card-hover:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}