/* Shared light theme: soft multicolour background that drifts slowly.
   Colours come from the active theme (set by brand.js -> svsApplyTheme). */
:root {
  --t-bg: #F7F7FC; --t-b1: #C8F0DC; --t-b2: #CDDFFF; --t-b3: #F8D5E5;
  --t-accent: #4B5BC4; --t-band1: #D2F2E2; --t-band2: #DCE5FF;
  color-scheme: light;
}
html { background: var(--t-bg); }

.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--t-bg); }
.ambient i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .75; will-change: transform; }
.ambient i:nth-child(1) { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: var(--t-b1); animation: drift1 26s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { width: 54vmax; height: 54vmax; right: -20vmax; top: -10vmax; background: var(--t-b2); animation: drift2 32s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { width: 48vmax; height: 48vmax; left: 18vmax; bottom: -30vmax; background: var(--t-b3); animation: drift3 38s ease-in-out infinite alternate; }
/* fine dot grid, a quiet nod to QR modules */
.ambient::after { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: radial-gradient(rgba(20, 50, 40, .14) 1px, transparent 1.2px); background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); }
.ambient.soft i { opacity: .5; }

@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-12vmax, 14vmax) scale(.94); } }
@keyframes drift3 { to { transform: translate(-10vmax, -12vmax) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .ambient i { animation: none; } }