/* Explain: Styles for animations, including scroll reveal and hero section effects. */
/* Scroll & Load Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.5, 0, 0, 1) forwards;
    opacity: 0;
}

/* Hero animations */
@keyframes hero-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

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

@keyframes hero-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-marquee {
    animation: hero-marquee 28s linear infinite;
    width: max-content;
}

.hero-float {
    animation: hero-float 5s ease-in-out infinite;
}

.hero-float-slow {
    animation: hero-float 9s ease-in-out infinite;
}

.hero-spin {
    animation: hero-spin 14s linear infinite;
    transform-origin: 50% 50%;
}

.hero-grid {
    background-image:
        linear-gradient(to right, #ffffff 1px, transparent 1px),
        linear-gradient(to bottom, #ffffff 1px, transparent 1px);
    background-size: 64px 64px;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .animate-fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .hero-marquee,
    .hero-float,
    .hero-float-slow,
    .hero-spin {
        animation: none;
    }
}