/* ============================================================
   WEBAMBOSS — Animationen & Scroll-Reveals
   Respektiert prefers-reduced-motion (via base.css global rule)
   ============================================================ */

/* ---- Scroll-Reveal Ausgangszustand ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Kinder */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: none; }

/* ---- Hero Einblende-Effekt ---- */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  animation: heroFadeUp 0.7s ease forwards;
}

.hero-animate--delay-1 { animation-delay: 0.15s; opacity: 0; }
.hero-animate--delay-2 { animation-delay: 0.3s;  opacity: 0; }
.hero-animate--delay-3 { animation-delay: 0.45s; opacity: 0; }
.hero-animate--delay-4 { animation-delay: 0.6s;  opacity: 0; }

/* ---- Akzent-Ring Puls (Hero) ---- */
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 155, 224, 0.25); }
  70%  { box-shadow: 0 0 0 20px rgba(79, 155, 224, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 155, 224, 0); }
}

.accent-pulse {
  animation: ringPulse 2.8s ease infinite;
}

/* ---- Seitenübergang beim Öffnen einer Referenzseite ---- */
@keyframes pageExit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.025); }
}

body.is-page-exiting {
  animation: pageExit 0.36s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}