/* ---------------------------------------------------------------------------
   Ocean band — layered water with a boat floating between the wave layers.

   The whole point of this component is the z-order. Both waves are absolutely
   positioned siblings of the boat, so the boat can be sandwiched between them.
   Do not collapse them back into a single <svg> with two <path>s — that makes
   it impossible to put anything in the water.
   ------------------------------------------------------------------------- */

.ocean {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ocean-h, 210px);
  overflow: hidden;
  pointer-events: none;

  /* Hull bottom sits here, measured UP from the bottom of the band. The front
     wave path starts at y=62 of a 0-90 viewBox, i.e. 31% up from the bottom,
     and crests above and below that. Parking the hull at 26% puts its bottom
     just under the near wave's average crest, so the wave reliably cuts across
     the hull instead of clearing it. */
  --boat-waterline: 26%;

  /* Must leave headroom: band height - (waterline + boat height) > 0, or the
     mast gets clipped by the band's overflow:hidden. 210 - (55 + 132) = 23px, with the waterline at 26% of 210.

     --boat-size is the boat's HEIGHT, which is what that sum has always assumed.
     It was previously applied as a width, which was harmless while the placeholder
     was a square 120x120 SVG. The real rig is Boat.png at 350x638 — a tall
     portrait, mast included — so 88px of width made a 160px-tall boat and lifted
     the hull clean out of the water. Size by height and the hull bottom lands on
     the waterline with the mast rising into the headroom, as intended. */
  --boat-size: 208px;
}

.ocean__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ocean__back  { z-index: 1; }
.ocean__craft { z-index: 2; }
.ocean__front { z-index: 3; }

.ocean__craft {
  position: absolute;
  left: 0;
  bottom: var(--boat-waterline);
  width: 100%;
  height: 0;              /* zero-height rail: children hang off the waterline */
}

.ocean__drift {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--boat-size);
  /* Parked fully off the RIGHT edge so it sails in rather than popping in. The
     boat sails right-to-left, which is the way the art points — travel and facing
     have to agree or it reads as sailing backwards. */
  transform: translateX(calc(100vw + 40%));
}

.ocean__rock  { transform-origin: 50% 100%; }

.ocean__boat {
  display: block;
  height: 100%;
  width: auto;
}

/* Nothing moves unless the visitor is happy for it to.
   With reduced motion on, the boat sits parked at a pleasant spot in frame. */
@media (prefers-reduced-motion: no-preference) {
  .ocean__drift { animation: ocean-drift 48s linear infinite; }
  .ocean__rock  { animation: ocean-rock 5.5s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .ocean__drift { transform: translateX(0); left: 18%; }
}

@keyframes ocean-drift {
  from { transform: translateX(calc(100vw + 40%)); }
  to   { transform: translateX(-140%); }
}

/* Gentle rocking — a hair of rotation plus a small rise, so it reads as
   riding swell rather than pivoting on a pin. */
@keyframes ocean-rock {
   0%   { transform: rotate(-2.5deg) translateY(0); }
  50%   { transform: rotate( 2.5deg) translateY(-4px); }
 100%   { transform: rotate(-2.5deg) translateY(0); }
}

/* The phone sizing for this band (smaller band, smaller boat) used to live here as
   a bare @media query. It moved to MOBILE_RULES in scripts/build.js so it also gets
   a [data-mode="mobile"] copy — that is what lets the phone stage on /sandbox show
   the real phone boat inside a 390px frame on a desktop screen. */

/* Spine drop-in: when the rigged canvas replaces the <img>, it inherits the
   same box. Drift and rock stay in CSS — let the rig own sails and pennant. */
.ocean__boat canvas,
canvas.ocean__boat {
  display: block;
  height: 100%;
  width: auto;
}

/* Size the whole craft chain by HEIGHT.
   theme.css sizes a generic .rig by width, which is right for the palm and the
   car — they are placed by width in their own containers. The boat is the one
   mount whose vertical position is load-bearing: its hull bottom has to land on
   --boat-waterline or it floats above the water. These rules are scoped to
   .ocean__craft so they override the generic .rig sizing here and nowhere else. */
.ocean__craft .ocean__rock { display: block; height: 100%; }
.ocean__craft .rig { display: block; height: 100%; width: auto; }
.ocean__craft .rig > img { height: 100%; width: auto; }
.ocean__craft .rig > spine-skeleton { position: absolute; inset: 0; height: 100%; width: 100%; }