/* All content and the ship are visible before JavaScript. Motion is an enhancement. */
.departure-photo[data-sailing-scene] {
  isolation: isolate;
  --sailing-caption-space: 64px;
  --sailing-control-space: 0px;
}
.departure-photo[data-sailing-scene] > .scene-coast {
  position: relative;
  z-index: 0;
  transform-origin: center;
}
html[data-udo-motion="on"] .departure-photo[data-sailing-scene] > .scene-coast {
  transform: translate3d(0, var(--coast-shift-y, 0px), 0) scale(1.12);
}
.departure-photo[data-sailing-scene] .sailing-boat {
  position: absolute;
  inset: var(--sailing-control-space) 2% var(--sailing-caption-space);
  z-index: 1;
  display: block;
  pointer-events: none;
  transform: translate3d(var(--boat-shift-x, 0px), var(--boat-shift-y, 0px), 0);
}
.departure-photo[data-sailing-scene] .sailing-boat img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: 50% 65%;
}
.departure-photo[data-sailing-scene] figcaption {
  z-index: 2;
}
[data-motion-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid currentColor;
  border-radius: 0;
  color: #203b32;
  background: #fffdf5;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
[data-motion-toggle][hidden] { display: none; }
[data-motion-toggle]:focus-visible {
  outline: 3px solid #a52e53;
  outline-offset: 3px;
}
.departure-photo[data-sailing-scene] [data-motion-toggle] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
}
/* With no script, OS reduced motion sees the same static, fully visible scene.
   A visitor may explicitly opt in through the control; no choice is persisted. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-udo-motion="on"]) .departure-photo[data-sailing-scene] > .scene-coast,
  html:not([data-udo-motion="on"]) .departure-photo[data-sailing-scene] .sailing-boat {
    transform: none;
  }
}