/* 1. Seamless Scrolling Animation */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-content {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Reduced gap (Space between entities) */
    min-width: 100%;
    animation: scroll 25s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

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

/* 2. Blinking Dot Animation */
.blink-active {
    animation: blinker 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes blinker {

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

    50% {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Pause on hover for better UX */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}