.hero-art.mobius-stage {
  min-height: clamp(370px, 33vw, 570px);
  aspect-ratio: 5 / 4;
  isolation: isolate;
  background: transparent;
}
.mobius-stage::before {
  content: '';
  position: absolute;
  width: 65%;
  height: 11%;
  left: 17.5%;
  bottom: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #19191928, #19191912 45%, transparent 72%);
  filter: blur(9px);
  pointer-events: none;
}
.mobius-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  transition: opacity .65s ease;
}
.is-ready .mobius-canvas { opacity: 1; }
.mobius-canvas:focus-visible { outline: 2px solid var(--red); outline-offset: -7px; }
.is-dragging .mobius-canvas { cursor: grabbing; }
.hero-art .mobius-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-art:hover .mobius-fallback { transform: none; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 700px) {
  .hero-art.mobius-stage { min-height: 310px; aspect-ratio: 6 / 5; }
}
@media (prefers-reduced-motion: reduce) { .mobius-canvas { transition: none; } }