.hero-art .orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 600px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;
}
.hero-art .orbit::before, .hero-art .orbit::after { display: none; }
.hero-art .art-stage {
  width: 88%;
  transform: none;
  container-type: inline-size;
}
#artStage .support {
  opacity: 0;
  transform: translateY(10px) scale(.94);
  transform-origin: 50% 46%;
  transition: opacity .25s ease, transform .35s ease;
}
/* Reveal the finished artwork as one piece instead of drawing its mask. */
#artStage .support > g { mask: none; }
#artStage .trace, #artStage .finish { animation: none; }
#artStage .logo {
  transition: transform .65s cubic-bezier(.22, 1, .36, 1),
    left .65s cubic-bezier(.22, 1, .36, 1),
    top .65s cubic-bezier(.22, 1, .36, 1),
    width .65s cubic-bezier(.22, 1, .36, 1);
}
#artStage[data-shape="brand"] .logo {
  left: 9%;
  top: 42.75%;
  width: 18%;
  transform: rotate(0deg);
}
.hero-wordmark {
  position: absolute;
  left: 29.5%;
  top: 42.75%;
  width: 63%;
  height: 14.5%;
  display: flex;
  align-items: center;
  color: var(--ink, #20211f);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: clamp(34px, 5.5vw, 68px);
  font-size: clamp(34px, 13cqi, 68px);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#artStage.ready[data-shape="brand"] .hero-wordmark {
  opacity: 1;
  transition: opacity .35s ease .2s;
}
#artStage.ready[data-shape="flower"] .support.flower,
#artStage.ready[data-shape="butterfly"] .support.butterfly,
#artStage.ready[data-shape="fish"] .support.fish,
#artStage.ready[data-shape="jelly"] .support.jelly {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .5s ease .24s, transform .7s cubic-bezier(.16, 1.2, .3, 1) .2s;
}
.hero-art .shape-controls { bottom: -3px; }
.hero-motion-control {
  display: block;
  position: absolute;
  top: calc(100% + 17px);
  border: 0;
  background: transparent;
  color: #65655f;
  font: inherit;
  font-size: .75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 600px) {
  .hero-art .art-stage { width: 94%; }
  .hero-art { margin-bottom: 26px; }
  .hero-art .shape-controls { bottom: -8px; }
  .hero-motion-control { top: calc(100% + 23px); }
}
@media (prefers-reduced-motion: reduce) {
  #artStage .support, #artStage .logo { transition: none!important; }
  .hero-motion-control { display: none; }
}