/* ============================================================================
   ronneburg-motion.css
   Motion layer for Falknerei Ronneburg
   
   Vier aufeinander abgestimmte Effekte:
   1. Hero: Ken-Burns (langsamer Zoom + Pan auf Standbild)
   2. Hero: Scroll-Parallax (Bild bleibt, Inhalt scrollt schneller)
   3. Sektionen: Fade + Rise beim Einscrollen (IntersectionObserver)
   4. Mission-Banner: eigener Parallax (tiefere Ebene wirkt ferner)
   
   Prinzip: zurückhaltend. Bewegung dient der Ruhe, nicht der Aufmerksamkeit.
   Dauer lang (6–20s), Amplitude klein, Easing weich.
   ============================================================================ */

/* ---------- 1. Hero Ken-Burns ---------- */
/* Das Bild zoomt 20s langsam von 1.0 → 1.08 und pannt dabei minimal.
   Endlos-Loop über alternate, damit keine harten Sprünge. */

.hero-img {
  animation: kenburns-hero 20s ease-in-out infinite alternate;
  transform-origin: center 55%;
  will-change: transform;
}

@keyframes kenburns-hero {
  0% {
    transform: scale(1.0) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.08) translate3d(-1.5%, -1%, 0);
  }
}

/* ---------- 2. Hero Scroll-Parallax ---------- */
/* Hero-Bild bleibt fest, Text scrollt mit normaler Geschwindigkeit davor weg.
   Erzeugt Tiefe ohne Tricks. */

.hero {
  position: relative;
  overflow: hidden;
}

.hero-img {
  position: absolute;
  inset: 0;
  /* Parallax via transform, nicht via background-attachment: fixed
     (das performt auf Mobile schlecht und ist auf iOS gebrochen) */
}

/* Scroll-Parallax wird in JS via transform: translate3d gesteuert,
   damit Mobile/Safari mitmacht. CSS-only nur Fallback. */

/* ---------- 3. Mission-Banner tiefere Parallax ---------- */
/* Langsamerer Ken-Burns + stärkeres Overlay = Eindruck von "weiter weg" */

.mission-banner-img {
  animation: kenburns-mission 24s ease-in-out infinite alternate-reverse;
  transform-origin: center 60%;
  will-change: transform;
}

@keyframes kenburns-mission {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.06) translate3d(1%, -0.5%, 0);
  }
}

/* ---------- 4. Scroll-Fade für Sektionen ---------- */
/* Jede Sektion bekommt [data-reveal] und blendet beim Einscrollen rein.
   Initial unsichtbar, per IntersectionObserver getriggert. */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Staggered reveal für Karten-Grids: jede Karte eine Spur später */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 800ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }

/* ---------- Reduced Motion Override ---------- */
/* Wer im OS "Animationen reduzieren" aktiviert hat, kriegt keine.
   Barrierefreiheit vor Schönheit. */

@media (prefers-reduced-motion: reduce) {
  .hero-img,
  .mission-banner-img {
    animation: none !important;
    transform: none !important;
  }
  
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}