/* ===========================================
   Audio Waveform Loader
   Page-load indicator drawn on a single element, so existing
   loader markup works unchanged. Uses the white-label brand color.
   =========================================== */

.ls-spinner,
div.loading-spinner:empty:not(#loadingState),
.loading-spinner:not(:empty)::before,
#loadingState.loading-spinner::before {
    --ls-wave: linear-gradient(var(--brand-primary, #0EA5E9), var(--brand-primary, #0EA5E9));
    width: 48px;
    height: 40px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-image: var(--ls-wave), var(--ls-wave), var(--ls-wave), var(--ls-wave), var(--ls-wave);
    background-repeat: no-repeat;
    background-position: 0% 50%, 25% 50%, 50% 50%, 75% 50%, 100% 50%;
    background-size: 6px 30%, 6px 60%, 6px 100%, 6px 50%, 6px 25%;
    animation: ls-waveform 1.2s ease-in-out infinite;
}

@keyframes ls-waveform {
    0%, 100% { background-size: 6px 30%, 6px 60%, 6px 100%, 6px 50%, 6px 25%; }
    20%      { background-size: 6px 70%, 6px 35%, 6px 55%, 6px 100%, 6px 40%; }
    40%      { background-size: 6px 45%, 6px 100%, 6px 30%, 6px 65%, 6px 80%; }
    60%      { background-size: 6px 90%, 6px 50%, 6px 75%, 6px 30%, 6px 55%; }
    80%      { background-size: 6px 25%, 6px 80%, 6px 45%, 6px 85%, 6px 30%; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-spinner,
    div.loading-spinner:empty:not(#loadingState),
    .loading-spinner:not(:empty)::before,
    #loadingState.loading-spinner::before {
        animation: none;
    }
}