:root {
  --lw-sky-top: #10142f;
  --lw-sky-bottom: #452f63;
  --lw-horizon: #151b35;
  --lw-mist: rgba(155, 133, 194, 0.18);
  --lw-glow: rgba(142, 100, 255, 0.18);
}

html[data-living-world="ready"],
html[data-living-world="ready"] body {
  min-height: 100%;
}

body {
  position: relative;
  isolation: isolate;
}

.living-world {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--lw-sky-top), var(--lw-sky-bottom));
}

.living-world__layer {
  position: absolute;
  inset: -8vh -5vw;
  will-change: transform;
}

.living-world__layer--sky {
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.16), transparent 18%),
    radial-gradient(circle at 20% 30%, rgba(125,97,220,.18), transparent 28%);
}

.living-world__layer--horizon {
  top: 43%;
  background:
    linear-gradient(145deg, transparent 45%, rgba(8,12,30,.75) 46% 56%, transparent 57%) 0 0/45% 100%,
    linear-gradient(215deg, transparent 45%, rgba(13,18,41,.85) 46% 56%, transparent 57%) 35% 0/55% 100%,
    linear-gradient(to top, var(--lw-horizon), transparent 70%);
  opacity: .9;
}

.living-world__layer--mist {
  top: 42%;
  background:
    radial-gradient(ellipse at 25% 60%, var(--lw-mist), transparent 52%),
    radial-gradient(ellipse at 70% 70%, var(--lw-mist), transparent 48%);
  filter: blur(18px);
  animation: living-world-drift 24s ease-in-out infinite alternate;
}

.living-world__layer--glow {
  background: radial-gradient(circle at 74% 72%, var(--lw-glow), transparent 30%);
  animation: living-world-pulse 7s ease-in-out infinite;
}

body > :not(.living-world) {
  position: relative;
  z-index: 1;
}

@keyframes living-world-drift {
  from { translate: -2% 0; opacity: .65; }
  to { translate: 2% -1%; opacity: .95; }
}

@keyframes living-world-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .living-world__layer {
    animation: none !important;
    transform: none !important;
  }
}