/* =========================================================
   RETROBASS R-26
   Phase 10: Echtes Audio und Wiedergabestatus
   ========================================================= */

/* ---------------------------------------------------------
   Audioelement
   --------------------------------------------------------- */

[data-retrobass-audio] {
    display: none;
}

/* ---------------------------------------------------------
   Statusanzeige
   --------------------------------------------------------- */

.audio-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 12px;
    margin-top: clamp(3px, 0.5vw, 6px);

    color: rgba(223, 128, 31, 0.56);

    font-size: clamp(0.27rem, 0.46vw, 0.38rem);
    letter-spacing: 0.12em;

    transition:
        color 240ms ease,
        opacity 240ms ease;
}

.audio-state__icon {
    display: flex;
    align-items: flex-end;
    gap: 2px;

    width: 10px;
    height: 8px;
}

.audio-state__icon i {
    display: block;

    width: 2px;
    height: 2px;

    border-radius: 1px;

    background: currentColor;

    transform-origin: bottom;
}

.audio-state__text {
    white-space: nowrap;
}

/* ---------------------------------------------------------
   Standby
   --------------------------------------------------------- */

.receiver:not(.is-powered) .audio-state {
    opacity: 0;
}

.receiver.is-powered:not(.has-audio)
.audio-state {
    color: rgba(211, 113, 21, 0.45);
}

/* ---------------------------------------------------------
   Stream wird geladen
   --------------------------------------------------------- */

.receiver.is-audio-loading .audio-state {
    color: rgba(231, 148, 57, 0.76);
}

.receiver.is-audio-loading
.audio-state__icon i:nth-child(1) {
    animation: audio-loading 800ms ease-in-out infinite;
}

.receiver.is-audio-loading
.audio-state__icon i:nth-child(2) {
    animation: audio-loading 800ms ease-in-out 150ms infinite;
}

.receiver.is-audio-loading
.audio-state__icon i:nth-child(3) {
    animation: audio-loading 800ms ease-in-out 300ms infinite;
}

/* ---------------------------------------------------------
   Wiedergabe
   --------------------------------------------------------- */

.receiver.is-audio-playing .audio-state {
    color: #e5943d;

    text-shadow:
        0 0 5px rgba(223, 132, 41, 0.28);
}

.receiver.is-audio-playing
.audio-state__icon i:nth-child(1) {
    animation: audio-active-one 920ms ease-in-out infinite alternate;
}

.receiver.is-audio-playing
.audio-state__icon i:nth-child(2) {
    animation: audio-active-two 760ms ease-in-out infinite alternate;
}

.receiver.is-audio-playing
.audio-state__icon i:nth-child(3) {
    animation: audio-active-three 1080ms ease-in-out infinite alternate;
}

/* ---------------------------------------------------------
   Pausierter beziehungsweise leerer Kanal
   --------------------------------------------------------- */

.receiver.is-audio-unavailable .audio-state {
    color: rgba(215, 118, 26, 0.54);
}

.receiver.is-audio-unavailable
.audio-state__icon i {
    height: 2px;

    animation: none;
}

/* ---------------------------------------------------------
   Fehler
   --------------------------------------------------------- */

.receiver.has-audio-error .audio-state {
    color: rgba(237, 139, 50, 0.78);
}

.receiver.has-audio-error
.audio-state__icon i {
    height: 2px;

    animation: audio-error 850ms steps(1) infinite;
}

/* ---------------------------------------------------------
   Status oben rechts
   --------------------------------------------------------- */

.radio-interface__status {
    transition:
        color 220ms ease,
        text-shadow 220ms ease;
}

.receiver.is-audio-playing
.radio-interface__status {
    color: #e6963f;

    text-shadow:
        0 0 5px rgba(226, 136, 46, 0.30);
}

/* ---------------------------------------------------------
   Lautsprecherbewegung
   --------------------------------------------------------- */

/*
 * Dies ist bewusst keine erfundene Frequenzanalyse.
 * Der Lautsprecher zeigt lediglich an, dass das Gerät
 * tatsächlich Audio wiedergibt.
 */
/*
.receiver.is-audio-playing .speaker__cone,
.receiver.is-audio-playing .cone {
    animation: speaker-playback 980ms ease-in-out infinite alternate;
}
*/
.receiver.is-audio-loading .speaker__cone,
.receiver.is-audio-loading .cone {
    animation: none;
}

/* vorhandener Display-Visualizer */

.receiver:not(.is-audio-playing)
.radio-interface__visualizer span {
    animation-play-state: paused !important;

    transform: scaleY(0.35);
    opacity: 0.38;
}

.receiver.is-audio-playing
.radio-interface__visualizer span {
    animation-play-state: running;
    opacity: 0.82;
}

/* linker Equalizer */

.receiver:not(.is-audio-playing)
.display-equalizer span {
    height: 4px !important;
    opacity: 0.24;
}

.receiver.is-audio-playing
.display-equalizer span:nth-child(3n + 1) {
    animation: receiver-meter-one 1050ms ease-in-out infinite alternate;
}

.receiver.is-audio-playing
.display-equalizer span:nth-child(3n + 2) {
    animation: receiver-meter-two 820ms ease-in-out infinite alternate;
}

.receiver.is-audio-playing
.display-equalizer span:nth-child(3n) {
    animation: receiver-meter-three 1240ms ease-in-out infinite alternate;
}

/* ---------------------------------------------------------
   Animationen
   --------------------------------------------------------- */

@keyframes audio-loading {
    0%,
    100% {
        height: 2px;
        opacity: 0.35;
    }

    50% {
        height: 8px;
        opacity: 1;
    }
}

@keyframes audio-active-one {
    from {
        height: 3px;
    }

    to {
        height: 7px;
    }
}

@keyframes audio-active-two {
    from {
        height: 7px;
    }

    to {
        height: 4px;
    }
}

@keyframes audio-active-three {
    from {
        height: 4px;
    }

    to {
        height: 8px;
    }
}

@keyframes audio-error {
    0%,
    49% {
        opacity: 0.24;
    }

    50%,
    100% {
        opacity: 0.86;
    }
}
/*
@keyframes speaker-playback {
    from {
        transform: scale(0.996);
        filter: brightness(0.98);
    }

    to {
        transform: scale(1.004);
        filter: brightness(1.015);
    }
}
*/
@keyframes receiver-meter-one {
    from {
        transform: scaleY(0.36);
    }

    to {
        transform: scaleY(0.92);
    }
}

@keyframes receiver-meter-two {
    from {
        transform: scaleY(0.72);
    }

    to {
        transform: scaleY(0.42);
    }
}

@keyframes receiver-meter-three {
    from {
        transform: scaleY(0.48);
    }

    to {
        transform: scaleY(1);
    }
}

/* ---------------------------------------------------------
   Kleine Displays
   --------------------------------------------------------- */

@media (max-width: 480px) {
    .audio-state {
        margin-top: 2px;
    }

    .audio-state__text {
        max-width: 100px;

        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------------------------------------------------------
   Reduzierte Bewegung
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .receiver.is-audio-loading .audio-state__icon i,
    .receiver.is-audio-playing .audio-state__icon i,
    .receiver.is-audio-playing .speaker__cone,
    .receiver.is-audio-playing .cone,
    .receiver.is-audio-playing .display-equalizer span {
        animation: none !important;
    }
}