:root {
  --pearl: #F8F7FB;
  --wall:  #E4DEE9;
  --mist:  #E2E7EF;
  --floor: #BFC7E1;
}

html { background: var(--wall); color-scheme: light; }

body { background: var(--wall); }

body.static {
  background:
    radial-gradient(60% 45% at 22% 34%, rgba(188, 205, 238, 0.7), transparent 70%),
    radial-gradient(50% 40% at 80% 66%, rgba(242, 213, 199, 0.7), transparent 70%),
    radial-gradient(55% 40% at 50% 50%, var(--pearl), transparent 75%),
    linear-gradient(180deg, var(--wall) 0%, var(--mist) 58%, var(--pearl) 80%, var(--floor) 100%);
  background-attachment: fixed;
}

body.static::before {
  content: '';
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(28% 22% at 22% 30%, rgba(13, 173, 194, 0.16), transparent 70%),
    radial-gradient(30% 24% at 68% 28%, rgba(242, 92, 168, 0.18), transparent 70%),
    radial-gradient(26% 22% at 45% 52%, rgba(178, 140, 182, 0.16), transparent 70%),
    radial-gradient(30% 24% at 78% 62%, rgba(250, 179, 71, 0.2), transparent 70%),
    radial-gradient(28% 22% at 24% 70%, rgba(246, 110, 125, 0.14), transparent 70%);
  animation: backdrop-prism 32s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes backdrop-prism {
  from { transform: translate3d(-5%, -4%, 0) rotate(-2deg); }
  to   { transform: translate3d(5%, 4%, 0) rotate(2deg); }
}

#stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

html.backdrop-screen { background: #D7D6E5 linear-gradient(180deg, #E6EEF7 0%, #DCDCEA 38%, #D2D1E2 72%, #CBC9DD 100%) fixed; }

.backdrop-screen body { background: transparent; }

.backdrop-screen body::before,
.backdrop-screen-layer {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    radial-gradient(max(78vmin, 520px) max(56vmin, 34vh) at calc(50% + 18vmin) 24%, rgba(240, 222, 206, 0.95), rgba(240, 222, 206, 0) 70%),
    radial-gradient(max(92vmin, 600px) max(64vmin, 42vh) at 50% 44%, rgba(201, 187, 220, 0.9), rgba(201, 187, 220, 0) 70%),
    radial-gradient(max(104vmin, 660px) max(62vmin, 40vh) at calc(50% - 16vmin) 66%, rgba(170, 189, 236, 0.85), rgba(170, 189, 236, 0) 72%),
    radial-gradient(70vmax 45vmax at 100% 100%, rgba(198, 179, 195, 0.7), rgba(198, 179, 195, 0) 70%),
    radial-gradient(60vmax 60vmax at 0% 50%, rgba(223, 216, 216, 0.8), rgba(223, 216, 216, 0) 70%),
    radial-gradient(60vmax 60vmax at 100% 42%, rgba(198, 202, 226, 0.8), rgba(198, 202, 226, 0) 70%),
    linear-gradient(180deg, #E6EEF7 0%, #DCDCEA 38%, #D2D1E2 72%, #CBC9DD 100%);
  background-blend-mode: overlay, normal, normal, normal, normal, normal, normal, normal;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.static::before { animation: none; }
}