/* ============================================================
   SOUNDBOARD CHILL STREAM
   Animation audio-reactive sur toute la carte
   ============================================================ */

.chillroom-app-card-soundboard {
    --sb-audio-pulse: 0;
    --sb-audio-glitch: 0;

    --sb-cyan-x: 0px;
    --sb-cyan-y: 0px;

    --sb-magenta-x: 0px;
    --sb-magenta-y: 0px;

    position: relative !important;
    isolation: isolate !important;

    cursor: pointer !important;
    overflow: visible !important;
}

/*
   Désactive les anciennes animations Soundboard afin
   qu'elles ne se battent pas contre le moteur audio.
*/
.chillroom-app-card-soundboard
.chillroom-soundboard-real-logo {
    animation: none !important;
}

/* Scène contenant le logo, les couches RGB et l'égaliseur */
.chillroom-app-card-soundboard
.sb-audio-reactive-scene {
    position: relative !important;
    isolation: isolate !important;

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

    width: 100% !important;
    height: 174px !important;

    overflow: visible !important;
}

/* ============================================================
   LOGO PRINCIPAL
   Grossissement volontairement limité
   ============================================================ */

.chillroom-app-card-soundboard
.sb-audio-logo-wrap {
    position: relative !important;
    z-index: 5 !important;

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

    width: min(98%, 340px) !important;
    max-width: 340px !important;
    height: 174px !important;

    transform:
        translate3d(
            0,
            calc(
                20px -
                var(--sb-audio-pulse) * 5px
            ),
            0
        )
        scale(
            calc(
                1.055 +
                var(--sb-audio-pulse) * 0.070
            )
        ) !important;

    transform-origin: center center !important;

    transition:
        transform 44ms linear,
        filter 58ms linear !important;

    will-change:
        transform,
        filter !important;

    pointer-events: none !important;
}

.chillroom-app-card-soundboard
.sb-audio-logo-wrap
.chillroom-soundboard-real-logo {
    position: relative !important;
    z-index: 5 !important;

    display: block !important;

    width: 100% !important;
    max-width: 340px !important;
    height: 100% !important;
    max-height: 174px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    transform: none !important;
    animation: none !important;

    filter:
        saturate(
            calc(
                1 +
                var(--sb-audio-pulse) * 0.32
            )
        )
        brightness(
            calc(
                1 +
                var(--sb-audio-pulse) * 0.12
            )
        )
        drop-shadow(
            0 0
            calc(
                11px +
                var(--sb-audio-pulse) * 17px
            )
            rgba(55, 214, 255, 0.72)
        )
        drop-shadow(
            0 0
            calc(
                21px +
                var(--sb-audio-pulse) * 24px
            )
            rgba(206, 61, 255, 0.46)
        )
        drop-shadow(
            0 0
            calc(
                29px +
                var(--sb-audio-pulse) * 29px
            )
            rgba(90, 91, 255, 0.25)
        ) !important;

    transition:
        filter 56ms linear !important;

    will-change: filter !important;
}

/* ============================================================
   COUCHES DE GLITCH
   ============================================================ */

.chillroom-app-card-soundboard
.sb-audio-glitch-layer {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    z-index: 6 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;

    mix-blend-mode: screen !important;

    pointer-events: none !important;
    user-select: none !important;

    will-change:
        transform,
        opacity,
        filter,
        clip-path !important;
}

.chillroom-app-card-soundboard.sb-audio-active
.sb-audio-glitch-layer {
    opacity:
        calc(
            var(--sb-audio-glitch) * 0.74
        ) !important;

    visibility: visible !important;
}

.chillroom-app-card-soundboard
.sb-audio-glitch-cyan {
    transform:
        translate3d(
            var(--sb-cyan-x),
            var(--sb-cyan-y),
            0
        )
        scale(
            calc(
                1.004 +
                var(--sb-audio-pulse) * 0.015
            )
        ) !important;

    filter:
        sepia(1)
        saturate(8)
        hue-rotate(145deg)
        brightness(1.52)
        contrast(1.16)
        drop-shadow(
            0 0 11px
            rgba(24, 226, 255, 0.82)
        ) !important;

    clip-path:
        polygon(
            0 6%,
            100% 1%,
            100% 49%,
            0 57%
        ) !important;
}

.chillroom-app-card-soundboard
.sb-audio-glitch-magenta {
    transform:
        translate3d(
            var(--sb-magenta-x),
            var(--sb-magenta-y),
            0
        )
        scale(
            calc(
                1.004 +
                var(--sb-audio-pulse) * 0.015
            )
        ) !important;

    filter:
        sepia(1)
        saturate(9)
        hue-rotate(242deg)
        brightness(1.49)
        contrast(1.17)
        drop-shadow(
            0 0 12px
            rgba(226, 55, 255, 0.80)
        ) !important;

    clip-path:
        polygon(
            0 46%,
            100% 39%,
            100% 98%,
            0 100%
        ) !important;
}

/* ============================================================
   ÉGALISEUR AUDIO RÉEL
   ============================================================ */

.chillroom-app-card-soundboard
.sb-audio-equalizer {
    position: absolute !important;

    left: 50% !important;
    bottom: 3px !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

    width: min(92%, 315px) !important;
    height: 66px !important;

    gap: 5px !important;

    transform:
        translateX(-50%)
        translateY(10px) !important;

    opacity: 0 !important;

    transition:
        opacity 0.20s ease,
        transform 0.20s ease !important;

    pointer-events: none !important;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 9%,
            #000 91%,
            transparent
        ) !important;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 9%,
            #000 91%,
            transparent
        ) !important;
}

.chillroom-app-card-soundboard
.sb-audio-equalizer-bar {
    display: block !important;

    width: 6px !important;
    height: 5%;

    min-height: 3px !important;

    border-radius:
        999px 999px 3px 3px !important;

    background:
        linear-gradient(
            to top,
            rgba(107, 69, 255, 0.40),
            rgba(43, 213, 255, 0.96),
            rgba(221, 73, 255, 0.92)
        ) !important;

    box-shadow:
        0 0 7px rgba(43, 213, 255, 0.54),
        0 0 12px rgba(210, 64, 255, 0.31) !important;

    transform-origin:
        center bottom !important;

    transition:
        height 45ms linear,
        opacity 55ms linear !important;

    opacity: 0.62 !important;

    will-change:
        height,
        opacity !important;
}

.chillroom-app-card-soundboard.sb-audio-active
.sb-audio-equalizer {
    opacity:
        calc(
            0.40 +
            var(--sb-audio-pulse) * 0.52
        ) !important;

    transform:
        translateX(-50%)
        translateY(0) !important;
}

/* ============================================================
   LUMIÈRE SUR LA CARTE
   ============================================================ */

.chillroom-app-card-soundboard.sb-audio-active {
    border-color:
        rgba(77, 207, 255, 0.73) !important;

    box-shadow:
        0 30px 82px rgba(0, 0, 0, 0.48),
        0 0
        calc(
            22px +
            var(--sb-audio-pulse) * 20px
        )
        rgba(32, 201, 255, 0.35),
        0 0
        calc(
            39px +
            var(--sb-audio-pulse) * 26px
        )
        rgba(180, 58, 255, 0.24),
        inset 0 0 28px rgba(82, 185, 255, 0.045) !important;
}

/* Au repos, aucune couche ne reste affichée */
.chillroom-app-card-soundboard:not(.sb-audio-active)
.sb-audio-glitch-layer {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 1100px) {
    .chillroom-app-card-soundboard
    .sb-audio-logo-wrap {
        width: min(96%, 325px) !important;
        max-width: 325px !important;

        transform:
            translate3d(
                0,
                calc(
                    18px -
                    var(--sb-audio-pulse) * 4px
                ),
                0
            )
            scale(
                calc(
                    1.035 +
                    var(--sb-audio-pulse) * 0.060
                )
            ) !important;
    }
}

@media (max-width: 760px) {
    .chillroom-app-card-soundboard
    .sb-audio-logo-wrap {
        width: min(92%, 290px) !important;
        max-width: 290px !important;
        height: 158px !important;

        transform:
            translate3d(
                0,
                calc(
                    13px -
                    var(--sb-audio-pulse) * 3px
                ),
                0
            )
            scale(
                calc(
                    1.020 +
                    var(--sb-audio-pulse) * 0.050
                )
            ) !important;
    }

    .chillroom-app-card-soundboard
    .sb-audio-logo-wrap
    .chillroom-soundboard-real-logo {
        max-width: 290px !important;
        max-height: 158px !important;
    }

    .chillroom-app-card-soundboard
    .sb-audio-equalizer {
        width: min(88%, 270px) !important;
    }
}