/* ==========================================================
   320 FM · Stream Start Feedback
   ========================================================== */

/*
 * BIG PLAYER
 */

[data-fm-live-player]:not([data-player-surface="header"]){
    position:relative;
}

.fm-stream-start-layer{
    position:absolute;
    z-index:24;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:22px;

    border-radius:inherit;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(42,175,225,.10),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(4,7,9,.60),
            rgba(4,7,9,.82)
        );

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.fm-stream-start-layer.is-visible{
    opacity:1;
    visibility:visible;
}

.fm-stream-start-content{
    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

.fm-stream-start-kicker{
    margin-bottom:13px;

    color:#d52d94;

    font-size:11px;
    line-height:1;
    font-weight:900;
    letter-spacing:.18em;
}

.fm-stream-start-title{
    margin-top:14px;

    color:#f3f7f9;

    font-size:15px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:.10em;

    text-shadow:
        0 2px 12px rgba(0,0,0,.45);
}

.fm-stream-start-subtitle{
    margin-top:7px;

    color:#85959d;

    font-size:11px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:.05em;
}


/*
 * EQUALIZER
 */

.fm-stream-eq{
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:4px;
}

.fm-stream-eq > i{
    display:block;

    width:3px;
    height:8px;

    border-radius:3px;

    background:#2aafe1;

    box-shadow:
        0 0 10px rgba(42,175,225,.28);

    transform-origin:center;

    animation:
        fmStreamEq 720ms
        ease-in-out
        infinite alternate;
}

.fm-stream-eq > i:nth-child(2){
    animation-delay:120ms;
}

.fm-stream-eq > i:nth-child(3){
    animation-delay:240ms;
}

.fm-stream-eq > i:nth-child(4){
    animation-delay:80ms;
}

.fm-stream-eq > i:nth-child(5){
    animation-delay:200ms;
}

@keyframes fmStreamEq{
    0%{
        height:6px;
        opacity:.48;
    }

    45%{
        height:19px;
        opacity:1;
    }

    100%{
        height:10px;
        opacity:.72;
    }
}


/*
 * HEADER PLAYER
 *
 * Nur kompakte Balken.
 */

[data-player-surface="header"]
.fm-header-stream-loader{
    width:18px;
    height:18px;

    display:none;
    align-items:center;
    justify-content:center;

    gap:2px;
}

[data-player-surface="header"].is-stream-loading
.fm-header-stream-loader{
    display:flex;
}

[data-player-surface="header"]
.fm-header-stream-loader > i{
    display:block;

    width:2px;
    height:6px;

    border-radius:2px;

    background:currentColor;

    animation:
        fmHeaderStreamEq 610ms
        ease-in-out
        infinite alternate;
}

[data-player-surface="header"]
.fm-header-stream-loader > i:nth-child(2){
    animation-delay:120ms;
}

[data-player-surface="header"]
.fm-header-stream-loader > i:nth-child(3){
    animation-delay:240ms;
}

@keyframes fmHeaderStreamEq{
    0%{
        height:4px;
        opacity:.52;
    }

    100%{
        height:13px;
        opacity:1;
    }
}


/*
 * Das vorhandene Icon wird während des Verbindens lediglich
 * optisch ausgeblendet. Die Buttonfläche bleibt unverändert.
 */

[data-player-surface="header"].is-stream-loading
[data-player-play-icon]{
    display:none;
}


/*
 * ERROR
 */

[data-player-surface="header"].is-stream-error{
    color:#d52d94;
}

.fm-stream-start-layer.is-error{
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(213,45,148,.13),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            rgba(4,7,9,.66),
            rgba(4,7,9,.86)
        );
}

.fm-stream-start-layer.is-error
.fm-stream-eq{
    display:none;
}

.fm-stream-start-layer.is-error
.fm-stream-start-title{
    color:#f0a0d0;
}


/*
 * Accessibility
 */

@media (prefers-reduced-motion:reduce){

    .fm-stream-eq > i,
    [data-player-surface="header"]
    .fm-header-stream-loader > i{
        animation:none;
        height:9px;
    }

    .fm-stream-start-layer{
        transition:none;
    }
}