/* ============================================================
   DJ LANDRIAULT AUDIO REACTIF
   Toute la carte est la zone de survol
   ============================================================ */

.chillroom-app-card-dj {
    --dj-pulse: 0;
    --dj-glitch: 0;

    --dj-red-x: 0px;
    --dj-red-y: 0px;

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

    --dj-violet-x: 0px;
    --dj-violet-y: 0px;

    cursor: pointer !important;
}

.chillroom-app-card-dj .dj-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;
}

.chillroom-app-card-dj
.chillroom-dj-logo-button {
    position: relative !important;
    z-index: 5 !important;

    display: block !important;

    width: min(92%, 310px) !important;
    max-width: 310px !important;
    height: auto !important;

    margin: 0 auto !important;

    object-fit: contain !important;
    transform-origin: center center !important;

    transform:
        translate3d(
            0,
            calc(var(--dj-pulse) * -8px),
            0
        )
        scale(
            calc(1 + var(--dj-pulse) * 0.15)
        ) !important;

    filter:
        saturate(
            calc(1 + var(--dj-pulse) * 0.42)
        )
        contrast(
            calc(1 + var(--dj-pulse) * 0.11)
        )
        drop-shadow(
            0 0
            calc(11px + var(--dj-pulse) * 24px)
            rgba(150, 78, 255, 0.75)
        )
        drop-shadow(
            0 0
            calc(22px + var(--dj-pulse) * 38px)
            rgba(31, 173, 255, 0.47)
        )
        drop-shadow(
            0 0
            calc(28px + var(--dj-pulse) * 43px)
            rgba(240, 50, 255, 0.28)
        ) !important;

    transition:
        transform 42ms linear,
        filter 56ms linear !important;

    will-change:
        transform,
        filter !important;
}

.chillroom-app-card-dj
.dj-portal-rgb-layer {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    display: block !important;

    width: min(92%, 310px) !important;
    max-width: 310px !important;
    height: auto !important;

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

    object-fit: contain !important;
    transform-origin: center center !important;

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

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

    mix-blend-mode: screen !important;

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

.chillroom-app-card-dj.dj-portal-active
.dj-portal-rgb-layer {
    visibility: visible !important;

    opacity:
        calc(var(--dj-glitch) * 0.88) !important;
}

.chillroom-app-card-dj
.dj-portal-rgb-red {
    z-index: 4 !important;

    transform:
        translate(-50%, -50%)
        translate3d(
            var(--dj-red-x),
            var(--dj-red-y),
            0
        )
        translateY(
            calc(var(--dj-pulse) * -8px)
        )
        scale(
            calc(1.012 + var(--dj-pulse) * 0.15)
        ) !important;

    filter:
        sepia(1)
        saturate(9)
        hue-rotate(-42deg)
        brightness(1.52)
        contrast(1.18)
        drop-shadow(
            0 0 12px
            rgba(255, 34, 72, 0.82)
        ) !important;

    clip-path:
        polygon(
            0 4%,
            100% 0,
            100% 36%,
            0 43%
        ) !important;
}

.chillroom-app-card-dj
.dj-portal-rgb-cyan {
    z-index: 6 !important;

    transform:
        translate(-50%, -50%)
        translate3d(
            var(--dj-cyan-x),
            var(--dj-cyan-y),
            0
        )
        translateY(
            calc(var(--dj-pulse) * -8px)
        )
        scale(
            calc(1.009 + var(--dj-pulse) * 0.15)
        ) !important;

    filter:
        sepia(1)
        saturate(8)
        hue-rotate(145deg)
        brightness(1.58)
        contrast(1.15)
        drop-shadow(
            0 0 12px
            rgba(25, 226, 255, 0.84)
        ) !important;

    clip-path:
        polygon(
            0 34%,
            100% 29%,
            100% 71%,
            0 78%
        ) !important;
}

.chillroom-app-card-dj
.dj-portal-rgb-violet {
    z-index: 3 !important;

    transform:
        translate(-50%, -50%)
        translate3d(
            var(--dj-violet-x),
            var(--dj-violet-y),
            0
        )
        translateY(
            calc(var(--dj-pulse) * -8px)
        )
        scale(
            calc(1.007 + var(--dj-pulse) * 0.15)
        ) !important;

    filter:
        sepia(1)
        saturate(10)
        hue-rotate(232deg)
        brightness(1.52)
        contrast(1.18)
        drop-shadow(
            0 0 13px
            rgba(205, 46, 255, 0.82)
        ) !important;

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

.chillroom-app-card-dj:not(.dj-portal-active)
.dj-portal-rgb-layer {
    visibility: hidden !important;
    opacity: 0 !important;
}

@media (max-width: 760px) {
    .chillroom-app-card-dj
    .chillroom-dj-logo-button,
    .chillroom-app-card-dj
    .dj-portal-rgb-layer {
        width: min(88%, 285px) !important;
        max-width: 285px !important;
    }
}