/* Keep the existing composition and independent artwork/text objects. */
.journey-stage { touch-action: pan-y pinch-zoom; }
#stage-card { touch-action: pan-y pinch-zoom; cursor: grab; }
#stage-card .stage-art {
  position: absolute; inset: 0;
  translate: calc((var(--experience-slide, 0) - var(--experience-active, 0)) * var(--experience-distance, 600px) + var(--experience-drag, 0px)) 0;
  transition: translate .32s ease;
  animation: none;
}
#stage-card .stage-art:nth-child(2) { --experience-slide: 1; }
#stage-card .stage-art:nth-child(3) { --experience-slide: 2; }
#stage-card .stage-art:nth-child(4) { --experience-slide: 3; }
/* Inactive slides retain every editable node and saved layout, but cannot paint
   or receive input over the selected card after an object is moved. */
#stage-card > .stage-art[aria-hidden="true"],
#stage-card > .stage-art[aria-hidden="true"] * {
  visibility: hidden !important;
  pointer-events: none !important;
}
#stage-card.is-dragging { cursor: grabbing; user-select: none; }
#stage-card.is-dragging .stage-art { transition: none; }
#stage-card img { -webkit-user-drag: none; }
#stage-card:focus-visible { outline: 1px solid #e5a17e; outline-offset: 6px; }
.journey-stage .experience-prev, .journey-stage .experience-next {
  position: absolute; bottom: 12px; z-index: 3; width: 40px; height: 40px;
  border: 1px solid #805a45; border-radius: 50%; color: #eab394;
  background: #100d0b; cursor: pointer; font-size: 19px;
}
.experience-prev { left: 20px; }
.experience-next { right: 20px; }
.journey-stage button:focus-visible { outline: 2px solid #eab394; outline-offset: 3px; }
.journey-stage .experience-prev:hover:not(:disabled), .journey-stage .experience-next:hover:not(:disabled) { background: #eab394; color: #100d0b; }
.journey-stage button:disabled { opacity: .3; cursor: default; }
.journey-stage .stage-dots { bottom: 18px; z-index: 3; gap: 3px; }
.stage-dots .experience-dot { width: 28px; height: 28px; border: 0; background: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; }
.experience-dot::after { content: ''; width: 6px; height: 6px; border-radius: 4px; background: #5f4c41; transition: width .2s; }
.experience-dot.active::after { width: 18px; background: #eab394; }
.experience-hint { position: absolute; bottom: 48px; left: 58px; right: 58px; margin: 0; text-align: center; color: #b9a99e; font-size: 9px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #stage-card .stage-art { transition: none; } }