/* Shader-driven moonlit water. The canvas begins at the measured horizon and
   supplies its own atmospheric transition into the photographic sky. */
.horizon-glow{overflow:hidden}
.water-canvas{
  position:absolute;
  z-index:1;
  left:-1%;
  /* 430 / 941 is the source artwork's true horizon. JavaScript replaces
     this fallback with the exact cover-cropped pixel position. */
  top:45.7%;
  width:102%;
  height:54.5%;
  display:block;
  pointer-events:none;
  opacity:.98;
}

/* Contact foam is rendered in the water shader from each object's live DOM
   position; remove the older detached CSS ellipse and artificial ship wake. */
.scene-prop:after{display:none!important}
.wake{display:none!important}

/* Safe fallback: retain the original complete ocean when WebGL cannot start. */
.water-fallback .horizon-glow{
  background-image:linear-gradient(rgba(1,7,11,.05),rgba(1,8,12,.12)),url("ocean-night.png")!important;
}
.water-fallback .water-canvas{display:none}

/* The deck samples the same swell phases as the shader. This replaces the
   unrelated legacy heave loop while WebGL water is active. */
.water-synced .ship-view{
  animation:none!important;
  transform:translate3d(0,var(--swell-heave,0px),0) rotate(var(--swell-roll,0deg));
  transform-origin:50% 100%;
}

@media(max-width:850px){
  .water-canvas{left:-2%;width:104%;opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .water-synced .ship-view{transform:none!important}
}