:root{
  --black-0:#000000;
  --black-1:#050409;
  --black-2:#111828;
  --black-3:#050409;

  --gold-deep:#D3AF37;
  --gold-mid:#D3AF37;
  --gold-soft:#F6D97B;
  --gold-fog:rgba(211,175,55,.10);
  --gold-fog-2:rgba(211,175,55,.06);
  --gold-fog-3:rgba(246,217,123,.03);

  --white-fog:rgba(255,255,255,.03);
  --white-fog-2:rgba(255,255,255,.012);

  --edge-shadow:rgba(0,0,0,.58);
  --vignette:rgba(0,0,0,.78);
}

.scene{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% 100%, rgba(211,175,55,.12), transparent 58%),
    radial-gradient(900px 520px at 18% 14%, rgba(17,24,40,.28), transparent 62%),
    radial-gradient(900px 520px at 82% 12%, rgba(246,217,123,.06), transparent 62%),
    radial-gradient(900px 640px at 50% 30%, rgba(255,255,255,.02), transparent 72%),
    linear-gradient(180deg, #000000 0%, #030308 24%, #0a0f1a 58%, #030308 100%);
  transform:translate3d(0,0,0) scale(1.02);
  will-change:transform;
  z-index:-1;
  pointer-events:none;
}

.gold-atmosphere,
.gold-atmosphere::before,
.gold-atmosphere::after{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  filter:blur(40px);
}

.gold-atmosphere{
  background:
    radial-gradient(34% 22% at 14% 20%, rgba(17,24,40,.28), transparent 72%),
    radial-gradient(32% 20% at 86% 18%, rgba(211,175,55,.09), transparent 72%),
    radial-gradient(42% 26% at 50% 100%, rgba(246,217,123,.09), transparent 72%);
  opacity:.7;
  animation: driftA 26s ease-in-out infinite alternate;
}

.gold-atmosphere::before{
  background:
    radial-gradient(20% 14% at 24% 70%, rgba(211,175,55,.06), transparent 74%),
    radial-gradient(20% 14% at 78% 68%, rgba(17,24,40,.14), transparent 74%),
    radial-gradient(16% 12% at 50% 36%, rgba(246,217,123,.02), transparent 76%);
  opacity:.65;
  animation: driftB 34s ease-in-out infinite alternate;
}

.gold-atmosphere::after{
  background:
    radial-gradient(22% 16% at 50% 88%, rgba(246,217,123,.05), transparent 74%),
    radial-gradient(14% 12% at 16% 40%, rgba(17,24,40,.1), transparent 74%),
    radial-gradient(14% 12% at 84% 36%, rgba(211,175,55,.04), transparent 74%);
  opacity:.65;
  animation: driftC 40s ease-in-out infinite alternate;
}

.gold-gradient-core{
  position:absolute;
  inset:-8%;
  pointer-events:none;
  background:
    radial-gradient(60% 36% at 50% 86%, rgba(211,175,55,.09) 0%, rgba(246,217,123,.04) 34%, transparent 72%),
    radial-gradient(44% 28% at 50% 62%, rgba(17,24,40,.12) 0%, transparent 72%);
  filter:blur(26px);
  opacity:.7;
  mix-blend-mode:screen;
}

.corner-weight{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.corner-weight::before,
.corner-weight::after{
  content:"";
  position:absolute;
  width:38vw;
  height:38vw;
  max-width:560px;
  max-height:560px;
  border-radius:50%;
  filter:blur(50px);
  opacity:.55;
}

.corner-weight::before{
  top:-18vw;
  left:-12vw;
  background:
    radial-gradient(circle at 62% 62%,
      rgba(17,24,40,.28) 0%,
      rgba(211,175,55,.05) 24%,
      transparent 68%);
}

.corner-weight::after{
  right:-12vw;
  bottom:-18vw;
  background:
    radial-gradient(circle at 38% 38%,
      rgba(211,175,55,.09) 0%,
      rgba(246,217,123,.04) 24%,
      transparent 68%);
}

.floor-glow{
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-16%;
  height:46%;
  pointer-events:none;
  background:
    radial-gradient(70% 80% at 50% 18%, rgba(246,217,123,.07) 0%, rgba(211,175,55,.03) 32%, transparent 72%);
  filter:blur(34px);
  opacity:.7;
}

.scene canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

.soft-haze{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.012) 0%, transparent 22%, transparent 100%),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.02), transparent 52%);
  mix-blend-mode:screen;
  opacity:.55;
}

.noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.028;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.24) 0 1px, transparent 1px 4px);
  background-size:7px 7px;
  mix-blend-mode:soft-light;
}

.vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 36%, rgba(0,0,0,.22) 62%, var(--vignette) 100%);
}

@keyframes driftA{
  0%{ transform:translate3d(-1%, -.8%, 0) scale(1); }
  100%{ transform:translate3d(1.2%, 1%, 0) scale(1.05); }
}
@keyframes driftB{
  0%{ transform:translate3d(.8%, -.6%, 0) scale(1.02); }
  100%{ transform:translate3d(-1.1%, .9%, 0) scale(1.06); }
}
@keyframes driftC{
  0%{ transform:translate3d(-.7%, .9%, 0) scale(1); }
  100%{ transform:translate3d(1.1%, -1%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .gold-atmosphere,
  .gold-atmosphere::before,
  .gold-atmosphere::after{
    animation:none !important;
  }
}