/* ==========================================================================
   A&L SERVICE & TECHNOLOGY — ANIMATIONEN
   animations.css
   Ausschließlich dezente Effekte: Fade-/Text-/Image-Reveal beim Scrollen,
   animierte Zahlen, Hover-Feinheiten. Steigert Wertigkeit, ohne Ablenkung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reveal-Grundzustand — Elemente mit [data-reveal] werden per JS sichtbar
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal-Varianten */
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="up"]    { transform: translateY(34px); }
.js [data-reveal="right"] { transform: translateX(-34px); }
.js [data-reveal="left"]  { transform: translateX(34px); }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal="up"].is-revealed,
.js [data-reveal="right"].is-revealed,
.js [data-reveal="left"].is-revealed { transform: none; }
.js [data-reveal="scale"].is-revealed { transform: scale(1); }

/* Gestaffelte Kinder (Karten-Grids) */
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.js [data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-group].is-revealed > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-group].is-revealed > *:nth-child(8) { transition-delay: 560ms; }

/* --------------------------------------------------------------------------
   Text-Reveal (zeilenweises, dezentes Aufblenden)
   -------------------------------------------------------------------------- */
.reveal-text { display: block; overflow: hidden; }
.js .reveal-text > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.reveal-text.is-revealed > span { transform: translateY(0); }
.reveal-text:nth-child(2) > span { transition-delay: 90ms; }
.reveal-text:nth-child(3) > span { transition-delay: 180ms; }

/* --------------------------------------------------------------------------
   Hero-Eingangsanimation (beim Laden)
   -------------------------------------------------------------------------- */
.js .hero__content > * { opacity: 0; transform: translateY(26px); }
.hero.is-ready .hero__content > * {
  animation: heroIn var(--dur-slow) var(--ease-out) forwards;
}
.hero.is-ready .hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero.is-ready .hero__content > *:nth-child(2) { animation-delay: 0.18s; }
.hero.is-ready .hero__content > *:nth-child(3) { animation-delay: 0.31s; }
.hero.is-ready .hero__content > *:nth-child(4) { animation-delay: 0.44s; }
.hero.is-ready .hero__stats { opacity: 0; animation: heroIn var(--dur-slow) var(--ease-out) 0.6s forwards; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero-Bild langsamer, ruhiger Zoom (Ken-Burns, sehr dezent) */
.hero__media img {
  transform: scale(1.06);
  transition: transform 8s var(--ease-out);
}
.hero.is-ready .hero__media img { transform: scale(1); }

/* --------------------------------------------------------------------------
   Animierte Zahlen (Counter)
   -------------------------------------------------------------------------- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Dezente Parallax-Ebenen (per JS gesteuert, hier nur GPU-Hint)
   -------------------------------------------------------------------------- */
[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   Ladeindikator / Seiten-Progress (dünne Fortschrittslinie oben)
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--c-accent);
  z-index: 2000;
  transition: width 80ms linear;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Dezenter Link-Unterstrich-Effekt (Text-Links in Fließtext-Menüs)
   -------------------------------------------------------------------------- */
.u-underline {
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--dur) var(--ease-out);
  padding-bottom: 2px;
}
.u-underline:hover { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   Bild-Reveal (Vorhang-Effekt) — dezent
   -------------------------------------------------------------------------- */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal img { transform: scale(1.08); transition: transform 1.2s var(--ease-out); }
.img-reveal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-accent);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.9s var(--ease-out);
}
.img-reveal.is-revealed img { transform: scale(1); }
.img-reveal.is-revealed::after { transform: scaleX(0); }

/* Bewegung reduzieren: alles sofort sichtbar, keine Transformationen */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > *,
  .reveal-text > span,
  .hero__content > *,
  .hero__stats,
  .img-reveal img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .img-reveal::after { display: none; }
  .topbar__badge .dot { animation: none; }
}