/* Explain: CSS for custom animations, hover effects, separators, and reveal animations. - */
/* Marquee Animation for continuous carousel */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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

.animate-marquee {
    animation: marquee 35s linear infinite;
}

.animate-marquee-reverse {
    animation: marquee-reverse 35s linear infinite;
}

.animate-marquee:hover, .animate-marquee-reverse:hover {
    animation-play-state: paused;
}

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

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

.finish-line-divider {
    height: 8px;
    width: 100px;
    background: linear-gradient(to right, var(--accent-color), var(--gold-color));
}

@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-7px) rotate(5deg); }
    50% { transform: translateY(-15px) rotate(0deg); }
    75% { transform: translateY(-7px) rotate(-5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float-no-rotate {
    0% { transform: translateY(0px); }
    25% { transform: translateY(-7px); }
    50% { transform: translateY(-15px); }
    75% { transform: translateY(-7px); }
    100% { transform: translateY(0px); }
}
.animate-float-no-rotate {
    animation: float-no-rotate 6s ease-in-out infinite;
}

/* Scroll Reveal Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fullscreen Menu Text Stroke */
.text-stroke-white {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}
.text-stroke-white:hover {
    color: white;
    -webkit-text-stroke: 1.5px transparent;
}
@media (min-width: 768px) {
    .text-stroke-white {
        -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
    }
}