.home {
  position: relative;
  z-index: 0;
  min-height: 100svh;
}

.bg-elements {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}

.bg-elements__wheel,
.bg-elements__orb {
  position: fixed;
  aspect-ratio: 1;
}

.bg-elements__wheel {
  top: var(--wheel-top);
  right: var(--wheel-right);
  width: var(--wheel-size);
  color: var(--bg-stroke);
}

.bg-elements__orb {
  top: var(--orb-top);
  left: var(--orb-left);
  width: var(--orb-size);
  color: var(--bg-stroke);
}

.bg-parallax,
.bg-elements__inner {
  width: 100%;
  height: 100%;
  transform-origin: center;
}

.js:not(.is-reduced-motion) .bg-elements__inner {
  opacity: 0;
}

.bg-elements__inner svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bg-wheel circle,
.bg-wheel line,
.bg-orb circle {
  vector-effect: non-scaling-stroke;
  fill: none;
}

.bg-wheel circle[fill="currentColor"],
.bg-orb #orb-core circle {
  fill: currentColor;
}

.bg-orb #orb-core circle {
  fill: url("#evg-orb-gradient");
}

.bg-wheel__accent,
.bg-wheel__tracer,
.bg-orb__accent {
  stroke: var(--bg-accent);
}

.bg-wheel__accent {
  opacity: 0.42;
}

.bg-wheel__tracer,
.bg-orb__accent {
  stroke-width: 1.5;
  opacity: 0.92;
}

.bg-wheel__ticks {
  opacity: 0.4;
}

#orb-ripple {
  opacity: 0;
  transform-box: view-box;
  transform-origin: center;
}

#wheel-rotor,
#wheel-tread,
#orb-core {
  transform-box: view-box;
  transform-origin: center;
}

@media (max-width: 720px) {
  :root {
    --wheel-size: 112vw;
    --wheel-top: -18vw;
    --wheel-right: -70vw;
    --orb-size: 86vw;
    --orb-top: 50vh;
    --orb-left: -38vw;
  }

  #wheel-tread,
  #wheel-ticks {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .bg-elements__inner,
  .js.is-reduced-motion .bg-elements__inner {
    opacity: 1;
    transform: none;
  }
}