/* Static homepage scenery: decorations scroll with the document, never the viewport. */
.home {
  position: relative;
  isolation: isolate;
  --orbit-line: #aaa1ff30;
  --orbit-glow: #8575ff22;
  --orbit-cool: #73baff16;
}
:root[data-theme="light"] .home {
  --orbit-line: #7868db26;
  --orbit-glow: #8c79ff22;
  --orbit-cool: #81c9ff1c;
}
.ambient-scene {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  contain: strict;
}
.ambient-orbit {
  position: absolute;
  width: min(82vw, 1180px);
  aspect-ratio: 1;
  top: -8vh;
  left: 44%;
}
.ambient-wash,
.ambient-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ambient-wash {
  border-radius: 50%;
  background: radial-gradient(circle, transparent 24%, var(--orbit-glow) 47%, transparent 70%);
}
.ambient-rings {
  stroke: var(--orbit-line);
  stroke-width: .8;
}
.orbit-point { fill: var(--accent); stroke: none; opacity: .5; }
.ambient-companion {
  position: absolute;
  width: min(70vw, 960px);
  aspect-ratio: 1;
  left: -30%;
  top: 40%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orbit-cool), transparent 68%);
}
.home .hero,
.home .closing { background: transparent; }
.home .hero-light { display: none; }
.product-stage {
  position: relative;
  isolation: isolate;
  padding-top: 16px;
}
.product-aura {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(110vw, 1600px);
  height: 800px;
  left: 50%;
  top: -180px;
  translate: -50% 0;
  background: radial-gradient(ellipse, var(--orbit-glow) 5%, var(--orbit-cool) 40%, transparent 68%);
}
.home .closing-light {
  display: block;
  z-index: -1;
  position: absolute;
  inset: -25% 0;
  background: radial-gradient(ellipse, var(--orbit-glow), transparent 65%);
  pointer-events: none;
}
.home .closing-light:after { display: none; }
@media (max-width: 700px) {
  .ambient-orbit { width: 115vw; left: 27%; top: 0; }
  .ambient-rings { opacity: .65; }
  .ambient-companion { display: none; }
  .product-stage { padding-top: 8px; perspective: none; }
  .product-aura { height: 450px; top: -90px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-rings { opacity: .35; }
}