/*
 * PROFILE + SETTINGS STATIC LIVE BACKGROUND
 *
 * The preceding stylesheet is the exact current Live-page unified-effects
 * stylesheet. This file only adapts it to Profile/Settings and disables
 * every animation.
 */

/* Keep the homepage-style hero on both pages unchanged. */
body.mix365-profile-simple-home
.mix365-profile-home-hero,

body.mix365-settings-simple-home
.mix365-settings-home-hero {
    background:
        #030304
        !important;
}

/* Exact Live background on every section below the hero. */
body.mix365-profile-simple-home
:is(
    .mix365-profile-identity-section,
    .mix365-profile-dark-section,
    .mix365-profile-light-section
),

body.mix365-settings-simple-home
:is(
    .mix365-settings-section,
    [data-mix365-live-background]
) {
    position:
        relative
        !important;

    isolation:
        isolate
        !important;

    overflow:
        hidden
        !important;

    color:
        #fff
        !important;

    background-color:
        #050506
        !important;

    background-image:
        radial-gradient(
            circle at 18% 30%,
            rgba(231, 0, 65, 0.10),
            transparent 31%
        ),
        radial-gradient(
            circle at 82% 70%,
            rgba(255,255,255,0.035),
            transparent 28%
        )
        !important;

    border-top:
        1px solid
        rgba(255,255,255,0.065)
        !important;
}

/*
 * Remove every earlier Profile/Settings background shell before the static
 * Live layers are displayed.
 */
body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
:is(
    .mix365-profile-identity-section,
    .mix365-profile-dark-section,
    .mix365-profile-light-section,
    .mix365-settings-section,
    [data-mix365-live-background]
)
> :is(
    .mix365-shared-bg-shell,
    .mix365-profile-live-bg-shell,
    .mix365-settings-live-bg-shell,
    .mix365-profile-section-canvas,
    .mix365-profile-section-star-overlay,
    .mix365-live-section-canvas,
    .mix365-live-section-star-overlay,
    .mix365-live-band-effects-canvas,
    .mix365-live-band-grid,
    .mix365-live-band-vignette,
    .mix365-live-band-scanlines
) {
    display:
        none
        !important;
}

/* Disable the previous Profile identity video wallpaper. */
body.mix365-profile-simple-home
:is(
    .mix365-profile-identity-section,
    .mix365-profile-dark-section,
    .mix365-profile-light-section
)
> :is(
    .mix365-profile-section-video,
    .mix365-profile-section-overlay
) {
    display:
        none
        !important;
}

/*
 * Exact Live decorative layers created by the static initialiser.
 */
body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
> .mix365-section-effects-canvas {
    position:
        absolute
        !important;

    z-index:
        1
        !important;

    inset:
        0
        !important;

    display:
        block
        !important;

    width:
        100%
        !important;

    height:
        100%
        !important;

    opacity:
        0.62
        !important;

    pointer-events:
        none
        !important;

    visibility:
        visible
        !important;
}

body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
> .mix365-section-effects-glow {
    position:
        absolute
        !important;

    z-index:
        1
        !important;

    top:
        12%
        !important;

    left:
        -20%
        !important;

    width:
        62%
        !important;

    height:
        76%
        !important;

    opacity:
        0.22
        !important;

    filter:
        blur(52px)
        !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(235,0,67,0.55) 0%,
            rgba(235,0,67,0.16) 38%,
            transparent 72%
        )
        !important;

    animation:
        none
        !important;

    transform:
        none
        !important;

    pointer-events:
        none
        !important;
}

body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
> .mix365-section-scanlines {
    position:
        absolute
        !important;

    z-index:
        2
        !important;

    inset:
        0
        !important;

    opacity:
        0.07
        !important;

    mix-blend-mode:
        screen
        !important;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(255,255,255,0.055) 0,
            rgba(255,255,255,0.055) 1px,
            transparent 1px,
            transparent 5px
        )
        !important;

    background-size:
        100% 10px
        !important;

    background-position:
        0 0
        !important;

    animation:
        none
        !important;

    pointer-events:
        none
        !important;
}

body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
> .mix365-section-vignette {
    position:
        absolute
        !important;

    z-index:
        2
        !important;

    inset:
        0
        !important;

    background:
        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,0.28) 72%,
            rgba(0,0,0,0.58) 100%
        )
        !important;

    animation:
        none
        !important;

    pointer-events:
        none
        !important;
}

/*
 * Static grid from the Live theme-band treatment.
 */
body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
> .mix365-static-live-grid {
    position:
        absolute
        !important;

    z-index:
        2
        !important;

    inset:
        0
        !important;

    opacity:
        0.085
        !important;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        )
        !important;

    background-size:
        90px 90px
        !important;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );

    animation:
        none
        !important;

    pointer-events:
        none
        !important;
}

/* Keep all actual section content above the Live background. */
body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
> :not(
    .mix365-section-effects-canvas
):not(
    .mix365-section-effects-glow
):not(
    .mix365-section-scanlines
):not(
    .mix365-section-vignette
):not(
    .mix365-static-live-grid
) {
    position:
        relative
        !important;

    z-index:
        7
        !important;
}

/*
 * Use the exact current Live-page card appearance on Profile and Settings.
 */
body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
:is(
    .mix365-profile-identity-card,
    .mix365-profile-home-card,
    .mix365-settings-identity-card,
    .mix365-settings-card
) {
    position:
        relative
        !important;

    overflow:
        hidden
        !important;

    border:
        1px solid
        rgba(255,255,255,0.11)
        !important;

    border-radius:
        0
        !important;

    background:
        linear-gradient(
            145deg,
            rgba(38,41,45,0.55),
            rgba(7,8,9,0.91)
        )
        !important;

    clip-path:
        polygon(
            14px 0,
            100% 0,
            100% calc(100% - 14px),
            calc(100% - 14px) 100%,
            0 100%,
            0 14px
        )
        !important;

    box-shadow:
        0 28px 78px
        rgba(0,0,0,0.36)
        !important;

    backdrop-filter:
        blur(15px)
        !important;

    -webkit-backdrop-filter:
        blur(15px)
        !important;

    transform:
        none
        !important;

    animation:
        none
        !important;
}

/*
 * Nothing in the section background may animate.
 * Form controls and normal page interactions remain unaffected.
 */
body:is(
    .mix365-profile-simple-home,
    .mix365-settings-simple-home
)
.mix365-static-live-section
> :is(
    .mix365-section-effects-canvas,
    .mix365-section-effects-glow,
    .mix365-section-scanlines,
    .mix365-section-vignette,
    .mix365-static-live-grid
) {
    animation:
        none
        !important;

    transition:
        none
        !important;
}

@media (prefers-reduced-motion: reduce) {
    body:is(
        .mix365-profile-simple-home,
        .mix365-settings-simple-home
    )
    .mix365-static-live-section
    > .mix365-section-effects-canvas {
        opacity:
            0.62
            !important;
    }
}