/* ==========================================================================
   hero.css – Effekt für das Titelbild der Startseite
   1. Parallax: Bild bewegt sich beim Scrollen langsamer als der Text
      (Steuerung über js/hero-parallax.js)
   2. Weiße Textbox und Überschriften gleiten sanft herein
   Eingebunden nur auf index.html, de/index.html und en/index.html.
   ========================================================================== */

/* --- 1. Hintergrundbild mit Parallax ------------------------------------- */
.sp-page-builder .page-content .hero-kenburns {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Bild wird statt am Abschnitt selbst im ::before-Element gezeigt,
     damit es animiert werden kann (ersetzt auch das auf iPhone/iPad
     fehlerhafte "background-attachment: fixed") */
  background-image: none !important;
  background-attachment: scroll !important;
}

/* Das Bild ist am oberen Rand ausgerichtet. Beim Scrollen schiebt
   js/hero-parallax.js es über --hero-shift nach unten, aber erst ab dem
   Moment, in dem die Oberkante hinter der Kopfzeile verschwunden ist –
   so entsteht oben nie eine sichtbare Lücke. */
.hero-kenburns::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../images/revslider/uploads/start-summer-2023-04.jpg) 50% 40% / cover no-repeat;
  transform: translate3d(0, var(--hero-shift, 0px), 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* --- 2. Textbox und Überschriften einblenden ---------------------------- */
.hero-box {
  opacity: 0;
  animation: hero-fade-up 1.2s cubic-bezier(.22, .61, .36, 1) .6s forwards;
}

.hero-box h1 {
  opacity: 0;
  animation: hero-fade-up 1s cubic-bezier(.22, .61, .36, 1) 1.1s forwards;
}
.hero-box h1 + h1 {
  animation-delay: 1.6s;              /* zweite Zeile etwas später */
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Rücksicht auf "Bewegung reduzieren" im Betriebssystem -------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-kenburns::before { transform: none; }
  .hero-box,
  .hero-box h1 { animation: none; opacity: 1; }
}