/* Announcement Bar block styles. */

.block-announcement-bar {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 101;
}

.block-announcement-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 80rem;
    margin: 0 auto;
}

.block-announcement-bar__heading {
    font-weight: 600;
}

.block-announcement-bar__body {
    opacity: 0.9;
}

.block-announcement-bar__link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.block-announcement-bar__link:hover {
    opacity: 0.8;
}

/* Mobile-specific heading/body override — swapped at the `md` breakpoint. */
.block-announcement-bar__text--desktop {
    display: none;
}

@media (min-width: 768px) {
    .block-announcement-bar__text--mobile {
        display: none;
    }

    .block-announcement-bar__text--desktop {
        display: inline;
    }
}

/* ── Ticker variant — continuous horizontal scroll ────────────────
   Same duplicated-track technique as blocks/logo-strip/logo-strip.css,
   applied to text+link chips instead of logo images. */

.block-announcement-bar--ticker .block-announcement-bar__viewport {
    overflow: hidden;
    width: 100%;
    display: flex;
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
            mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.block-announcement-bar--ticker .block-announcement-bar__track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 3rem;
    padding-right: 3rem;
}

.block-announcement-bar--ticker .block-announcement-bar__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Motion only when the user hasn't asked for reduced motion — opt-in
   pattern keeps the default safe. */
@media (prefers-reduced-motion: no-preference) {
    .block-announcement-bar--ticker .block-announcement-bar__track {
        will-change: transform;
        animation: lcms-announcement-ticker-scroll var(--lcms-announcement-ticker-duration, 30s) linear infinite;
    }

    .block-announcement-bar--ticker.block-announcement-bar--direction-right .block-announcement-bar__track {
        animation-direction: reverse;
    }

    /* Pause on hover AND focus — a focused link shouldn't keep sliding
       out from under the user's keyboard focus while they read it. */
    .block-announcement-bar--ticker .block-announcement-bar__viewport:hover .block-announcement-bar__track,
    .block-announcement-bar--ticker .block-announcement-bar__viewport:focus-within .block-announcement-bar__track {
        animation-play-state: paused;
    }
}

.block-announcement-bar--speed-slow   { --lcms-announcement-ticker-duration: 45s; }
.block-announcement-bar--speed-medium { --lcms-announcement-ticker-duration: 30s; }
.block-announcement-bar--speed-fast   { --lcms-announcement-ticker-duration: 18s; }

/* Translate by 100% of the track's own width — the duplicate track sits
   exactly one track-width to the right via flex layout, so -100% lands the
   duplicate where the original started; the loop is seamless. */
@keyframes lcms-announcement-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* Reduced motion: degrade to a static, centered wrap-row — no motion, no
   information loss. Duplicate track is hidden since there's no loop to
   seamlessly join. */
@media (prefers-reduced-motion: reduce) {
    .block-announcement-bar--ticker .block-announcement-bar__viewport {
        justify-content: center;
        -webkit-mask-image: none;
                mask-image: none;
    }

    .block-announcement-bar--ticker .block-announcement-bar__track {
        flex-wrap: wrap;
        justify-content: center;
        padding-right: 0;
    }

    .block-announcement-bar--ticker .block-announcement-bar__track[aria-hidden="true"] {
        display: none;
    }
}