/* Everything a Tailwind utility can't express: the page gradient, the glass panel,
   and the two infinite marquee tracks. Tokens themselves live in assets/js/tailwind.config.js. */

body {
    background: linear-gradient(135deg, #f0fdfa 0%, #e0e7ff 100%);
    min-height: 100vh;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Full-bleed strip: breaks out of the centred container, fades at both ends. */
.pill-scroll-container {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* The track holds the pill set twice; translating -50% lands on the duplicate,
   so the loop restart is invisible. */
.pill-track {
    display: flex;
    gap: 16px;
    padding: 24px 0;
    animation: scroll 30s linear infinite;
}

.pill-track.reverse {
    animation: scroll-reverse 35s linear infinite;
}

@keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-reverse {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Respect the OS reduced-motion setting — a looping marquee is a vestibular trigger. */
@media (prefers-reduced-motion: reduce) {
    .pill-track,
    .pill-track.reverse {
        animation: none;
    }
}