/* Animationen exklusiv für urlaub-in-travemuende.de – ergänzt styles.css,
   verändert es nicht. Kann jederzeit durch Entfernen des <link> in index.html
   wieder abgeschaltet werden. Respektiert prefers-reduced-motion (siehe unten). */

/* ---------- Hero: Eintritts-Animation beim Laden ---------- */
@keyframes fadeRiseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes logoAppear {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .brand { animation: logoAppear .9s cubic-bezier(.16,.84,.44,1) both; }

  .hero .hero-date  { animation: fadeRiseIn .7s cubic-bezier(.16,.84,.44,1) both; animation-delay: .05s; }
  .hero h1           { animation: fadeRiseIn .7s cubic-bezier(.16,.84,.44,1) both; animation-delay: .15s; }
  .hero .ahoi         { animation: fadeRiseIn .7s cubic-bezier(.16,.84,.44,1) both; animation-delay: .28s; }
  .hero p.lead         { animation: fadeRiseIn .7s cubic-bezier(.16,.84,.44,1) both; animation-delay: .4s; }
  .hero .hero-cta        { animation: fadeRiseIn .7s cubic-bezier(.16,.84,.44,1) both; animation-delay: .52s; }

  /* Käpt'n Ole: kein eigenes Opacity/Transform mehr auf dem <img> selbst –
     die Eintritts-Animation läuft jetzt am Wrapper (s. u.), das <img> bleibt
     unangetastet (siehe Hinweis dort zur Transform-Einschränkung). */
}

/* ---------- Wrapper um Ole: wächst als Ganzes ins Bild (wie im Original) ----------
   Genau die Technik der Referenzseite: EINE Grafik (dort ein SVG mit allem
   drin, hier Ole + die Boot-Overlays als seine Kinder) zoomt beim Laden aus
   einer kleineren Version in ihre volle Größe. Die Boote bewegen sich dabei
   nicht selbst – sie sitzen fest auf ihrer Strähne und wachsen einfach mit,
   wodurch derselbe optische "fährt die Haare herunter"-Eindruck entsteht wie
   im Original, ganz ohne eigene Boot-Animation.
   Übernimmt exakt die Positionierung/Breite, die styles.css bisher direkt
   auf .hero-ole gesetzt hat (dort unverändert gelassen) – hier nur für
   diese Domain überschrieben, damit .hero-ole selbst zum reinen Bild
   innerhalb des Wrappers wird. Das <img> selbst bekommt bewusst KEIN
   eigenes transform (dort in Tests unzuverlässig, siehe frühere Notizen) –
   der Zoom sitzt auf dem Wrapper-<div>, nicht auf dem SVG-<img>. */
.hero-ole-wrap {
  position: absolute;
  right: -4%;
  bottom: 0;
  width: clamp(560px, calc(95vw - 380px), 1400px);
  pointer-events: none;
  z-index: 1;
  transform-origin: 100% 100%;
}
.hero-ole-wrap .hero-ole {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  right: auto; bottom: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-ole-wrap { animation: wholeGraphicZoomIn 2.8s cubic-bezier(.16,.84,.44,1) both; animation-delay: .1s; }
}

@keyframes wholeGraphicZoomIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Boote auf Oles Bart & Leevkes Haar ----------
   Käpt'n Ole und Leevke bleiben unverändert (weder das SVG noch das PNG
   werden bearbeitet) – stattdessen liegen kleine, eigene Boot-Icons als
   zusätzliche, prozentual auf den sichtbaren Strähnen positionierte Ebene
   über der Illustration. Die Boote selbst bewegen sich nicht – sie wachsen
   nur mit dem Zoom (Ole) bzw. mit dem Scroll-Reveal (Leevke, s. u.) mit. */
.hair-boat {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
  z-index: 2;
}
.hair-boat-bob { display: block; }
.hair-boat-sail {
  display: block;
  width: clamp(24px, 2.6vw, 46px);
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(10,30,60,.35));
}

/* Leevkes Boote wachsen zusammen mit ihr ein, sobald der Kontaktbereich ins
   Blickfeld scrollt – Leevke selbst nutzt dafür bereits .reveal.reveal-left
   (siehe weiter unten); hier nur um eine Skalierung ergänzt, damit auch bei
   ihr die Boote "mitwachsen" statt nur seitlich einzufahren. */
@media (prefers-reduced-motion: no-preference) {
  .contact-leevke.reveal-left { transform: translateX(-46px) scale(.82); transform-origin: 20% 0%; }
}

/* ---------- Schwimmende Boote (durchgängige Bewegung) ---------- */
@keyframes boatBob {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-7px) translateX(3px); }
}
@keyframes boatBobTiltLeft {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-8deg) translateY(-6px); }
}
@keyframes boatBobTiltRight {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(-6px); }
}
@keyframes waveBoatBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Bewusst NUR eine transform-Animation pro Element (die Bob-Bewegung).
     Eine zweite, gleichzeitig auf "transform" laufende Animation würde die
     erste nach ihrem Ende dauerhaft überdecken (CSS komponiert mehrere
     Animationen auf derselben Eigenschaft nicht additiv). Das "Einfahren"
     läuft hier daher separat über Opacity + animation-play-state. */
  .boat {
    animation: boatBob 3.4s ease-in-out infinite;
    animation-play-state: paused;
    opacity: 0;
    transition: opacity 1s cubic-bezier(.16,.84,.44,1);
  }
  .intro-figure .boat { animation-name: boatBobTiltLeft; }
  .room-media .boat   { animation-name: boatBobTiltRight; }
  /* Boot bleibt (unsichtbar) angehalten, bis der Abschnitt ins Blickfeld
     scrollt – sonst wäre das Einblenden beim ersten Laden schon vorbei,
     bevor man überhaupt herscrollt. Siehe .is-visible unten. */
  .boat.is-visible { animation-play-state: running; opacity: 1; }

  .illu-svg .boat-float { animation: waveBoatBob 3.5s ease-in-out infinite; animation-play-state: paused; }
  .illu-svg .boat-float.is-visible { animation-play-state: running; }
  .illu-svg .boat-float:nth-of-type(1) { animation-duration: 3.2s; }
  .illu-svg .boat-float:nth-of-type(2) { animation-duration: 3.9s; }
  .illu-svg .boat-float:nth-of-type(3) { animation-duration: 3.4s; }
  .illu-svg .boat-float:nth-of-type(4) { animation-duration: 4.1s; }
  .illu-svg .boat-float:nth-of-type(5) { animation-duration: 3.0s; }
  .illu-svg .boat-float:nth-of-type(6) { animation-duration: 3.7s; }

  /* Die Boote in der Wellen-Illustration "segeln" beim ersten Sichtbarwerden
     seitlich in ihre Position ein (statt nur einzublenden) und schaukeln
     danach weiter (waveBoatBob auf dem äußeren <g>, s.o.). */
  .illu-svg .boat-sail {
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity 1s cubic-bezier(.16,.84,.44,1), transform 1s cubic-bezier(.16,.84,.44,1);
  }
  .illu-svg .boat-sail.is-visible { opacity: 1; transform: none; }
  .illu-svg .boat-float:nth-of-type(1) .boat-sail { transition-delay: 0s; }
  .illu-svg .boat-float:nth-of-type(2) .boat-sail { transition-delay: .12s; }
  .illu-svg .boat-float:nth-of-type(3) .boat-sail { transition-delay: .24s; }
  .illu-svg .boat-float:nth-of-type(4) .boat-sail { transition-delay: .36s; }
  .illu-svg .boat-float:nth-of-type(5) .boat-sail { transition-delay: .48s; }
  .illu-svg .boat-float:nth-of-type(6) .boat-sail { transition-delay: .6s; }
}

/* ---------- Scroll-Reveal: Inhalte fahren beim Herunterscrollen ein ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal-left  { transform: translateX(-46px); }
.reveal-right { transform: translateX(46px); }
.reveal-scale { transform: translateY(18px) scale(.94); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Galerie: Bilder blenden beim Laden sanft ein ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gallery-grid img { opacity: 0; transform: scale(1.04); transition: opacity .6s ease, transform .6s ease; }
  .gallery-grid img.is-loaded { opacity: 1; transform: none; }
  .gallery-grid a:hover img.is-loaded { transform: scale(1.07); }
}

/* ---------- Sticky Header: Schatten sobald gescrollt wurde ---------- */
.site-header { transition: box-shadow .25s ease, border-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -14px rgba(20,50,95,.35); border-bottom-color: transparent; }

/* ---------- Buttons: kräftigere Hover-Reaktion ---------- */
.btn { transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .16s ease, color .16s ease; }
.btn-primary:hover { transform: translateY(-4px) scale(1.035); box-shadow: 0 18px 32px -14px rgba(255,215,80,1); }
.hero .btn-ghost:hover, .btn-ghost:hover { transform: translateY(-4px) scale(1.035); }

/* ---------- Reduced motion: alle übrigen Übergänge einfrieren ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}