/* ==========================================================================
   VITA UMZÜGE – Scroll- und Ladeanimationen
   Sichtbarkeit wird per IntersectionObserver gesteuert (.is-in).
   Grundsatz: dezent, ruhig, hochwertig – niemals verspielt.
   ========================================================================== */

/* --- Basis-Reveal: sanft von unten ------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Varianten */
.js [data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="scale"] { transform: scale(.965); }

/* --- Gestaffelte Kinder ------------------------------------------------- */
.js [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: .00s; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: .09s; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: .18s; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: .27s; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: .36s; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: .45s; }

/* --- Bildvorhang: das Bild wird freigelegt ------------------------------ */
[data-img-reveal] { position: relative; overflow: hidden; }
.js [data-img-reveal]::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background: var(--bg, var(--black));
  transform-origin: right;
  transition: transform 1.05s var(--ease);
}
.js [data-img-reveal].is-in::after { transform: scaleX(0); }
.js [data-img-reveal] img { transform: scale(1.09); transition: transform 1.5s var(--ease); }
.js [data-img-reveal].is-in img { transform: scale(1); }

/* --- Goldene Linie, die einläuft --------------------------------------- */
.js [data-line-grow] { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); }
.js [data-line-grow].is-in { transform: scaleX(1); }

/* --- Hero ---------------------------------------------------------------
   Der Hero wird BEWUSST nicht eingeblendet: sein gesamter Inhalt ist
   sofort beim Laden sichtbar. Nur der Hintergrund bewegt sich (Diaschau
   mit Zoomfahrt, siehe 04-sections.css).
   ---------------------------------------------------------------------- */

/* --- Zähler ------------------------------------------------------------ */
.counter { font-variant-numeric: tabular-nums; }

/* --- Parallaxe --------------------------------------------------------- */
[data-parallax] { will-change: transform; }

/* --- Bewegung reduzieren: alles sofort sichtbar und ruhig ------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal], [data-stagger] > * {
    opacity: 1 !important; transform: none !important;
  }
  /* Diaschau anhalten: nur das erste Bild, kein Zoom */
  .hero__slide img { animation: none !important; transform: none !important; }
  [data-img-reveal]::after { display: none; }
  [data-img-reveal] img { transform: none !important; }
  [data-line-grow] { transform: none !important; }
  [data-parallax] { transform: none !important; }
  .hero__scroll-line::after, .area__pulse { animation: none; opacity: .5; }
}