html {
  min-height: 100%;
  background: #f8faff;
}

body {
  position: relative;
  min-height: 100vh;
  background: transparent;
  isolation: isolate;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: -12px;
  content: "";
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      100deg,
      rgb(255 255 255 / 94%) 0%,
      rgb(255 255 255 / 94%) 7%,
      transparent 10%,
      transparent 12%,
      rgb(255 255 255 / 94%) 16%
    ),
    repeating-linear-gradient(
      100deg,
      #b8860b 10%,
      #f5d76e 15%,
      #d4af37 20%,
      #fff0b3 25%,
      #c99700 30%
    );
  background-position: 50% 50%;
  background-size: 300% 200%;
  filter: blur(24px);
  opacity: .42;
  will-change: background-position;
  animation: scent-realm-aurora 60s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 10%, transparent 72%);
}

@keyframes scent-realm-aurora {
  from { background-position: 50% 50%; }
  to { background-position: 350% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    will-change: auto;
  }
}