.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 48% at 50% 42%, rgba(98, 28, 140, 0.42), transparent 62%),
    radial-gradient(ellipse 40% 30% at 18% 78%, rgba(75, 20, 104, 0.35), transparent 60%),
    radial-gradient(ellipse 40% 30% at 82% 78%, rgba(75, 20, 104, 0.35), transparent 60%),
    linear-gradient(180deg, #07040c 0%, var(--void) 48%, #12061c 100%);
}

.marble {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background:
    radial-gradient(120% 60% at 20% 10%, transparent 40%, rgba(197, 160, 89, 0.12) 42%, transparent 44%),
    radial-gradient(80% 50% at 80% 90%, transparent 36%, rgba(197, 160, 89, 0.1) 38%, transparent 41%),
    linear-gradient(118deg, transparent 48%, rgba(197, 160, 89, 0.08) 49.2%, transparent 50.4%);
}

.pillars {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 7.2vw,
      rgba(197, 160, 89, 0.07) 7.2vw 7.28vw
    );
  mask-image: linear-gradient(90deg, transparent 8%, black 22%, black 78%, transparent 92%);
}

.arches {
  position: absolute;
  inset: 8% 6% 12%;
  border-radius: 50% 50% 0 0 / 28% 28% 0 0;
  border: 1px solid rgba(197, 160, 89, 0.18);
  box-shadow: inset 0 0 0 1.8vmin rgba(197, 160, 89, 0.05);
}

.sunburst {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 120vmin;
  height: 120vmin;
  translate: -50% -50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(197, 160, 89, 0.16) 0deg 3.5deg,
    transparent 3.5deg 7deg
  );
  mask-image: radial-gradient(circle, black 6%, transparent 58%);
  animation: spin-sun 140s linear infinite;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 22vmin 5vmin #000;
}

.particles {
  position: absolute;
  inset: 0;
}

.particle {
  position: absolute;
  bottom: -4%;
  width: 0.32vmin;
  height: 0.32vmin;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  animation: rise-sparkle var(--dur, 9s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  box-shadow: 0 0 0.9vmin var(--gold);
}

.plume {
  position: absolute;
  z-index: 1;
  bottom: 2%;
  width: 16vw;
  height: 62vh;
  background: url("../assets/plume.svg?v=2") center bottom / contain no-repeat;
  opacity: 0.88;
  pointer-events: none;
  filter: drop-shadow(0 0 3vmin rgba(98, 28, 140, 0.65));
}

.plume--left {
  left: 1.2vw;
  transform: scaleX(-1);
}

.plume--right {
  right: 1.2vw;
}

.stage-steps {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 9vh;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 1.35vh,
      rgba(197, 160, 89, 0.55) 1.35vh 1.48vh
    );
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  opacity: 0.7;
}

.fan {
  height: 5.6vmin;
  width: min(28vw, 36vmin);
  margin: 0 auto;
  background: repeating-conic-gradient(
    from -90deg at 50% 100%,
    var(--gold-deep) 0deg 5deg,
    var(--gold) 5deg 6deg,
    transparent 6deg 11deg
  );
  mask-image: radial-gradient(ellipse 100% 140% at 50% 100%, black 18%, transparent 72%);
}

.gold-rule {
  width: min(36vw, 42vmin);
  height: 1px;
  margin: 1.4vmin auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-bright), var(--gold), var(--gold-bright), transparent);
  position: relative;
}

.gold-rule::before,
.gold-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.75vmin;
  height: 0.75vmin;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

.gold-rule::before { left: 16%; }
.gold-rule::after { right: 16%; }

.shimmer {
  background: linear-gradient(
    110deg,
    var(--gold-deep) 0%,
    var(--gold-bright) 42%,
    var(--ivory) 50%,
    var(--gold) 58%,
    var(--gold-deep) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-gold 7s ease-in-out infinite;
}

@keyframes spin-sun {
  to { transform: rotate(360deg); }
}

@keyframes rise-sparkle {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 0.85; }
  100% { opacity: 0; translate: 0 -110vh; }
}

@keyframes shimmer-gold {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
  .sunburst,
  .particle,
  .shimmer {
    animation: none;
  }

  .shimmer {
    color: var(--gold-bright);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
  }
}