/* Keep the fixed backdrop on its own layer instead of repainting it on scroll. */
html body.detona-page-news {
    isolation: isolate;
    background-image: none !important;
    --detona-home-backdrop: linear-gradient(180deg, rgba(2, 5, 13, .08) 0, rgba(2, 5, 13, .2) 48%, rgba(5, 7, 13, .76) 100%);
}
html body.detona-page-news::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--detona-home-backdrop), url("/images/serverinfo/home-optimized/background-v1.webp") !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%, cover;
    transform: translateZ(0);
}
html[data-detona-theme="light"] body.detona-page-news {
    --detona-home-backdrop: linear-gradient(180deg, rgba(244, 248, 255, .48), rgba(236, 240, 249, .6) 52%, rgba(219, 225, 238, .82));
}
@media (max-width: 768px) {
    html body.detona-page-news {
        --detona-home-backdrop: linear-gradient(180deg, rgba(2, 5, 13, .14) 0, rgba(2, 5, 13, .28) 54%, rgba(5, 7, 13, .82) 100%);
    }
    html body.detona-page-news::before { background-position: center top, 32% top; }
    html[data-detona-theme="light"] body.detona-page-news {
        --detona-home-backdrop: linear-gradient(180deg, rgba(244, 248, 255, .48), rgba(236, 240, 249, .65) 54%, rgba(219, 225, 238, .86));
    }
}
@media (max-width: 768px) and (orientation: landscape) {
    html body.detona-page-news::before { background-position: center top; }
}
body.detona-page-news .detona-home-animation-paused,
body.detona-page-news .detona-home-animation-paused *,
body.detona-page-news .detona-home-animation-paused::before,
body.detona-page-news .detona-home-animation-paused::after {
    animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
    body.detona-page-news .detona-home-slider__track { transition: none; }
}