/* Announcement banner — CSS-only marquee animation */

.thch-banner {
    position: relative;
    overflow: hidden;
    font-family: var(--ob-font-body, 'Aptos', system-ui, sans-serif);
    font-weight: 600;
    line-height: 1;
    z-index: 100;
}

/* Scrolling track — duplicated content for seamless loop */
.thch-banner__track {
    display: flex;
    width: max-content;
    animation: thch-marquee var(--thch-banner-speed, 30s) linear infinite;
}

.thch-banner__text {
    flex-shrink: 0;
    padding: 0.625rem 0;
    white-space: nowrap;
    padding-right: 4rem; /* gap between repeats */
}

/* Dismiss button */
.thch-banner__close {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem; /* 44px Tap-Target */
    padding: 0 0.75rem;
    /* Deckend, damit die Laufschrift hinter dem X verschwindet (vorher lag
       die Opacity auf dem Button, der Text schien durch). */
    background: var(--thch-banner-bg, inherit);
    color: inherit;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.thch-banner__close svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.thch-banner__close:hover svg,
.thch-banner__close:focus-visible svg {
    opacity: 1;
}

.thch-banner__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

/* Fade edges */
.thch-banner::before,
.thch-banner::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3rem;
    z-index: 1;
    pointer-events: none;
}

.thch-banner::before {
    left: 0;
    background: linear-gradient(to right, var(--thch-banner-bg), transparent);
}

.thch-banner::after {
    right: 2.75rem;
    background: linear-gradient(to left, var(--thch-banner-bg), transparent);
}

/* Pause on hover */
.thch-banner:hover .thch-banner__track {
    animation-play-state: paused;
}

/* Reduced motion: static centered text */
@media (prefers-reduced-motion: reduce) {
    .thch-banner__track {
        animation: none;
        justify-content: center;
        width: 100%;
    }

    .thch-banner__text:not(:first-child) {
        display: none;
    }

    .thch-banner__text {
        text-align: center;
        padding-right: 0;
    }

    .thch-banner::before,
    .thch-banner::after {
        display: none;
    }
}

/* Hidden state */
.thch-banner[hidden] {
    display: none;
}

@keyframes thch-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}