.stf-ticker {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    box-sizing: border-box;
}

.stf-frame {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #c0392b;
    white-space: nowrap;
}

.stf-viewport {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    min-width: 0;
}

.stf-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation-name: stf-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* Pause on hover so people can read a specific pass without it running away. */
.stf-track:hover {
    animation-play-state: paused;
}

/* Expanded state: clicking the ticker shows the full text, wrapped and
   static, instead of the scrolling marquee. */
.stf-ticker.stf-expanded {
    align-items: flex-start;
    cursor: default;
}

.stf-ticker.stf-expanded .stf-viewport {
    overflow: visible;
}

.stf-ticker.stf-expanded .stf-track {
    animation: none !important;
    transform: none !important;
    display: block;
    white-space: normal;
}

.stf-ticker.stf-expanded .stf-text {
    white-space: normal;
    padding-right: 0;
}

.stf-ticker.stf-expanded .stf-text[aria-hidden="true"] {
    display: none;
}

.stf-ticker.stf-expanded .stf-separator {
    display: none;
}

.stf-viewport {
    cursor: pointer;
}

.stf-text {
    display: inline-block;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
}

@keyframes stf-scroll {
    from {
        transform: translateX(0);
    }
    to {
        /* Track holds two identical copies of the text back to back, so
           shifting by exactly half its width loops seamlessly. */
        transform: translateX(-50%);
    }
}

.stf-empty-note {
    opacity: 0.7;
    font-style: italic;
}

/* Respect reduced-motion preferences: stop the scroll and show the text
   statically instead of forcing continuous motion on everyone. */
@media (prefers-reduced-motion: reduce) {
    .stf-track {
        animation: none;
    }
    .stf-text[aria-hidden="true"] {
        display: none;
    }
}