/*
 * Approved black/red countdown atmosphere, reused for the CMS shell.
 * No rotating page wallpapers or image requests; the original header and panels stay unchanged.
 * Load after eternal-silver.css so every public and account surface uses this wash.
 */
body.theme-supreme-eternal.et-embers-background.et-embers-background {
    background: #070405;
}

/* Outrank the legacy silver/mobile wallpaper and crimson rain selectors. */
:root body.theme-supreme-eternal.et-embers-background .et-atmos[data-background-mode='embers'] {
    background:
        radial-gradient(ellipse at 50% 30%, #070709 0%, #08040688 47%, #030204bb 100%),
        linear-gradient(180deg, #060305 0%, #110507 66%, #31080b 100%);
    inset: 0;
    isolation: isolate;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

:root body.theme-supreme-eternal.et-embers-background .et-atmos[data-background-mode='embers']::before,
:root body.theme-supreme-eternal.et-embers-background .et-atmos[data-background-mode='embers']::after {
    animation: none;
    background: none;
    content: none;
    display: none;
    transition: none;
    will-change: auto;
}

.theme-supreme-eternal.et-embers-background .et-embers__haze {
    animation: et-embers-drift 23s ease-in-out infinite alternate;
    animation-play-state: paused;
    background:
        radial-gradient(ellipse at 5% 85%, #dc1b293c, transparent 34%),
        radial-gradient(ellipse at 94% 57%, #c11c212e, transparent 30%),
        radial-gradient(ellipse at 52% 110%, #ff392666, transparent 42%);
    inset: -20%;
    opacity: .8;
    pointer-events: none;
    position: absolute;
}

.theme-supreme-eternal.et-embers-background .et-embers__haze--veil {
    animation-duration: 31s;
    animation-name: et-embers-veil;
    background:
        radial-gradient(ellipse at 22% 91%, #ef2e293b, transparent 27%),
        radial-gradient(ellipse at 78% 103%, #ff342844, transparent 34%);
    inset: -12%;
}

.theme-supreme-eternal.et-embers-background .et-atmos.is-embers-active .et-embers__haze {
    animation-play-state: running;
}

.theme-supreme-eternal.et-embers-background .et-embers__horizon {
    background: #ff3f2220;
    border-radius: 50%;
    bottom: -28vh;
    box-shadow: 0 -20px 110px 35px #d02b2120;
    height: 36vh;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.theme-supreme-eternal.et-embers-background #et-embers {
    height: 100%;
    inset: 0;
    opacity: .85;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

.theme-supreme-eternal.et-embers-background .et-embers__vignette {
    background: radial-gradient(ellipse at 50% 40%, #04020511 0%, transparent 50%, #03020455 100%);
    inset: 0;
    pointer-events: none;
    position: absolute;
}

/* A tiny static ember fallback remains when JavaScript/canvas is unavailable. */
.theme-supreme-eternal.et-embers-background .et-embers__vignette::after {
    background:
        radial-gradient(circle at 8% 26%, #ff8c5566 0 .7px, transparent 3px),
        radial-gradient(circle at 23% 68%, #ff793a55 0 .6px, transparent 2.5px),
        radial-gradient(circle at 71% 41%, #ff9b5c55 0 .6px, transparent 3px),
        radial-gradient(circle at 91% 79%, #ff793a55 0 .7px, transparent 2.5px),
        radial-gradient(circle at 57% 93%, #ff8c5577 0 .7px, transparent 3px);
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.theme-supreme-eternal.et-embers-background .et-atmos[data-embers-ready='true'] .et-embers__vignette::after {
    display: none;
}

.theme-supreme-eternal.et-embers-background .et-embers__grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
    inset: 0;
    opacity: .035;
    pointer-events: none;
    position: absolute;
}

@keyframes et-embers-drift {
    from { transform: translate(-2%, 1%) scale(1); }
    to { transform: translate(3%, -3%) scale(1.08); }
}

@keyframes et-embers-veil {
    from { transform: translate(2%, 3%) rotate(-4deg); }
    to { transform: translate(-3%, -1%) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-supreme-eternal.et-embers-background .et-atmos.is-embers-active .et-embers__haze {
        animation: none;
    }
}