/* The scene, passengers and foreground rail occupy separate depth planes.
   Individual translate composes with the Rust controller's idle transform; outer
   motion wrappers still own the original opposing vertical page transitions. */
.train-world {
  perspective: 1600px;
  perspective-origin: 50% 52%;
  transform-style: preserve-3d;
  transform: rotateX(var(--camera-pitch, 0deg)) rotateY(var(--camera-yaw, 0deg));
  transform-origin: 50% 52%;
}
.motion-layer { transform-style: preserve-3d; }
.idle-layer {
  translate: 0 0 var(--layer-depth, 0px);
  backface-visibility: hidden;
}
.layer-scene { --layer-depth: -10px; }
.layer-crab { --layer-depth: 18px; }
.layer-mascot { --layer-depth: 24px; }
.layer-bot { --layer-depth: 30px; }
.layer-strap { --layer-depth: 44px; }
/* frontend/motion.rs overscans the complete composition, preserving alignment between
   the source carriage and its foreground hand-strap drawing. */
.layer-scene .idle-layer img { transform: none; }
.layer-strap .idle-layer { transform-origin: 50% 0; }
.layer-mascot .idle-layer::before,
.layer-bot .idle-layer::before {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 40%;
  top: 95.5%;
  width: 23%;
  height: 2.5%;
  border-radius: 50%;
  background: #141923;
  opacity: .3;
  filter: blur(5px);
  transform: translateZ(-2px);
}
.layer-bot .idle-layer::before {
  left: 38%;
  top: 65%;
  width: 28%;
  height: 2.5%;
  opacity: .26;
  filter: blur(3px);
}
.layer-mascot .idle-layer img,
.layer-bot .idle-layer img { position: relative; }
/* A tall, thin crop would cut one passenger off. A bounded 4:5 companion scene
   keeps the reference arrangement together while content scrolls beside it. */
@media (min-width:761px) {
  body:not([data-page="home"]) .train-stage {
    aspect-ratio: 4 / 5;
    height: auto;
    min-height: 0;
    max-height: min(700px, calc(100svh - 160px));
  }
}
/* Home uses one continuous size curve instead of switching aspect ratios.
   An automatic width plus a 4:5 ratio and 420px max-height used to pin the
   image to 336px wide, then jump to full width above 760px.
   Keep the narrow portrait framing, open the crop as space grows, and reach
   the original 16:9 composition on desktop. Rust geometry follows this box. */
body[data-page="home"] .layout {
  padding-inline: clamp(18px, 4vw, 52px);
}
body[data-page="home"] .stage-dock {
  container-type: inline-size;
}
body[data-page="home"] .train-stage {
  width: 100%;
  aspect-ratio: auto;
  height: max(56.25cqi, min(420px, 125cqi));
  min-height: 0;
  max-height: none;
  border-radius: clamp(20px, 2.4cqi, 30px);
}
@media (max-width:760px), (pointer:coarse) {
  .train-world { perspective: 2200px; }
  .layer-crab { --layer-depth: 12px; }
  .layer-mascot { --layer-depth: 18px; }
  .layer-bot { --layer-depth: 24px; }
  .layer-strap { --layer-depth: 35px; }
}
@media (prefers-reduced-motion:reduce) {
  .train-world { transform: none; }
}