/* The supplied ivory-and-gold elephant stays on one layer through all three scenes. */
.journey-elephant {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 17%;
  width: min(50vw, 540px, 54svh);
  transform: translateX(-50%) translateX(var(--ride-x, 0px));
  opacity: var(--ride-opacity, 1);
  pointer-events: none;
}
.journey-elephant[hidden], html:not(.cinematic) .journey-elephant { display: none; }
.elephant-body {
  position: relative;
  width: 100%;
  aspect-ratio: 1390 / 1040;
  transform: translateY(var(--gait-rise, 0px));
  transform-origin: 50% 92%;
}
.elephant-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 12%;
  bottom: -1%;
  height: 4%;
  border-radius: 50%;
  background: #18201566;
  filter: blur(6px);
}
.elephant-art { display: block; width: 100%; height: 100%; transform: scaleX(-1); filter: drop-shadow(1px 4px 2px #32281044); }
.elephant-riders {
  position: absolute;
  left: 8%;
  top: -36%;
  width: 49%;
  height: auto;
  opacity: var(--riders-opacity, 1);
  transform: translateY(calc(var(--riders-y, 0px) + var(--saddle-rise, 0px)));
  filter: drop-shadow(1px 3px 1px #30261233);
}
.cinematic .elephant-still { display: none; }
.cinematic #the-plan .story-cast, .cinematic #arrival .story-cast { z-index: 7; }
.cinematic #the-plan .story-person { left: 34%; bottom: 18%; }
.cinematic #the-plan .story-person.woman { left: 65%; }
.cinematic #arrival .dialogue-track { z-index: 8; }
html:not(.cinematic) .elephant-still { position: absolute; width: min(60vw, 550px); left: 50%; bottom: 8%; transform: translateX(-50%); }
html:not(.cinematic) #the-plan .story-cast,
html:not(.cinematic) #arrival .story-cast,
html:not(.cinematic) #arrival .together-art { display: none; }
@media (max-width: 650px) {
  .journey-elephant { width: min(89vw, 54svh); bottom: 24%; }
  html:not(.cinematic) .elephant-still { width: 86vw; bottom: 18%; }
  .cinematic #arrival .story-person { width: 38vw; }
}

/* One continuous textured surface, with the original image as a safe fallback. */
.elephant-mesh { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mesh-ready .elephant-mesh { opacity: 1; }
.mesh-ready .elephant-fallback { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .elephant-body, .elephant-riders { transform: none; }
}