.site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #07080d;
}

.site-bg__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.05) brightness(0.92);
    transform: scale(1.02);
}

.site-bg__pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.22;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,0.025) 3px, rgba(255,255,255,0.025) 4px),
        repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(255,255,255,0.02) 3px, rgba(255,255,255,0.02) 4px);
    pointer-events: none;
}

.site-bg__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.site-bg__cloud {
    position: absolute;
    left: 0;
    width: 100%;
    min-height: 220px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.85;
}

.site-bg__cloud--top {
    top: 0;
    background:
        radial-gradient(ellipse 120% 100% at 50% -20%, rgba(180, 190, 210, 0.28), transparent 62%),
        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(120, 130, 150, 0.2), transparent 55%),
        radial-gradient(ellipse 70% 55% at 85% 5%, rgba(100, 110, 130, 0.18), transparent 50%);
    filter: blur(2px);
}

.site-bg__cloud--bottom {
    bottom: 0;
    min-height: 280px;
    background:
        radial-gradient(ellipse 130% 90% at 50% 120%, rgba(20, 22, 30, 0.92), transparent 58%),
        radial-gradient(ellipse 90% 70% at 20% 100%, rgba(180, 190, 210, 0.15), transparent 55%),
        radial-gradient(ellipse 80% 65% at 80% 100%, rgba(160, 170, 190, 0.12), transparent 50%);
}

.site-bg__fog {
    position: absolute;
    inset: -20%;
    opacity: 0.45;
    filter: blur(40px);
    animation: site-bg-fog-drift 28s ease-in-out infinite alternate;
}

.site-bg--has-video .site-bg__fog {
    opacity: 0.18;
}

.site-bg__fog--1 {
    background: radial-gradient(ellipse at 20% 80%, rgba(139, 26, 26, 0.35), transparent 55%);
}

.site-bg__fog--2 {
    background: radial-gradient(ellipse at 80% 20%, rgba(197, 160, 89, 0.16), transparent 50%);
    animation-duration: 36s;
    animation-direction: alternate-reverse;
}

.site-bg__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(197, 160, 89, 0.1), transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(139, 26, 26, 0.15), transparent 40%);
    animation: site-bg-glow-pulse 8s ease-in-out infinite;
}

.site-bg--has-video .site-bg__glow {
    opacity: 0.35;
}

.site-bg__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.65) 100%);
}

.site-bg--has-video .site-bg__vignette {
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.28) 100%);
}

.site-bg__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(7, 8, 13, 0.45) 0%,
        rgba(7, 8, 13, 0.62) 45%,
        rgba(7, 8, 13, 0.88) 100%
    );
}

.site-bg--has-video .site-bg__overlay {
    background: linear-gradient(
        180deg,
        rgba(7, 8, 13, 0.12) 0%,
        rgba(7, 8, 13, 0.22) 50%,
        rgba(7, 8, 13, 0.42) 100%
    );
}

.site-bg--no-video .site-bg__overlay {
    background: linear-gradient(
        180deg,
        rgba(7, 8, 13, 0.55) 0%,
        rgba(7, 8, 13, 0.72) 50%,
        rgba(7, 8, 13, 0.9) 100%
    );
}

@keyframes site-bg-fog-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(4%, -3%) scale(1.08); }
}

@keyframes site-bg-glow-pulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

body.site-has-bg {
    position: relative;
}

body.site-has-bg > *:not(.site-bg) {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .site-bg__fog,
    .site-bg__glow {
        animation: none;
    }
}