/* ============================================================
   ILD MARQUEE WIDGET
   Percorso: /wp-content/themes/i-love-disco/assets/css/ild-marquee.css
   ============================================================ */

/* ── WRAPPER ─────────────────────────────────────────────── */
.ild-marquee-wrap {
    width:            100%;
    overflow:         hidden;
    position:         relative;
    background-color: var(--ild-magenta, #ff00ff);
    padding:          14px 0;
}

/* Dissolvenza ai bordi — attivata dal data-attribute */
.ild-marquee-wrap[data-fade="true"] {
    -webkit-mask-image: linear-gradient(
            to right,
            transparent  0%,
            black        7%,
            black       93%,
            transparent 100%
    );
    mask-image: linear-gradient(
            to right,
            transparent  0%,
            black        7%,
            black       93%,
            transparent 100%
    );
}

/* ── TRACK ───────────────────────────────────────────────── */
.ild-marquee-track {
    display:                  flex;
    align-items:              center;
    gap:                      48px;
    width:                    max-content;
    will-change:              transform;

    animation-name:           ild-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration:        20s;     /* sovrascritta inline */
    animation-direction:       normal;  /* sovrascritta inline */
    animation-play-state:      running;
}

/* Pausa su hover: JS legge data-pause e gestisce play-state,
   ma forniamo anche il puro CSS come fallback */
.ild-marquee-wrap[data-pause="true"]:hover .ild-marquee-track {
    animation-play-state: paused;
}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes ild-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── ITEM ────────────────────────────────────────────────── */
.ild-marquee-item {
    font-family:    var(--ild-font-display, 'Bebas Neue', sans-serif);
    font-size:      18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color:          var(--ild-white-pure, #ffffff);
    white-space:    nowrap;
    flex-shrink:    0;
    line-height:    1;
    cursor:         default;
    transition:
            color   0.25s ease,
            opacity 0.25s ease;
}

.ild-marquee-item:hover {
    color: var(--ild-gold, #c9a84c);
}

/* ── ITEM EVIDENZIATO ────────────────────────────────────── */
.ild-marquee-item.is-highlight {
    color: var(--ild-gold, #c9a84c);
}

/* ── SEPARATORE ──────────────────────────────────────────── */
.ild-marquee-sep {
    display:     inline-block;
    color:       rgba(255, 255, 255, 0.35);
    font-size:   1em;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

/* ── ACCESSIBILITÀ ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ild-marquee-track {
        animation:       none;
        flex-wrap:       wrap;
        width:           100%;
        justify-content: center;
        gap:             16px;
        padding:         0 20px;
    }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .ild-marquee-item {
        font-size:      14px;
        letter-spacing: 2px;
    }
    .ild-marquee-track {
        gap: 28px;
    }
}