/* 独立固定层不会改变卡片颜色，也不拦截页面交互。 */
body.has-site-background {
    isolation: isolate;
}

.site-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--waxy-bg);
}

.site-background__image,
.site-background__video,
.site-background__canvas,
.site-background__mask,
.site-background__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.site-background__image {
    background-image: var(--background-image-light, var(--background-image));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

html.dark .site-background__image {
    background-image: var(--background-image);
}

.site-background--video {
    background-image: var(--background-poster, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.site-background__video {
    object-fit: cover;
    opacity: 0;
}

.site-background__video.is-playing {
    opacity: 1;
}

.site-background__mask {
    background-image: var(--waxy-hero-image-mask);
}

.site-background__overlay {
    background: #000;
    opacity: var(--background-overlay, 0);
}

/* Hero 模式整页共用固定图片和遮罩，首屏不重复叠加。 */
.has-site-background--hero .hero,
html.dark .has-site-background--hero .hero {
    background: transparent;
}

.has-site-background--hero .hero__bg,
html.dark .has-site-background--hero .hero__bg {
    background: none;
}

.has-site-background--hero .hero::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .site-background__video {
        display: none;
    }
}