/* ==========================================================================
   Animations — Ported from Next.js globals.css
   ========================================================================== */

/* --- Entrance Animations --- */
.text-entrance-left {
    animation: text-entrance-left 0.6s ease 0s 1 normal forwards;
}

.text-entrance-right {
    animation: text-entrance-right 0.6s ease 0s 1 normal forwards;
}

.text-entrance-top {
    animation: text-entrance-top 0.6s ease 0s 1 normal forwards;
}

.text-entrance-bottom {
    animation: text-entrance-bottom 0.6s ease 0s 1 normal forwards;
}

/* --- Scroll-reveal: elements start hidden, animate in when .visible --- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- Badge bouncing --- */
.arrow-home {
    animation: btn-home-optimized 3s ease-in-out infinite;
}

.arrow-home:hover {
    transform: translateY(-4px);
}

/* --- Counter entrance --- */
.counter-animate {
    will-change: contents;
    animation: counter-entrance 0.8s ease-out forwards;
}

/* --- Pulse on hover --- */
.hover-pulse:hover {
    transform: scale(1.05);
    transition: transform 0.15s ease;
}

/* --- Spinner --- */
.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid hsl(var(--primary-foreground) / 0.6);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* --- Marquee (CSS-only infinite scroll) --- */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* --- Keyframes --- */
@keyframes text-entrance-left {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes text-entrance-right {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes text-entrance-top {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes text-entrance-bottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes btn-home-optimized {

    0%,
    85%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-4px);
    }

    20% {
        transform: translateY(2px);
    }

    30% {
        transform: translateY(-2px);
    }
}

@keyframes counter-entrance {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

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

    100% {
        transform: translateX(-50%);
    }
}