/*
 * Text Marquee — stili del blocco acf/text-marquee.
 *
 * Il loop seamless si ottiene duplicando il DOM delle voci in template.php e
 * animando __track con translateX(-50%): al raggiungimento della metà (la
 * copia) l'animazione riparte da 0 invisibilmente.
 *
 * --marquee-duration e --marquee-gap sono iniettati inline da template.php.
 */

@keyframes scaffold-marquee {
    to { transform: translateX(-50%); }
}

.scaffold-text-marquee {
    overflow: hidden;
}

.scaffold-text-marquee__track {
    animation: scaffold-marquee var(--marquee-duration, 20s) linear infinite;
    display: flex;
    gap: var(--marquee-gap, var(--spacing-xl, 5rem));
    will-change: transform;
}

.scaffold-text-marquee--pause-on-hover .scaffold-text-marquee__track:hover {
    animation-play-state: paused;
}

.scaffold-text-marquee__inner {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--marquee-gap, var(--spacing-xl, 5rem));
}

.scaffold-text-marquee__item {
    flex-shrink: 0;
    white-space: nowrap;
}

.scaffold-text-marquee__item .marquee-text {
    color: var(--color-text);
    font-family: var(--font-family-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-regular);
}

.scaffold-text-marquee__item .marquee-icon {
    color: var(--color-category-title);
    font-family: var(--font-family-sans);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-regular);
}

/* Rispetta la preferenza di riduzione del movimento (a11y). */
@media (prefers-reduced-motion: reduce) {
    .scaffold-text-marquee__track {
        animation: none;
    }

    .scaffold-text-marquee__inner:not(:first-child) {
        display: none;
    }
}