/* Photographic motion lives on the image, leaving native scroll and links intact. */
.im-scene {
  --im-drift-x: 0px;
  --im-drift-y: 0px;
  --im-intro-x: 0px;
  --im-intro-y: 0px;
  --im-scale: 1.14;
  --im-rotation: 0deg;
  --im-edge-a: 100%;
  --im-edge-b: 100%;
  --im-aperture: 0%;
  --im-tilt-x: 0deg;
  --im-tilt-y: 0deg;
  --im-light: 0;
  --im-light-x: 50%;
  --im-light-y: 50%;
}

/* The photo choreography replaces only the old generic image entrance. */
.image-motion-ready.reveal-ready .im-scene[data-reveal="image"],
.image-motion-ready.reveal-ready .im-scene[data-reveal="image"].is-visible {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

.image-motion-ready .im-scene .im-photo,
.image-motion-ready .im-scene:hover .im-photo {
  transform: none;
  translate: calc(var(--im-drift-x) + var(--im-intro-x)) calc(var(--im-drift-y) + var(--im-intro-y));
  scale: var(--im-scale);
  rotate: var(--im-rotation);
  transform-origin: center;
  backface-visibility: hidden;
  transition: none;
}

/* An angled curtain opens across the supporting-page photography. */
.image-motion-ready .inner-hero-image.im-scene {
  background: var(--cream, #FCFBEB);
  isolation: isolate;
}
.image-motion-ready .inner-hero-image.im-scene .im-photo {
  clip-path: polygon(0 0, var(--im-edge-a) 0, var(--im-edge-b) 100%, 0 100%);
}
.image-motion-ready .inner-hero-image.im-scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--coral, #E94D34);
  transform: scaleX(var(--im-rule, 1));
  transform-origin: left;
  pointer-events: none;
}
[dir="rtl"] .image-motion-ready .inner-hero-image.im-scene::after,
.image-motion-ready[dir="rtl"] .inner-hero-image.im-scene::after {
  transform-origin: right;
}

/* The real quad photo rises behind its fixed, readable booking copy. */
.image-motion-ready .im-card .card-image {
  inset: -10px;
  transform: perspective(1100px) rotateX(var(--im-tilt-x)) rotateY(var(--im-tilt-y));
  transform-origin: center;
}
.image-motion-ready .im-card[data-image-motion="quad"] .im-photo {
  object-position: 50% center;
  clip-path: polygon(0 var(--im-edge-a), 100% var(--im-edge-b), 100% 100%, 0 100%);
}
.image-motion-ready .im-card .buggy-art {
  transform: perspective(1100px) rotateX(var(--im-tilt-x)) rotateY(var(--im-tilt-y));
  transform-origin: center 55%;
}
.image-motion-ready .im-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at var(--im-light-x) var(--im-light-y), rgba(252, 251, 235, .22), transparent 62%);
  opacity: var(--im-light);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* A centre aperture introduces the ride story without changing its slideshow. */
.image-motion-ready .ride-images.im-scene .im-photo {
  clip-path: inset(0 var(--im-aperture));
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1);
}

/* Each gallery photograph has its own depth as the native track moves. */
.image-motion-ready .gallery-item.im-scene .im-photo {
  clip-path: inset(var(--im-gallery-top, 0%) 0 var(--im-gallery-bottom, 0%));
  transition: filter .6s ease;
}

/* Promote only the layers currently moving; settled photos release their layers. */
.image-motion-ready .im-scene.im-moving .im-photo {
  will-change: translate, scale, rotate, clip-path;
}
.image-motion-ready .im-card.im-moving .card-image,
.image-motion-ready .im-card.im-moving .buggy-art {
  will-change: transform;
}

/* Keep the foreground rider in the tall phone crop of the original photograph. */
@media (max-width: 760px) {
  .image-motion-ready .im-card[data-image-motion="quad"] .card-image .im-photo {
    object-position: 78% center;
  }
}

/* Pausing also resolves any unfinished mask so every photograph stays available. */
html.motion-paused .im-scene .im-photo,
html.motion-paused .im-scene:hover .im-photo {
  translate: none !important;
  scale: 1 !important;
  rotate: none !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
  will-change: auto !important;
}
html.motion-paused .im-card .card-image,
html.motion-paused .im-card .buggy-art {
  transform: none !important;
  will-change: auto !important;
}
html.motion-paused .im-card::after { opacity: 0; }
html.motion-paused .inner-hero-image.im-scene::after { transform: none; }

@media (hover: none), (pointer: coarse) {
  .image-motion-ready .im-card::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .image-motion-ready .im-scene .im-photo,
  .image-motion-ready .im-scene:hover .im-photo {
    translate: none !important;
    scale: 1 !important;
    rotate: none !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .image-motion-ready .im-card .card-image,
  .image-motion-ready .im-card .buggy-art {
    transform: none !important;
    will-change: auto !important;
  }
  .image-motion-ready .im-card::after { opacity: 0; }
  .image-motion-ready .inner-hero-image.im-scene::after { transform: none; }
}