/* Separate arrival and pointer layers keep both movements interruptible. */
.stage-arrival { position:absolute; inset:0; }
.stage-garments {
 transform:translate(var(--stage-x, 0px), var(--stage-y, 0px));
 transition:transform 450ms var(--ease);
}
.silhouette-stage.is-following .stage-garments { transition-duration:250ms; }
.silhouette-stage.is-motion-reset .stage-garments { transition:none; }
.hero-entering .cover-copy { animation:cover-arrive 600ms var(--ease) both; }
.hero-entering .stage-arrival { animation:garment-arrive 700ms var(--ease) 80ms both; }
@keyframes cover-arrive { from { transform:translateY(6px); } to { transform:translateY(0); } }
@keyframes garment-arrive { from { transform:translateY(8px); } to { transform:translateY(0); } }

/* Product changes stay local to the thing the visitor chose to change. */
.stage-piece { transition: opacity 260ms var(--ease); }
.stage-piece img { transition: opacity 240ms var(--ease); }
.portrait-front, .portrait-back { transition: opacity 240ms var(--ease), translate 400ms var(--ease); }
.bag-dialog {
 opacity: 0;
 translate: 16px 0;
 transition: opacity 200ms ease-out, translate 240ms var(--ease), display 240ms allow-discrete, overlay 240ms allow-discrete;
}
.bag-dialog[open] { opacity: 1; translate: 0 0; }
dialog::backdrop { opacity: 0; transition: opacity 200ms ease-out, display 240ms allow-discrete, overlay 240ms allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style {
 .bag-dialog[open] { opacity: 0; translate: 16px 0; }
 dialog[open]::backdrop { opacity: 0; }
}
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; }
.motion-paused { scroll-behavior: auto; }
.motion-paused .stage-garments { transform:none; }
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
 .stage-garments { transform:none; }
}