/* ============================================================
   Reveal-on-Scroll — sanftes, hochwertiges Einblenden
   IntersectionObserver setzt .is-visible — die Animation läuft
   per CSS-Transition mit weicher Easing und optionalem Delay
   (Stagger über --reveal-delay).
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transition:
    opacity 900ms cubic-bezier(.22, .61, .36, 1),
    transform 900ms cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* Default-Variante: leicht von unten einblenden */
[data-reveal="up"],
[data-reveal=""],
[data-reveal] {
  transform: translateY(28px);
}

[data-reveal="left"]   { transform: translateX(-32px); }
[data-reveal="right"]  { transform: translateX(32px); }
[data-reveal="fade"]   { transform: none; }
[data-reveal="scale"]  { transform: scale(.96); }

/* Sichtbar-Zustand */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Hero-Headline-Lines: einzeln versetzt einblenden für ein
   editoriales „Reveal" beim ersten Laden. */
.hero-mark,
.hero h1,
.hero-cta {
  opacity: 0;
  animation: hero-rise 1100ms cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero-mark { animation-delay: 200ms; }
.hero h1   { animation-delay: 380ms; }
.hero-cta  { animation-delay: 720ms; }

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

/* Hero-Bild: dezenter, langsamer Ken-Burns-Zoom — gibt der
   Startseite Bewegung ohne aufdringlich zu sein. */
.hero-bg {
  animation: ken-burns 18s ease-out both;
}
@keyframes ken-burns {
  from { transform: scale(1.08); }
  to   { transform: scale(1);    }
}

/* Section-Übergänge: Eyebrow + h2 leicht nacheinander hochrutschen */
.eyebrow[data-reveal],
.section-title[data-reveal] {
  transform: translateY(20px);
}

/* Reduced-Motion: alles sofort, keine Transitions/Animations */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-mark,
  .hero h1,
  .hero-cta,
  .hero-bg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}