/* =========================================================================
   MOTION v2 candidate (salience-tuned) — review-only stylesheet, loaded ONLY by
   /review-motion2/ AFTER pages.css and pages-fixed.css (v2 boat params). Adds the distant
   sailboat's placement + motion (system 4 of 4); everything else about the
   approved FIXED baseline is inherited unchanged.
   ========================================================================= */

/* the distant sailboat: moored in the open bay water above the window and
   clear of island, beach curve, city, seam and pause control */
.motion-boat {
  position: absolute;
  left: 59%;
  top: calc(min(60vw, 760px) * 0.735);
  width: clamp(34px, 3.6vw, 52px);
  z-index: 1; /* over the scene art, under content (z2) and the stage */
  pointer-events: none;
  animation: boatDrift 75s ease-in-out infinite alternate;
}
.motion-boat .boat-range {
  /* short-range drift: reads within the observation window */
  animation: boatRange 11s ease-in-out infinite alternate;
  display: block;
}
.motion-boat .boat-heave {
  animation: boatHeave 5.6s ease-in-out infinite alternate;
}
.motion-boat .boat-roll {
  animation: boatRoll 6.8s ease-in-out -2s infinite alternate;
  transform-origin: 50% 92%;
  display: block;
}
.motion-boat svg { display: block; width: 100%; height: auto; }

@keyframes boatDrift { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes boatRange { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes boatHeave { from { transform: translateY(0); } to { transform: translateY(3.5px); } }
@keyframes boatRoll { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }

/* governance: pause chip and reduced motion stop everything new */
body.motion-paused .motion-boat,
body.motion-paused .motion-boat * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-boat, .motion-boat * { animation: none !important; }
}

/* the boat leaves the composition on mobile (different crop; restraint) */
@media (max-width: 640px) {
  .motion-boat { display: none; }
}

/* sun glimmer: the sun's sparkle path — four warm dashes twinkling in
   sequence along the light's diagonal across the open bay (aligned with the
   existing sun and light direction; no lens flare, no flashing) */
.motion-sunpath {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.motion-sunpath i {
  position: absolute;
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #FFE2A8;
  mix-blend-mode: overlay;
  opacity: 0;
  filter: blur(0.4px);
  animation: sunTwinkle 6.5s ease-in-out infinite;
}
.motion-sunpath i:nth-child(1) { left: 84%;   top: calc(min(60vw, 760px) * 0.755); width: 26px; animation-delay: 0s; }
.motion-sunpath i:nth-child(2) { left: 79%;   top: calc(min(60vw, 760px) * 0.775); width: 22px; animation-delay: 1.3s; }
.motion-sunpath i:nth-child(3) { left: 73.5%; top: calc(min(60vw, 760px) * 0.795); width: 26px; animation-delay: 2.6s; }
.motion-sunpath i:nth-child(4) { left: 67.5%; top: calc(min(60vw, 760px) * 0.815); width: 24px; animation-delay: 3.9s; }
@keyframes sunTwinkle {
  0%, 46%, 100% { opacity: 0; }
  12% { opacity: .8; }
  30% { opacity: .25; }
}
body.motion-paused .motion-sunpath i { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-sunpath i { animation: none !important; opacity: .3; }
}
@media (max-width: 640px) {
  .motion-sunpath { display: none; }
}