/* A camera move around the worn pieces; inventory and checkout stay in place. */
.equipment-stage[data-zone-zoom-ready] .figure {
  transform-origin: 50% 50%;
  transform: translate3d(0, var(--zone-zoom-y, 0px), 0) scale(var(--zone-zoom-scale, 1));
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1);
}
.equipment-stage.zone-zoom-moving .figure { will-change: transform; }
.equipment-stage[data-zone-zoom-ready] .body-hotspots {
  transition: opacity 160ms ease-out, visibility 160ms;
}
.equipment-stage[data-zone-zoom-ready]:not([data-zoom-zone="all"]) .body-hotspots {
  opacity: 0;
  visibility: hidden;
}
.equipment-stage[data-zone-zoom-ready]:not([data-zoom-zone="all"]) #stage-caption {
  display: none;
}
.equipment-stage[data-zone-zoom-ready]:not([data-zoom-zone="all"]) .stage-top,
.equipment-stage[data-zone-zoom-ready]:not([data-zoom-zone="all"]) .stage-bottom {
  background: var(--stage);
}
.zone-zoom-reset {
  position: absolute;
  top: 0;
  right: 24px;
  min-height: 44px;
  padding: 4px 0 4px 10px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--ink);
  background: var(--stage);
}
.zone-zoom-reset-icon { width: 20px; height: 20px; flex-shrink: 0; text-decoration: none; }
.zone-zoom-reset:hover { color: var(--accent); }
@media(max-width:760px) {
  .zone-zoom-reset { right: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .equipment-stage[data-zone-zoom-ready] .figure,
  .equipment-stage[data-zone-zoom-ready] .body-hotspots { transition: none; }
}