/* site-wide animated black/grey background (replaces the solid black).
   Two oversized layers of soft grey glows drift slowly in opposite directions.
   Animating transform (not background-position) keeps the motion smooth. */
html {
    /* --glow-x/--glow-y and --shift-x/--shift-y are driven by js/sitebg.js */
    --glow-x: 50%;
    --glow-y: 50%;
    --shift-x: 0;
    --shift-y: 0;
    background:
        radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(85, 85, 85, 0.45) 0%, rgba(40, 40, 40, 0.25) 20%, transparent 45%),
        #000 !important;
    min-height: 100%;
}

body {
    background: transparent !important;
}

body::before,
body::after {
    content: '';
    position: fixed;
    inset: -50%;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
}

body::before {
    background:
        radial-gradient(circle at 30% 35%, rgba(90, 90, 90, 0.55) 0%, transparent 28%),
        radial-gradient(circle at 70% 65%, rgba(70, 70, 70, 0.5) 0%, transparent 30%),
        radial-gradient(circle at 55% 25%, rgba(45, 45, 45, 0.6) 0%, transparent 35%);
    animation: sitebg-drift-a 28s ease-in-out infinite alternate;
    /* `translate` stacks with the animated `transform`, so the pointer nudge
       doesn't interrupt the drift */
    translate: calc(var(--shift-x) * 4%) calc(var(--shift-y) * 4%);
}

body::after {
    background:
        radial-gradient(circle at 65% 40%, rgba(80, 80, 80, 0.45) 0%, transparent 26%),
        radial-gradient(circle at 35% 70%, rgba(55, 55, 55, 0.55) 0%, transparent 32%);
    animation: sitebg-drift-b 36s ease-in-out infinite alternate;
    translate: calc(var(--shift-x) * -3%) calc(var(--shift-y) * -3%);
}

.bg { display: none !important; }

@keyframes sitebg-drift-a {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate(8%, -6%) rotate(20deg) scale(1.1); }
    100% { transform: translate(-6%, 8%) rotate(-15deg) scale(1); }
}

@keyframes sitebg-drift-b {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1.05); }
    50%  { transform: translate(-8%, 5%) rotate(-25deg) scale(0.95); }
    100% { transform: translate(6%, -7%) rotate(15deg) scale(1.1); }
}