/* =========================================================
HOCKENHEIM-FM – STREAM ONLINE LIGHT RUN
=========================================================

OFF = Originalbanner unverändert
ON  = wandernder Lichtglanz auf den vorhandenen roten Beams
========================================================= */

.banner {
    position: relative;
    overflow: hidden;
}

.hfm-banner-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.hfm-banner-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

.banner.is-stream-online .hfm-banner-glow {
    opacity: 1;
}

.banner:not(.is-stream-online) .hfm-banner-glow {
    display: none;
}

.hfm-banner-glow-beam {
    position: absolute;
    display: block;
    background: transparent;
    pointer-events: none;
}


/* =========================================================
LANGER / UNTERER BEAM
========================================================= */

.hfm-banner-glow-beam-long {
    left: 42%;
    top: 53.5%;
    width: 52%;
    height: 18px;

    transform: translateY(-50%);
    overflow: visible;
}

.banner.is-stream-online .hfm-banner-glow-beam-long::after {
    content: "";
    position: absolute;

    left: -5%;
    top: 54.4%;

    width: 110px;
    height: 4px;

    transform: translateY(-50%);
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 245, 225, 1) 0%,
            rgba(255, 170, 110, 0.95) 12%,
            rgba(255, 65, 35, 0.78) 30%,
            rgba(255, 20, 10, 0.32) 55%,
            rgba(255, 0, 0, 0) 78%
        );

    filter:
        drop-shadow(0 0 3px rgba(255, 255, 230, 1))
        drop-shadow(0 0 7px rgba(255, 180, 110, 0.85))
        drop-shadow(0 0 12px rgba(255, 70, 30, 0.55));

    mix-blend-mode: screen;

    animation:
        hfm-long-light-run 5.2s ease-in-out infinite;
}


/* =========================================================
KLEINER / OBERER BEAM
========================================================= */

.hfm-banner-glow-beam-small {
    left: 86%;
    top: 32%;
    width: 7%;
    height: 14.5px;

    transform: translateY(-50%);
    overflow: visible;
}

.banner.is-stream-online .hfm-banner-glow-beam-small::after {
    content: "";
    position: absolute;

    left: -15%;
    top: 50%;

    width: 55px;
    height: 4px;

    transform: translateY(-50%);
    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 235, 1) 0%,
            rgba(255, 190, 120, 0.95) 15%,
            rgba(255, 70, 35, 0.78) 34%,
            rgba(255, 20, 10, 0.28) 58%,
            rgba(255, 0, 0, 0) 80%
        );

    box-shadow:
        0 0 5px rgba(255, 200, 130, 0.9),
        0 0 11px rgba(255, 65, 35, 0.7),
        0 0 18px rgba(255, 20, 10, 0.35);

    mix-blend-mode: screen;

    animation:
        hfm-small-light-run 5.2s ease-in-out infinite;
}


/* =========================================================
KURZER SPIEGELREFLEX / STERN
========================================================= */

.banner.is-stream-online .hfm-banner-glow-beam-small::before {
    content: "✦";
    position: absolute;

    left: 63%;
    top: 50%;

    width: auto;
    height: auto;

    color: #ffffff;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    line-height: 1;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.4);

    transform-origin: center;

    text-shadow:
        0 0 2px rgba(255, 255, 255, 1),
        0 0 5px rgba(255, 225, 180, 0.95),
        0 0 9px rgba(255, 120, 50, 0.75);

    animation:
        hfm-small-end-glint 5.2s ease-in-out infinite;
}


/* =========================================================
UNTERER GLOW
STARTET ZUERST
========================================================= */

@keyframes hfm-long-light-run {
    0%,
    5% {
        left: -8%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        left: 50%;
        opacity: 1;
    }

    45% {
        left: 50%;
        opacity: 0;
    }

    100% {
        left: 50%;
        opacity: 0;
    }
}


/* =========================================================
OBERER GLOW
STARTET NACH DEM UNTEREN
========================================================= */

@keyframes hfm-small-light-run {
    0%,
    45% {
        left: -13%;
        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    80% {
        left: 48%;
        opacity: 1;
    }

    87% {
        left: 55%;
        opacity: 0;
    }

    100% {
        left: 55%;
        opacity: 0;
    }
}


/* =========================================================
SPIEGELREFLEX / STERN
KOMMT AM ENDE DES OBEREN GLOWS
========================================================= */

@keyframes hfm-small-end-glint {
    0%,
    79% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.4);
    }

    82% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.8);
    }

    85% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.6);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.4);
    }
}