.announcement-bar {
    width: 100%;
    overflow: hidden;
    background: var(--gradient-gold);
    border-bottom: 1px solid rgba(9, 28, 24, 0.16);
    position: relative;
}

.announcement-bar-track {
    display: flex;
    width: max-content;
    animation: announcement-bar-scroll var(--announcement-bar-duration, 30s) linear infinite;
}

.announcement-bar:hover .announcement-bar-track,
.announcement-bar:focus-within .announcement-bar-track {
    animation-play-state: paused;
}

.announcement-bar-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.announcement-bar-item {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    white-space: nowrap;
}

.announcement-bar-item:not(:first-child) {
    border-left: 1px solid rgba(9, 28, 24, 0.28);
}

.announcement-bar-text,
.announcement-bar-link {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-green);
    text-decoration: none;
}

.announcement-bar-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.announcement-bar-link:focus-visible {
    outline: 2px solid var(--ink-green);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm);
}

@keyframes announcement-bar-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .announcement-bar {
        overflow-x: auto;
    }

    .announcement-bar-track {
        animation: none;
        width: auto;
    }

    .announcement-bar-set[aria-hidden='true'] {
        display: none;
    }
}

@media (max-width: 600px) {
    .announcement-bar-item {
        padding: 0.55rem 1rem;
    }

    .announcement-bar-text,
    .announcement-bar-link {
        font-size: 0.68rem;
    }
}