/* =========================================================
   RETROBASS R-26
   Lautsprecherbewegung – Phase 2.3

   Die Membran reagiert auf den echten Basspegel aus
   speaker-engine.js.

   Keine Wiedergabe = keine Bewegung.
   ========================================================= */

.receiver {
    --speaker-bass-level: 0;
    --speaker-motion-scale: 1;
    --speaker-motion-depth: 0px;
    --speaker-motion-light: 1;
}

/* ---------------------------------------------------------
   Räumliche Grundlage
   --------------------------------------------------------- */

.speaker {
    perspective: 520px;
}

/* ---------------------------------------------------------
   Feste Bauteile
   --------------------------------------------------------- */

.speaker__chassis,
.speaker__ring,
.speaker__reflection {
    animation: none !important;
}

.speaker__chassis,
.speaker__ring {
    transform: none !important;
}

/* ---------------------------------------------------------
   Bewegliche Membraneinheit
   --------------------------------------------------------- */

.speaker__surround {
    transform:
        translateZ(
            calc(
                var(--speaker-bass-level) *
                2.2px
            )
        )
        scale(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.045
            )
        );

    transform-origin: 50% 50%;

    filter:
        brightness(
            calc(
                0.98 +
                var(--speaker-bass-level) *
                0.08
            )
        )
        contrast(
            calc(
                1.01 +
                var(--speaker-bass-level) *
                0.025
            )
        )
        drop-shadow(
            0
            calc(
                4px -
                var(--speaker-bass-level) *
                3px
            )
            calc(
                7px -
                var(--speaker-bass-level) *
                3px
            )
            rgba(
                0,
                0,
                0,
                calc(
                    0.68 -
                    var(--speaker-bass-level) *
                    0.22
                )
            )
        );

    transition:
        transform 35ms linear,
        filter 35ms linear;

    backface-visibility: hidden;
    will-change: transform, filter;
}

/* ---------------------------------------------------------
   Konus folgt der Sicke ohne eigene Bewegung
   --------------------------------------------------------- */

.speaker__cone {
    animation: none !important;
    transform: none;
    transform-origin: 50% 50%;
}

/* ---------------------------------------------------------
   Staubschutzkalotte bleibt korrekt zentriert
   --------------------------------------------------------- */

.speaker__dust-cap {
    animation: none !important;

    transform:
        translate(-50%, -50%)
        scale(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.004
            )
        );

    transform-origin: 50% 50%;

    filter:
        brightness(
            calc(
                0.96 +
                var(--speaker-bass-level) *
                0.12
            )
        );

    transition:
        transform 35ms linear,
        filter 35ms linear;

    will-change: transform, filter;
}

/* ---------------------------------------------------------
   Ohne aktive Wiedergabe vollständig still
   --------------------------------------------------------- */

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__surround {
    transform:
        translateZ(0)
        scale(1);

    filter: none;

    transition:
        transform 160ms ease-out,
        filter 160ms ease-out;

    will-change: auto;
}

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__dust-cap {
    transform:
        translate(-50%, -50%)
        scale(1);

    filter: none;

    transition:
        transform 160ms ease-out,
        filter 160ms ease-out;

    will-change: auto;
}

/* ---------------------------------------------------------
   Ausgeschalteter Receiver
   --------------------------------------------------------- */

.receiver:not(.is-powered)
.speaker__surround {
    transform:
        translateZ(0)
        scale(1) !important;

    filter: none !important;
}

.receiver:not(.is-powered)
.speaker__dust-cap {
    transform:
        translate(-50%, -50%)
        scale(1) !important;

    filter: none !important;
}

/* ---------------------------------------------------------
   Bewegungsreduzierung
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .speaker__surround {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .speaker__dust-cap {
        transform:
            translate(-50%, -50%) !important;

        filter: none !important;
        transition: none !important;
    }
}
/* =========================================================
   Phase 3.1
   Dynamische Licht- und Schattenreaktion
   ========================================================= */

.receiver.is-audio-playing .speaker__cone,
.receiver.is-video-playing .speaker__cone {
    box-shadow:
        inset
        0
        calc(
            3px -
            var(--speaker-bass-level) * 1.5px
        )
        calc(
            8px -
            var(--speaker-bass-level) * 2px
        )
        rgba(
            255,
            255,
            255,
            calc(
                0.045 +
                var(--speaker-bass-level) * 0.035
            )
        ),

        inset
        0
        calc(
            -28px +
            var(--speaker-bass-level) * 10px
        )
        calc(
            48px -
            var(--speaker-bass-level) * 10px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.82 -
                var(--speaker-bass-level) * 0.20
            )
        ),

        inset
        0
        0
        calc(
            38px -
            var(--speaker-bass-level) * 8px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.48 -
                var(--speaker-bass-level) * 0.12
            )
        ),

        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            calc(
                0.018 +
                var(--speaker-bass-level) * 0.018
            )
        );

    transition:
        box-shadow 35ms linear;
}

/* =========================================================
   Phase 3.2
   Dynamische Konus-Tiefe
   ========================================================= */

.receiver.is-audio-playing .speaker__cone,
.receiver.is-video-playing .speaker__cone {
    box-shadow:
        inset
        0
        calc(
            3px -
            var(--speaker-bass-level) * 1.2px
        )
        calc(
            8px -
            var(--speaker-bass-level) * 1.5px
        )
        rgba(
            255,
            255,
            255,
            calc(
                0.045 +
                var(--speaker-bass-level) * 0.025
            )
        ),

        inset
        0
        calc(
            -28px +
            var(--speaker-bass-level) * 8px
        )
        calc(
            48px -
            var(--speaker-bass-level) * 8px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.82 -
                var(--speaker-bass-level) * 0.16
            )
        ),

        inset
        0
        0
        calc(
            38px -
            var(--speaker-bass-level) * 6px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.48 -
                var(--speaker-bass-level) * 0.10
            )
        ),

        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            calc(
                0.018 +
                var(--speaker-bass-level) * 0.012
            )
        );

    transition:
        box-shadow 35ms linear;
}

/* =========================================================
   Phase 3.3
   Dynamische Gummisicke
   ========================================================= */

.receiver.is-audio-playing .speaker__surround,
.receiver.is-video-playing .speaker__surround {
    box-shadow:
        inset
        0
        calc(
            5px -
            var(--speaker-bass-level) * 1.4px
        )
        calc(
            9px -
            var(--speaker-bass-level) * 1.8px
        )
        rgba(
            255,
            255,
            255,
            calc(
                0.035 +
                var(--speaker-bass-level) * 0.018
            )
        ),

        inset
        0
        calc(
            -11px +
            var(--speaker-bass-level) * 3.5px
        )
        calc(
            18px -
            var(--speaker-bass-level) * 3.5px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.92 -
                var(--speaker-bass-level) * 0.14
            )
        ),

        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            0.018
        );

    transition:
        box-shadow 35ms linear;
}

/* =========================================================
   Phase 3.4
   Dynamische Staubschutzkalotte
   ========================================================= */

.receiver.is-audio-playing .speaker__dust-cap,
.receiver.is-video-playing .speaker__dust-cap {
    box-shadow:
        inset
        calc(
            1px +
            var(--speaker-bass-level) * 0.8px
        )
        calc(
            2px -
            var(--speaker-bass-level) * 0.4px
        )
        calc(
            4px +
            var(--speaker-bass-level) * 1.4px
        )
        rgba(
            255,
            255,
            255,
            calc(
                0.045 +
                var(--speaker-bass-level) * 0.035
            )
        ),

        inset
        calc(
            -3px +
            var(--speaker-bass-level) * 0.8px
        )
        calc(
            -4px +
            var(--speaker-bass-level) * 0.8px
        )
        calc(
            8px -
            var(--speaker-bass-level) * 1.8px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.72 -
                var(--speaker-bass-level) * 0.15
            )
        ),

        0
        calc(
            2px -
            var(--speaker-bass-level) * 0.8px
        )
        calc(
            5px -
            var(--speaker-bass-level) * 1px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.54 -
                var(--speaker-bass-level) * 0.14
            )
        );

    filter:
        brightness(
            calc(
                0.96 +
                var(--speaker-bass-level) * 0.10
            )
        )
        contrast(
            calc(
                1.01 +
                var(--speaker-bass-level) * 0.02
            )
        );

    transition:
        box-shadow 35ms linear,
        filter 35ms linear;
}

/* =========================================================
   Phase 3.5
   Dynamischer Übergang zwischen Sicke und Konus
   ========================================================= */

.receiver.is-audio-playing .speaker__cone,
.receiver.is-video-playing .speaker__cone {
    outline:
        1px solid
        rgba(
            255,
            255,
            255,
            calc(
                0.015 +
                var(--speaker-bass-level) * 0.020
            )
        );

    outline-offset:
        calc(
            -1px +
            var(--speaker-bass-level) * 0.5px
        );
}

/* Innerer Übergangsring */
.receiver.is-audio-playing .speaker__cone::after,
.receiver.is-video-playing .speaker__cone::after {
    opacity:
        calc(
            0.78 +
            var(--speaker-bass-level) * 0.18
        );

    filter:
        brightness(
            calc(
                0.96 +
                var(--speaker-bass-level) * 0.08
            )
        );

    transition:
        opacity 35ms linear,
        filter 35ms linear;
}

/* Sicke bleibt am Rand optisch tiefer */
.receiver.is-audio-playing .speaker__surround,
.receiver.is-video-playing .speaker__surround {
    border:
        1px solid
        rgba(
            0,
            0,
            0,
            calc(
                0.42 -
                var(--speaker-bass-level) * 0.14
            )
        );
}

/* =========================================================
   Phase 3.6
   Reflexion und Materialantwort
   ========================================================= */

/* ---------------------------------------------------------
   Messingring reagiert minimal auf stärkeren Hub
   --------------------------------------------------------- */

.receiver.is-audio-playing .speaker__ring,
.receiver.is-video-playing .speaker__ring {
    filter:
        brightness(
            calc(
                1 +
                var(--speaker-bass-level) * 0.055
            )
        )
        saturate(
            calc(
                1 +
                var(--speaker-bass-level) * 0.04
            )
        );

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            255,
            226,
            168,
            calc(
                0.16 +
                var(--speaker-bass-level) * 0.035
            )
        ),

        0
        0
        0
        1px
        rgba(
            17,
            9,
            4,
            0.92
        ),

        0
        calc(
            4px -
            var(--speaker-bass-level) * 0.8px
        )
        calc(
            10px -
            var(--speaker-bass-level) * 1.5px
        )
        rgba(
            0,
            0,
            0,
            calc(
                0.72 -
                var(--speaker-bass-level) * 0.08
            )
        ),

        0
        0
        calc(
            var(--speaker-bass-level) * 5px
        )
        rgba(
            214,
            145,
            67,
            calc(
                var(--speaker-bass-level) * 0.075
            )
        );

    transition:
        filter 45ms linear,
        box-shadow 45ms linear;
}

/* ---------------------------------------------------------
   Lichtreflexion bewegt sich hauchfein mit
   --------------------------------------------------------- */

.receiver.is-audio-playing .speaker__reflection,
.receiver.is-video-playing .speaker__reflection {
    opacity:
        calc(
            0.12 +
            var(--speaker-bass-level) * 0.045
        );

    transform:
        translate(
            calc(
                var(--speaker-bass-level) * 0.8px
            ),
            calc(
                var(--speaker-bass-level) * -0.5px
            )
        )
        rotate(-18deg)
        scale(
            calc(
                1 +
                var(--speaker-bass-level) * 0.018
            )
        );

    filter:
        blur(
            calc(
                6px -
                var(--speaker-bass-level) * 0.8px
            )
        )
        brightness(
            calc(
                1 +
                var(--speaker-bass-level) * 0.08
            )
        );

    transition:
        opacity 45ms linear,
        transform 45ms linear,
        filter 45ms linear;
}

/* ---------------------------------------------------------
   Stillstand
   --------------------------------------------------------- */

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__ring {
    filter: none;

    transition:
        filter 180ms ease-out,
        box-shadow 180ms ease-out;
}

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__reflection {
    opacity: 0.12;

    transform:
        rotate(-18deg)
        scale(1);

    filter:
        blur(6px);

    transition:
        opacity 180ms ease-out,
        transform 180ms ease-out,
        filter 180ms ease-out;
}

/* =========================================================
   Phase 3.9
   Akustische Ruhe und vollständiger Stillstand
   ========================================================= */

/* ---------------------------------------------------------
   Membraneinheit kehrt ruhig in die Grundposition zurück
   --------------------------------------------------------- */

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__surround {
    transform:
        translateZ(0)
        scale(1);

    filter:
        none;

    border-color:
        transparent;

    transition:
        transform 220ms ease-out,
        filter 220ms ease-out,
        border-color 220ms ease-out;

    will-change:
        auto;
}

/* ---------------------------------------------------------
   Konus verliert alle dynamischen Zustände
   --------------------------------------------------------- */

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__cone {
    outline:
        1px solid
        rgba(
            255,
            255,
            255,
            0.012
        );

    outline-offset:
        -1px;

    box-shadow:
        inset 0 3px 8px
        rgba(
            255,
            255,
            255,
            0.045
        ),

        inset 0 -28px 48px
        rgba(
            0,
            0,
            0,
            0.82
        ),

        inset 0 0 38px
        rgba(
            0,
            0,
            0,
            0.48
        ),

        0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.018
        );

    transition:
        box-shadow 220ms ease-out,
        outline-color 220ms ease-out,
        outline-offset 220ms ease-out;
}

/* ---------------------------------------------------------
   Kalotte kehrt exakt in ihre Ruheposition zurück
   --------------------------------------------------------- */

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__dust-cap {
    transform:
        translate(-50%, -50%)
        scale(1);

    filter:
        none;

    box-shadow:
        inset 1px 2px 4px
        rgba(
            255,
            255,
            255,
            0.045
        ),

        inset -3px -4px 8px
        rgba(
            0,
            0,
            0,
            0.72
        ),

        0 2px 5px
        rgba(
            0,
            0,
            0,
            0.54
        );

    transition:
        transform 220ms ease-out,
        filter 220ms ease-out,
        box-shadow 220ms ease-out;

    will-change:
        auto;
}

/* ---------------------------------------------------------
   Messingring verliert jede Bassreaktion
   --------------------------------------------------------- */

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__ring {
    filter:
        none;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            255,
            226,
            168,
            0.16
        ),

        0 0 0 1px
        rgba(
            17,
            9,
            4,
            0.92
        ),

        0 4px 10px
        rgba(
            0,
            0,
            0,
            0.72
        );

    transition:
        filter 220ms ease-out,
        box-shadow 220ms ease-out;
}

/* ---------------------------------------------------------
   Reflexion kehrt in die feste Ruheposition zurück
   --------------------------------------------------------- */

.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__reflection {
    opacity:
        0.12;

    transform:
        rotate(-18deg)
        scale(1);

    filter:
        blur(6px);

    transition:
        opacity 220ms ease-out,
        transform 220ms ease-out,
        filter 220ms ease-out;
}

/* ---------------------------------------------------------
   Ausgeschalteter Receiver:
   keine sichtbare Restreaktion
   --------------------------------------------------------- */

.receiver:not(.is-powered)
.speaker__surround,
.receiver:not(.is-powered)
.speaker__cone,
.receiver:not(.is-powered)
.speaker__dust-cap,
.receiver:not(.is-powered)
.speaker__ring,
.receiver:not(.is-powered)
.speaker__reflection {
    animation:
        none !important;

    transition:
        none !important;
}

/* =========================================================
   Phase 3.11
   Dynamische Reflexionsschärfe
   ========================================================= */

.receiver.is-audio-playing .speaker__reflection,
.receiver.is-video-playing .speaker__reflection {
    filter:
        blur(
            calc(
                6px -
                var(--speaker-bass-level) * 1.22px
            )
        )
        brightness(
            calc(
                1 +
                var(--speaker-bass-level) * 0.075
            )
        )
        contrast(
            calc(
                1 +
                var(--speaker-bass-level) * 0.045
            )
        );

    opacity:
        calc(
            0.12 +
            var(--speaker-bass-level) * 0.038
        );

    transition:
        filter 40ms linear,
        opacity 40ms linear,
        transform 45ms linear;
}

/* Ruhiger Materialzustand */
.receiver:not(.is-audio-playing):not(.is-video-playing)
.speaker__reflection {
    filter:
        blur(6px)
        brightness(1)
        contrast(1);

    opacity:
        0.12;

    transition:
        filter 220ms ease-out,
        opacity 220ms ease-out,
        transform 220ms ease-out;
}

/* =========================================================
   Phase 3.12
   Unterschiedlicher Quellencharakter

   RADIO:
   ruhiger, schwerer, zurückhaltender

   VIDEO:
   direkter, dynamischer, plastischer
   ========================================================= */


/* ---------------------------------------------------------
   Radio – klassischer, ruhiger Receiver-Charakter
   --------------------------------------------------------- */

.receiver[data-speaker-source="radio-fallback"]
.speaker__surround {
    transform:
        translateZ(
            calc(
                var(--speaker-bass-level) *
                1.45px
            )
        )
        scale(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.030
            )
        );

    filter:
        brightness(
            calc(
                0.985 +
                var(--speaker-bass-level) *
                0.045
            )
        )
        contrast(
            calc(
                1.01 +
                var(--speaker-bass-level) *
                0.018
            )
        )
        drop-shadow(
            0
            calc(
                4px -
                var(--speaker-bass-level) *
                2px
            )
            calc(
                7px -
                var(--speaker-bass-level) *
                2px
            )
            rgba(
                0,
                0,
                0,
                calc(
                    0.68 -
                    var(--speaker-bass-level) *
                    0.14
                )
            )
        );
}


/* Radio-Messing bleibt bewusst zurückhaltend */

.receiver[data-speaker-source="radio-fallback"]
.speaker__ring {
    filter:
        brightness(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.028
            )
        )
        saturate(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.018
            )
        );
}


/* Radio-Reflexion: weich und ruhig */

.receiver[data-speaker-source="radio-fallback"]
.speaker__reflection {
    opacity:
        calc(
            0.12 +
            var(--speaker-bass-level) *
            0.022
        );

    filter:
        blur(
            calc(
                6px -
                var(--speaker-bass-level) *
                0.72px
            )
        )
        brightness(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.038
            )
        )
        contrast(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.022
            )
        );
}


/* ---------------------------------------------------------
   Video – volle echte Audiodynamik
   --------------------------------------------------------- */

.receiver[data-speaker-source="video"]
.speaker__surround {
    transform:
        translateZ(
            calc(
                var(--speaker-bass-level) *
                2.2px
            )
        )
        scale(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.045
            )
        );
}


/* Video-Messing reagiert etwas definierter */

.receiver[data-speaker-source="video"]
.speaker__ring {
    filter:
        brightness(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.055
            )
        )
        saturate(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.04
            )
        );
}


/* Video-Reflexion nutzt deine finale 1.22px-Kalibrierung */

.receiver[data-speaker-source="video"]
.speaker__reflection {
    opacity:
        calc(
            0.12 +
            var(--speaker-bass-level) *
            0.038
        );

    filter:
        blur(
            calc(
                6px -
                var(--speaker-bass-level) *
                1.22px
            )
        )
        brightness(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.075
            )
        )
        contrast(
            calc(
                1 +
                var(--speaker-bass-level) *
                0.045
            )
        );
}

/* =========================================================
   RETROBASS R-26
   Speaker Motion Signature

   Version: R26-MOTION-3.14
   Status: Final calibrated
   Bass source:
   - Video: Web Audio API
   - Radio: controlled fallback impulses
   ========================================================= */