/**
 * Animationen & Interaktions-Effekte
 */

/* ─── Keyframes ───────────────────────────────────────────── */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(255, 0, 4, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 0, 4, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 4, 0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  90%       { transform: translateX(2px); }
}

@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  65%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes markerDrop {
  0%   { transform: translateY(-20px) scale(0.5); opacity: 0; }
  70%  { transform: translateY(4px) scale(1.1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes availabilityFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Scroll-Einblendungen (#2) ──────────────────────────── */

/* JS fügt .reveal per querySelectorAll hinzu, damit kein-JS-User
   immer Inhalte sieht. .is-visible triggert die Animation. */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffeltes Einblenden innerhalb von Grids */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── CTA-Button Pulse (#3) ──────────────────────────────── */

/* Nur auf den primären CTA-Buttons im Hero/Booking-Bereich */
.btn--primary-lg,
.site-nav__cta .btn--nav-cta {
  animation: pulseRing 2.8s ease-out infinite;
}

/* Nach Hover Puls pausieren – nicht ablenken während Interaktion */
.btn--primary-lg:hover,
.site-nav__cta .btn--nav-cta:hover {
  animation: none;
}

/* ─── Mobile Nav: Staggered Links (#6) ───────────────────── */

/* JS setzt --stagger-i pro <li>. Panel-Öffnung triggert Animation. */
.site-nav__mobile-panel.is-open .site-nav__menu li {
  animation: fadeInUp 0.4s ease both;
  animation-delay: calc(var(--stagger-i, 0) * 80ms);
}

.site-nav__mobile-panel.is-open .site-nav__mobile-extra {
  animation: fadeInUp 0.4s ease both;
  animation-delay: calc(var(--stagger-count, 4) * 80ms + 40ms);
}

/* ─── Ausgebucht-Shake (#9) ──────────────────────────────── */
/* Nur die Inhaltselemente shaken, nicht die Zeile selbst —
   sonst wandert das ::before (Hintergrund-Fläche) mit und
   die Cream-Fläche verschwindet seitlich. */

.tour-row--ausgebucht.is-shaking > * {
  animation: shake 0.5s ease;
}

.tour-row--ausgebucht.is-shaking::before {
  background-color: var(--color-cream) !important;
}

/* ─── Warenkorb-Bump (#10) ───────────────────────────────── */

.cart-indicator.is-bumping svg,
.cart-indicator.is-bumping .cart-indicator__count {
  animation: bump 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ─── Buchungsformular: Verfügbarkeit (#5) ───────────────── */

.booking-availability {
  font-size: var(--text-sm);
  /* Erscheint innerhalb der cremefarbenen .booking-form-card (#FFFBBB) –
     zuvor stand hier var(--color-cream), also praktisch Cream auf Cream
     (unlesbar/wirkte gelb). Normaler Kartentext ist schwarz. */
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  min-height: 1.4em;
}

.booking-availability.is-visible {
  opacity: 1;
  animation: availabilityFadeIn 0.35s ease;
}

.booking-availability--full {
  /* Gleicher Grund wie oben: das ursprüngliche helle Pink (#ffaaaa) war auf
     der cremefarbenen Karte kaum lesbar – stattdessen das Marken-Rot. */
  color: var(--color-red);
}

/* ─── Map: Marker Drop-In (#8) ───────────────────────────── */
/* Klasse wird per JS erst gesetzt wenn Karte in den Viewport scrollt */

.saf-marker-drop {
  animation: markerDrop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--marker-i, 0) * 120ms);
}

/* ─── Tour-Row: Action-Button (#1) ────────────────────────── */
/* Auf Kundenwunsch immer sichtbar statt (wie ursprünglich) erst
   beim Hover einzublenden – der Button soll auch ohne Maus-Hover
   (z.B. Touch-Geräte, aber auch auf Desktops) direkt erkennbar sein. */

/* ─── Button: Sliding Background Reveal (Hover) ─────────── */
/* Gradient-Position-Trick: linke Hälfte = Hover-Farbe, rechte
   Hälfte = Default-Farbe. background-position verschiebt das
   Gradient auf Hover nach links → Farbe schiebt sich rein.
   Kein JS, kein Pseudo-Element – rein CSS. */

/* Transition für background-position auf alle Buttons ausweiten */
.btn {
  transition:
    background-color var(--transition-fast),
    background-position 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

/* Primär (rot → dunkelrot von links) */
.btn--primary,
.btn--primary-lg {
  background-image: linear-gradient(to right, #b80003 50%, var(--color-red) 50%);
  background-size: 201% 100%;
  background-position: right center;
}
.btn--primary:hover,
.btn--primary-lg:hover {
  background-color: var(--color-red);
  background-position: left center;
  border-color: #b80003;
}

/* Nav-CTA (rot → dunkelrot) */
.btn--nav-cta {
  background-image: linear-gradient(to right, #b80003 50%, var(--color-red) 50%);
  background-size: 201% 100%;
  background-position: right center;
}
.btn--nav-cta:hover {
  background-color: var(--color-red);
  background-position: left center;
}

/* Outline dunkel: Schwarz füllt von links */
.btn--outline {
  background-image: linear-gradient(to right, var(--color-text) 50%, transparent 50%);
  background-size: 201% 100%;
  background-position: right center;
}
.btn--outline:hover {
  background-color: transparent;
  background-position: left center;
  color: var(--color-cream);
}

/* Outline auf rotem Hintergrund / outline-light: Cream füllt von links */
.btn--outline-light,
.bg-red .btn--outline {
  background-image: linear-gradient(to right, var(--color-cream) 50%, transparent 50%);
  background-size: 201% 100%;
  background-position: right center;
}
.btn--outline-light:hover,
.bg-red .btn--outline:hover {
  background-color: transparent;
  background-position: left center;
  color: var(--color-red);
}

/* Blog-Detail (bg-white / kosmos-detail): Schwarz füllt von links, weisse Schrift */
.bg-white .btn--outline:hover,
.kosmos-detail .btn--outline:hover {
  color: #fff;
}

/* Weisse Karten (card--boxed) auf rotem Hintergrund: Schwarz füllt von links,
   nicht Cream — Karte hat eigenen hellen Hintergrund, daher dunkles Fill. */
.card--boxed .card__footer .btn--outline,
.card .card__footer .btn--outline {
  background-image: linear-gradient(to right, var(--color-text) 50%, transparent 50%);
  background-size: 201% 100%;
  background-position: right center;
  color: var(--color-text);
  border-color: var(--color-text);
}
.card--boxed .card__footer .btn--outline:hover,
.card .card__footer .btn--outline:hover {
  background-color: transparent;
  background-position: left center;
  color: #fff;
}

/* Outline Rot (Rot füllt von links) */
.btn--outline-red {
  background-image: linear-gradient(to right, var(--color-red) 50%, transparent 50%);
  background-size: 201% 100%;
  background-position: right center;
}
.btn--outline-red:hover {
  background-color: transparent;
  background-position: left center;
  color: var(--color-cream);
}

/* Anmelden-Button (Grün → Dunkelgrün) – gilt auch für die "frei"-Pills
   in den Touren-/Kochen-Terminlisten (.btn--status), seit die ganze
   Zeile ein Link zum Buchungsformular ist und sich gleich verhalten soll
   wie "jetzt anmelden" auf der Startseite. */
.btn--anmelden {
  background-image: linear-gradient(to right, #00a800 50%, var(--color-green) 50%);
  background-size: 201% 100%;
  background-position: right center;
}
.btn--anmelden:hover {
  background-color: transparent;
  background-position: left center;
  border-color: #00a800;
}

/* ─── Ken Burns – Galerie & Hero Slider ─────────────────── */
/* Zwei Richtungsvarianten für ungerade/gerade Slides – wirkt
   abwechslungsreicher ohne JS-Logik. Effekt startet neu sobald
   .is-active gesetzt wird (CSS-Animation reset durch Selektor-Wechsel). */

@keyframes kenBurnsA {
  from { transform: scale(1)    translate(0,     0);    }
  to   { transform: scale(1.07) translate(-1.5%, 0.8%); }
}

@keyframes kenBurnsB {
  from { transform: scale(1)    translate(0,    0);    }
  to   { transform: scale(1.07) translate(1.5%, -0.8%); }
}

.hero-slider__slide.is-active img,
.gallery-slider__slide.is-active .gallery-slider__img-clip img {
  animation: kenBurnsA 8s ease-in-out forwards;
  will-change: transform;
}

.hero-slider__slide:nth-child(even).is-active img,
.gallery-slider__slide:nth-child(even).is-active .gallery-slider__img-clip img {
  animation-name: kenBurnsB;
}

/* ─── Reduced Motion ─────────────────────────────────────── */

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

  .btn--primary-lg,
  .site-nav__cta .btn--nav-cta {
    animation: none;
  }

  .site-nav__mobile-panel.is-open .site-nav__menu li,
  .site-nav__mobile-panel.is-open .site-nav__mobile-extra {
    animation: none;
  }

  .saf-marker-drop {
    animation: none;
  }

  .hero-slider__slide.is-active img,
  .gallery-slider__slide.is-active .gallery-slider__img-clip img {
    animation: none;
  }
}