/* Freie Fahrt der Galeone (board-fx-sail.js): segelt sie durch eigene Figuren,
   gleitet sie ruhig zum Ziel und wiegt sich dabei leicht, die durchsegelte
   Mannschaft weicht kurz zur Seite, am Ziel laeuft ein Wellenring aus.
   Gischt/Kielwasser sind .boardFx-dust-Partikel (main-12.css). */
.boardFx-sailShip { position: fixed; z-index: 2; }
.boardFx-sailShip > .chip {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
}
.boardFx-sailHull {
  transform-origin: 50% 88%;
  filter: drop-shadow(0 0 8px rgba(92, 200, 255, .55));
  animation: boardFxSailRock var(--sail-ms, 640ms) ease-in-out 1 both;
}
@keyframes boardFxSailRock {
  0%   { transform: rotate(0deg) translateY(0); }
  28%  { transform: rotate(-4deg) translateY(-3%); }
  58%  { transform: rotate(3deg) translateY(-1.5%); }
  82%  { transform: rotate(-1.2deg) translateY(-2%); }
  100% { transform: rotate(0deg) translateY(0); }
}

.boardFx-sailCrew {
  z-index: 1;
  transform-origin: 50% 90%;
  animation: boardFxSailCrew 480ms cubic-bezier(.3, .6, .35, 1) var(--sail-delay, 0ms) 1 both;
}
@keyframes boardFxSailCrew {
  0%   { transform: translate(0, 0) rotate(0deg); }
  34%  { transform: translate(var(--sail-nx, 0px), var(--sail-ny, 0px)) rotate(var(--sail-tilt, 0deg)); }
  62%  { transform: translate(calc(var(--sail-nx, 0px) * .7), calc(var(--sail-ny, 0px) * .7)) rotate(calc(var(--sail-tilt, 0deg) * -.45)); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.boardFx-sailRipple {
  position: fixed; pointer-events: none; border-radius: 50%;
  border: 2px solid rgba(186, 236, 255, .85);
  box-shadow: 0 0 10px rgba(92, 200, 255, .55), inset 0 0 6px rgba(92, 200, 255, .35);
  opacity: 0; transform: translate(-50%, -50%) scale(.3);
  animation: boardFxSailRipple .8s ease-out 1 forwards;
}
@keyframes boardFxSailRipple {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.3); }
  22%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .boardFx-sailHull,
  .boardFx-sailCrew,
  .boardFx-sailRipple { animation: none !important; }
  .boardFx-sailRipple { display: none !important; }
}