/* Escultura do movimento: a studio "window" for the WebGL sculpture, with a rendered poster underneath. */
.journey .journey-art-frame {
  padding: 18px;
  border: 1px solid rgba(220, 236, 231, .16);
  background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015) 55%);
  box-shadow: 0 40px 80px -40px rgba(4, 18, 22, .7);
  color: #eef4f1;
}
.journey .journey-art-label { color: rgba(238, 244, 241, .74); font-size: 10px; }
.journey .journey-art-label span { color: #a4ddd3; }
.journey .journey-art-footer { color: #f4f7f5; }
.journey .journey-progress-label { color: #a4ddd3; }

.journey .journey-stage {
  position: relative;
  height: clamp(380px, min(42vw, 62vh), 600px);
  margin: 16px 0;
  overflow: hidden;
  isolation: isolate;
  transform: none;
  background:
    radial-gradient(110% 80% at 50% 26%, #47787d 0%, #2a5058 40%, #17323a 78%, #10262c 100%);
  background-image: none;
  transition: none;
}
/* Soft vignette and floor glow sit above the canvas, below nothing interactive. */
.journey .journey-stage::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(60% 18% at 50% 92%, rgba(164, 221, 211, .12), transparent 70%),
    radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(6, 20, 24, .55) 100%);
  content: "";
  pointer-events: none;
}
.journey-poster,
.journey-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* The poster always stays underneath: the canvas paints an opaque studio backdrop over it,
   so a cleared or lost WebGL context can never leave the stage empty. */
.journey-poster { z-index: 0; object-fit: cover; }
.journey-canvas { z-index: 1; opacity: 0; transition: opacity 1.2s ease; }
.journey-stage.is-3d-ready .journey-canvas { opacity: 1; }

/* The SVG figure styles from the previous version no longer apply. */
.journey[data-motion="off"] .journey-stage,
.journey .journey-stage { transform: none; }

@media (max-width: 960px) {
  .journey .journey-stage { height: clamp(360px, 52vw, 520px); }
}

@media (max-width: 700px) {
  /* The artwork sits above the steps here, so it does not count them. */
  .journey .journey-progress-label { display: none; }
  .journey .journey-art-frame { padding: 12px; }
  .journey .journey-stage { height: min(118vw, 470px); min-height: 340px; margin: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-poster, .journey-canvas { transition: none; }
}