/* =========================================================
   RETROBASS R-26
   Phase 7: Aktive Radioanzeige
   ========================================================= */

.radio-interface {
    position: absolute;
    z-index: 4;
    inset: 0;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;

    padding:
        clamp(8px, 1vw, 12px)
        clamp(9px, 1.2vw, 15px);

    color: #dd801e;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 500ms ease,
        visibility 0ms linear 500ms;
}

/* Erst nach vollständigem Boot sichtbar */

.receiver.is-ready .radio-interface {
    opacity: 1;
    visibility: visible;

    transition-delay: 100ms, 0ms;

}


/* ---------------------------------------------------------
   Kopfzeile
   --------------------------------------------------------- */

.radio-interface__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    min-height: 18px;

    border-bottom: 1px solid rgba(219, 118, 21, 0.12);

    color: rgba(222, 126, 29, 0.72);

    font-size: clamp(0.34rem, 0.59vw, 0.48rem);
    letter-spacing: 0.09em;
}

.radio-interface__clock {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.13em;
}

.radio-interface__status {
    justify-self: end;
}

/* Empfangsanzeige */

.radio-interface__signal {
    display: flex;
    align-items: flex-end;
    gap: 2px;

    height: 10px;
}

.radio-interface__signal i {
    display: block;

    width: 2px;

    border-radius: 1px;

    background: currentColor;

    box-shadow:
        0 0 4px rgba(218, 120, 23, 0.24);
}

.radio-interface__signal i:nth-child(1) {
    height: 35%;
}

.radio-interface__signal i:nth-child(2) {
    height: 65%;
}

.radio-interface__signal i:nth-child(3) {
    height: 100%;
}

/* ---------------------------------------------------------
   Hauptanzeige
   --------------------------------------------------------- */

.radio-interface__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 0;

    text-align: center;
}

.radio-interface__eyebrow {
    margin: 0 0 clamp(4px, 0.7vw, 7px);

    color: rgba(219, 120, 22, 0.54);

    font-size: clamp(0.31rem, 0.53vw, 0.44rem);
    letter-spacing: 0.18em;
}

.radio-interface__title {
    margin: 0;

    color: #e28a29;

    font-size: clamp(0.72rem, 1.55vw, 1.14rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.09em;

    text-shadow:
        0 0 6px rgba(224, 126, 27, 0.25);
}

.radio-interface__subtitle {
    margin:
        clamp(4px, 0.7vw, 7px)
        0
        0;

    color: rgba(222, 128, 31, 0.68);

    font-size: clamp(0.31rem, 0.55vw, 0.45rem);
    letter-spacing: 0.11em;
}

/* ---------------------------------------------------------
   ruhiger Visualizer
   --------------------------------------------------------- */

.radio-interface__visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(2px, 0.3vw, 4px);

    width: min(90%, 260px);
    height: clamp(20px, 4vw, 34px);
    margin-top: clamp(8px, 1.4vw, 14px);

    opacity: 0.82;
}

.radio-interface__visualizer span {
    width: clamp(2px, 0.38vw, 4px);
    height: var(--bar-height);

    border-radius: 1px 1px 0 0;

    background:
        linear-gradient(
            180deg,
            #f0a343,
            #c86612
        );

    box-shadow:
        0 0 4px rgba(221, 119, 21, 0.22);
}

/*
   Solange noch keine Musik läuft, bewegt sich der Visualizer
   nur wie eine sehr ruhige Empfangsanzeige.
*/

.receiver.is-ready
.radio-interface__visualizer span:nth-child(3n + 1) {
    animation: idle-bar-one 3.8s ease-in-out infinite alternate;
}

.receiver.is-ready
.radio-interface__visualizer span:nth-child(3n + 2) {
    animation: idle-bar-two 4.6s ease-in-out infinite alternate;
}

.receiver.is-ready
.radio-interface__visualizer span:nth-child(3n) {
    animation: idle-bar-three 5.2s ease-in-out infinite alternate;
}

/* ---------------------------------------------------------
   Fußzeile
   --------------------------------------------------------- */

.radio-interface__footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 9px;

    min-height: 18px;

    border-top: 1px solid rgba(219, 118, 21, 0.12);

    color: rgba(222, 126, 29, 0.62);

    font-size: clamp(0.29rem, 0.51vw, 0.42rem);
    letter-spacing: 0.08em;
}

.radio-interface__favorite {
    color: rgba(222, 126, 29, 0.46);
}

.radio-interface__favorite.is-active {
    color: #e59a43;

    text-shadow:
        0 0 6px rgba(226, 139, 47, 0.38);
}

.radio-interface__quality {
    padding: 1px 3px;

    border: 1px solid rgba(220, 126, 31, 0.28);
    border-radius: 2px;
}

/* ---------------------------------------------------------
   kurze Systemmeldungen
   --------------------------------------------------------- */

.radio-interface__message {
    position: absolute;
    z-index: 8;

    right: 8%;
    bottom: 17%;

    max-width: 84%;

    opacity: 0;
    pointer-events: none;

    transform: translateY(4px);
}

.radio-interface__message span {
    display: block;

    padding: 4px 7px;

    border: 1px solid rgba(216, 119, 24, 0.22);
    border-radius: 3px;

    color: rgba(238, 157, 67, 0.84);
    background: rgba(5, 3, 2, 0.90);

    font-size: clamp(0.3rem, 0.52vw, 0.43rem);
    letter-spacing: 0.08em;

    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.42);
}

.radio-interface__message.is-visible {
    animation: interface-message 1800ms ease both;
}

/* ---------------------------------------------------------
   Favoriten-Taste
   --------------------------------------------------------- */

.control-button[data-control="favorite"].is-active
.control-button__label {
    color: #8a4c10;

    text-shadow:
        0 0 4px rgba(190, 102, 16, 0.22);
}

.control-button[data-control="favorite"].is-active
.control-button__knob {
    box-shadow:
        inset 1px 1px 1px rgba(255, 255, 255, 0.48),
        inset -2px -2px 4px rgba(0, 0, 0, 0.42),
        0 2px 3px rgba(0, 0, 0, 0.38),
        0 0 9px rgba(200, 115, 29, 0.26);
}

/* ---------------------------------------------------------
   Lautstärke
   --------------------------------------------------------- */

.volume-control__knob {
    transform: rotate(var(--volume-angle, -12deg));

    transition:
        transform 170ms ease,
        filter 170ms ease;
}

.volume-control__indicator {
    transform: translateX(-50%);
    transform-origin: center;
}

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

@keyframes radio-interface-enter {
    from {
        opacity: 0;
        filter: blur(2px);
        transform: scale(0.992);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes idle-bar-one {
    from {
        transform: scaleY(0.72);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes idle-bar-two {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(0.66);
    }
}

@keyframes idle-bar-three {
    from {
        transform: scaleY(0.82);
    }

    to {
        transform: scaleY(1.08);
    }
}

@keyframes interface-message {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }

    15%,
    76% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-2px);
    }
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 480px) {
    .radio-interface {
        padding: 6px 7px;
    }

    .radio-interface__eyebrow {
        display: none;
    }

    .radio-interface__visualizer {
        width: 92%;
        height: 18px;
        margin-top: 5px;
    }

    .radio-interface__footer {
        gap: 5px;
    }

    .radio-interface__footer > span:first-child {
        max-width: 72px;
        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (prefers-reduced-motion: reduce) {
    .radio-interface__visualizer span {
        animation: none !important;
    }

    .receiver.is-ready .radio-interface {
        animation-duration: 1ms;
    }
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3b
   Aktiver Favorit im Messingstil
   ========================================================= */

.control-button[data-control="favorite"].is-active
.control-button__label {
    color:
        #6d4317;

    text-shadow:
        0 0 4px
        rgba(
            192,
            116,
            34,
            0.20
        );
}

.control-button[data-control="favorite"].is-active
.control-button__knob {
    filter:
        brightness(1.055)
        saturate(1.07);

    box-shadow:
        inset 1px 1px 1px
        rgba(
            255,
            245,
            210,
            0.52
        ),

        inset -2px -3px 5px
        rgba(
            38,
            19,
            4,
            0.54
        ),

        inset 0 0 0 1px
        rgba(
            255,
            222,
            151,
            0.16
        ),

        0 0 0 2px
        rgba(
            78,
            48,
            17,
            0.68
        ),

        0 3px 5px
        rgba(
            0,
            0,
            0,
            0.34
        ),

        0 0 9px
        rgba(
            204,
            132,
            39,
            0.14
        );
}