/* ==================================================================
   ELBDAMPFER — fährt nach Klick auf "Elbeschiffahrt feiern" einmal
   über den unteren Bildschirmrand. Klick auf das Schiff deckt den
   Fahndungsplan auf. Element wird von script.js erzeugt/entfernt.
   ================================================================== */
.dampfer-sail {
  position: fixed;
  bottom: 8px; left: 0;
  width: clamp(180px, 26vw, 300px);
  z-index: 9000;
  background: none; border: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* translate3d statt translateX: erzwingt saubere GPU-Kompositierung
     ohne Sub-Pixel-Flackern. KEIN drop-shadow hier — ein Filter auf dem
     20s durchlaufenden Element lässt Chromium die Ebene je Frame neu
     rastern (Flackern). Der Schatten sitzt am inneren <img>. */
  transform: translate3d(-110%, 0, 0);
  animation: dampfer-fahrt 20s linear forwards;
  will-change: transform;
}
@keyframes dampfer-fahrt {
  from { transform: translate3d(-110%, 0, 0); }
  to   { transform: translate3d(calc(100vw + 24px), 0, 0); }
}
.dampfer-sail img {
  display: block; width: 100%; height: auto;
  animation: dampfer-bob 3.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(26,22,19,0.18));
}
@keyframes dampfer-bob {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-4px) rotate(0.6deg); }
}
.dampfer-sail:hover img { animation-play-state: paused; }
.dampfer-sail:focus-visible { outline: 2px dashed var(--stamp-red); outline-offset: 6px; }
.dampfer-sail.found { opacity: 0; transition: opacity 0.4s ease; }
/* Reduced Motion: keine Fahrt — kurz statisch zeigen */
.dampfer-sail.static {
  animation: none;
  transform: none;
  left: auto; right: 5vw;
  opacity: 0;
  animation: dampfer-fade 7s ease forwards;
}
@keyframes dampfer-fade {
  0%, 100% { opacity: 0; }
  8%, 85% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dampfer-sail img { animation: none; }
}