/* ==========================================================================
   Voyages: animated transitions between the light and dark layers of the page.
   The boundary between two sections becomes a sea. Three wave layers slide
   past each other as you scroll (parallax), and a longship sails across,
   driven by the scroll position (see src/js/voyage.js).

   --from  background of the section above
   --to    background of the section below (the front wave is filled with it)
   ========================================================================== */

.voyage {
  --from: var(--spray);
  --to: var(--tar);
  --p: 0.5; /* scroll progress 0..1, set by JS */
  position: relative;
  height: clamp(160px, 24vw, 340px);
  background: var(--from);
  overflow: hidden;
  container-type: inline-size;
}

/* The first voyage follows a light section, so it needs the usual gap above */
.section + .voyage {
  margin-top: var(--space-l);
}

.voyage--to-ocean {
  --to: var(--ocean);
}

.voyage--to-light {
  --from: var(--tar);
  --to: var(--spray);
  height: clamp(70px, 9vw, 130px);
}

/* Sea layers ------------------------------------------------------------- */

.voyage__sea {
  position: absolute;
  left: 0;
  bottom: -1px; /* avoids a hairline gap from sub-pixel rounding */
  width: 200%;
  max-width: none;
  will-change: transform;
}

.voyage__sea--far {
  height: 52%;
  fill: var(--fjord);
  opacity: 0.35;
  transform: translateX(calc(-10% - var(--p) * 30%));
}

.voyage__sea--back {
  height: 44%;
  fill: var(--fjord);
  transform: translateX(calc(-40% + var(--p) * 35%));
}

.voyage__sea--front {
  height: 34%;
  fill: var(--to);
  transform: translateX(calc(var(--p) * -45%));
}

.voyage--from-ocean {
  --from: var(--ocean);
}

.voyage--to-light .voyage__sea--far {
  height: 80%;
}
.voyage--to-light .voyage__sea--back {
  height: 66%;
  fill: var(--fjord);
}
.voyage--to-light .voyage__sea--front {
  height: 50%;
}

/* The ship --------------------------------------------------------------- */

.voyage__ship {
  position: absolute;
  left: 0;
  bottom: 3%;
  height: 80%;
  aspect-ratio: 420 / 260;
  /* --x is set in px by JS; without JS the ship is parked in the middle */
  transform: translate3d(var(--x, calc(50cqw - 50%)), 0, 0);
  will-change: transform;
}

.voyage__bob {
  height: 100%;
  transform-origin: 50% 80%;
  /* --tilt leans the ship with your scroll speed, like riding a swell */
  rotate: var(--tilt, 0deg);
  transition: rotate 0.6s var(--ease-out);
  animation: bob 4.2s ease-in-out infinite;
}

.voyage[data-direction="left"] .ship {
  transform: scaleX(-1);
}

/* Keep the mascot on the sail facing the right way when the ship is mirrored */
.voyage[data-direction="left"] .ship__mascot {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}

.ship {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ship__hull {
  fill: var(--tar-soft);
  stroke: var(--tar);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ship__lap {
  fill: none;
  stroke: var(--tar);
  stroke-width: 3;
  opacity: 0.55;
}
.ship__rivets {
  fill: none;
  stroke: var(--ochre);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 0 14;
  opacity: 0.9;
}
.ship__post {
  fill: none;
  stroke: var(--tar);
  stroke-width: 9;
  stroke-linecap: round;
}
.ship__shield {
  stroke: var(--tar);
  stroke-width: 2.5;
}
.ship__boss {
  fill: var(--spray);
  stroke: var(--tar);
  stroke-width: 1.5;
}
.ship__mast,
.ship__yard {
  stroke: var(--tar);
  stroke-width: 6;
  stroke-linecap: round;
}
.ship__rig {
  fill: none;
  stroke: var(--tar);
  stroke-width: 1.5;
  opacity: 0.7;
}
.ship__sail-bg {
  fill: var(--spray);
}
.ship__stripe {
  fill: var(--ochre);
} /* sail in the logo palette */
.ship__sail-edge {
  fill: none;
  stroke: var(--tar);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ship__pennant {
  fill: var(--ochre);
  stroke: var(--tar);
  stroke-width: 1.5;
}
.ship__oar {
  stroke: #d9b27a;
  stroke-width: 4;
  stroke-linecap: round;
}
.ship__oars {
  filter: drop-shadow(1.5px 1.5px 0 var(--tar));
}

.ship__wake path {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.6;
}

/* Rowing: every oar sweeps around the point where it meets the gunwale */
.ship__oar {
  transform-box: fill-box;
  transform-origin: 100% 0;
  animation: row 1.8s ease-in-out infinite;
  animation-delay: calc(var(--o) * -40ms);
}

.ship__pennant {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: flutter 1.4s ease-in-out infinite alternate;
}

.ship__wake {
  animation: wake 1.8s ease-in-out infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1.2deg);
  }
  50% {
    transform: translateY(4%) rotate(1.2deg);
  }
}

@keyframes row {
  0%,
  100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(12deg);
  }
}

@keyframes flutter {
  from {
    transform: skewY(-8deg) scaleX(0.9);
  }
  to {
    transform: skewY(6deg) scaleX(1.05);
  }
}

@keyframes wake {
  0%,
  100% {
    opacity: 0.25;
    transform: translateX(0);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-6px);
  }
}

/* Reduced motion: the ship stays parked mid-screen (JS also stops tracking
   scroll), and the waves hold still. base.css stops the keyframe loops. */
@media (prefers-reduced-motion: reduce) {
  .voyage__sea--far,
  .voyage__sea--back,
  .voyage__sea--front {
    --p: 0.5;
  }

  .voyage__bob {
    rotate: 0deg;
  }
}

html[data-motion="off"] .voyage__sea {
  --p: 0.5;
}

html[data-motion="off"] .voyage__bob {
  rotate: 0deg;
}