/* Controls belong only to the decorative homepage motion, not the copy/layout. */
.balance-motion-toggle {
  position: absolute;
  right: 32px;
  bottom: 124px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 7px;
  color: #b5ad9e;
  background: #100f0d99;
  border: 1px solid #b5ad9e55;
  border-radius: 50%;
  cursor: pointer;
  opacity: .65;
}
.balance-motion-toggle[hidden] { display: none; }
.balance-motion-toggle:hover { opacity: 1; }
.balance-motion-toggle:focus-visible { outline: 2px solid #c7b48f; outline-offset: 4px; opacity: 1; }
.balance-motion-toggle svg { width: 100%; height: 100%; fill: currentColor; }
.balance-motion-toggle [data-motion-play] { display: none; }
.balance-motion-toggle[data-state="paused"] [data-motion-play] { display: block; }
.balance-motion-toggle[data-state="paused"] [data-motion-pause] { display: none; }
@media (max-width: 1000px) {
  .balance-motion-toggle { bottom: 72px; }
}
@media (max-width: 600px) {
  .balance-motion-toggle { right: 24px; bottom: 62px; }
}
