.hero-gallery {
  position: relative;
  --hero-motion-gap: .65rem;
}

.hero-gallery.is-motion-initialized {
  display: block;
  overflow: hidden;
}

.hero-track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--hero-motion-gap);
  transform: translateX(0);
}

.hero-gallery.is-motion-running .hero-track { will-change: transform; }

.hero-track.is-motion-sliding {
  transform: translateX(calc((100% + var(--hero-motion-gap)) / -3));
  transition: transform 500ms cubic-bezier(.25,.7,.25,1);
}

html .hero-gallery.is-motion-initialized .hero-shot {
  flex: 0 0 calc((100% - var(--hero-motion-gap) - var(--hero-motion-gap)) / 3);
  min-width: 0;
  animation: none;
  opacity: 1;
  transform: none;
}

html .hero-track .hero-shot--lift { height: 82%; }
html .hero-track .hero-shot--run { height: 100%; }
html .hero-track .hero-shot--move { height: 90%; }
.hero-shot--clone { pointer-events: none; }

.hero-motion-toggle {
  position: absolute;
  z-index: 3;
  top: .75rem;
  right: .75rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--acid, #c9f36b);
  background: #0b0d0ce6;
  border: 1px solid #c9f36b66;
  border-radius: 50%;
  cursor: pointer;
  font: 700 1rem/1 sans-serif;
}

.hero-motion-toggle[hidden] { display: none; }
.hero-motion-toggle:hover { background: #1c2818; }
.hero-motion-toggle:focus-visible { outline: 2px solid #c9f36b; outline-offset: 4px; }

@media (max-width: 640px) {
  .hero-gallery { --hero-motion-gap: .35rem; }
  .hero-motion-toggle { top: .4rem; right: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html .hero-gallery.is-motion-initialized .hero-shot {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .hero-track,
  .hero-track.is-motion-sliding {
    transform: none;
    transition: none;
    will-change: auto;
  }
}