/* ── Bold-Kontrast Motion-Fundament ─────────────────────────────
   Geteilt von Hub, Kiến Tạo, Akademie, KI (Kopie: website-vietnova/).
   Versteckt-Zustände gelten nur mit html.js — ohne JS bleibt alles sichtbar. */

html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
html.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
html.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .06s; }
html.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
html.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .18s; }
html.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
html.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .30s; }
html.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .36s; }
html.js .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: .42s; }
html.js .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: .48s; }

/* ── Hero-Art (KI-Bilder): Entrance + Schwebe-Loop + Parallax ──
   Struktur: [data-parallax]-Wrapper → .hero-art (Entrance) → img.hero-art-float */
.hero-art-wrap { position: relative; }
.hero-art img, img.hero-art-float { width: 100%; height: auto; }
html.js .hero-art {
  opacity: 0;
  transform: translateY(48px) scale(.96);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.16,.8,.28,1.12);
}
html.js .hero-art.is-visible { opacity: 1; transform: none; }
.hero-art-float { animation: heroFloat 6s ease-in-out 1.4s infinite alternate; }
@keyframes heroFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}

/* Staub-Puff (einmalig nach dem Entrance, z. B. Kran-Motiv) */
.hero-art-dust { position: absolute; left: 0; right: 0; bottom: 6%; height: 20%; pointer-events: none; }
.hero-art-dust i {
  position: absolute; bottom: 0;
  width: 26%; height: 55%;
  border-radius: 50%;
  background: rgba(168, 136, 104, .38);
  filter: blur(14px);
  opacity: 0;
  transform: scale(.3);
  animation: dustPuff 1.6s ease-out .85s 1 forwards;
}
.hero-art-dust i:nth-child(1) { left: 18%; animation-delay: .85s; }
.hero-art-dust i:nth-child(2) { left: 38%; width: 32%; height: 70%; animation-delay: .95s; }
.hero-art-dust i:nth-child(3) { left: 60%; animation-delay: 1.05s; }
@keyframes dustPuff {
  0%   { opacity: 0;   transform: scale(.3) translateY(0); }
  25%  { opacity: .65; }
  100% { opacity: 0;   transform: scale(1.9) translate(var(--dust-x, 0), -30%); }
}
.hero-art-dust i:nth-child(1) { --dust-x: -30%; }
.hero-art-dust i:nth-child(3) { --dust-x: 30%; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .hero-art { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-art-float { animation: none !important; }
  .hero-art-dust { display: none; }
  /* Springt alle Keyframe-Animationen (Signatur-SVGs etc.) sofort an ihr Ende
     (fill-mode forwards ⇒ Endzustand = fertig gezeichnet). */
  * {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}