:root { --vh: 1vh; }
/* ===========================
   Global Page Fade-In
   =========================== */
html {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}

html.page-loaded {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Reveal (scoped & utility-based) */
.reveal{
  --tx: 0;          /* Start-Offset X */
  --ty: 24px;       /* Start-Offset Y */
  --dur: .6s;       /* Dauer */
  --ease: ease;     /* Timing */
  --delay: 0s;      /* Verzögerung */

  opacity: 0;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition:
    opacity var(--dur) var(--ease) var(--delay),
    transform var(--dur) var(--ease) var(--delay);
  will-change: opacity, transform;
}
.reveal.in-view{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* Richtungen */
.reveal-up    { --tx: 0;     --ty: 24px; }
.reveal-down  { --tx: 0;     --ty: -24px; }
.reveal-left  { --tx: 24px;  --ty: 0; }
.reveal-right { --tx: -24px; --ty: 0; }

/* Geschwindigkeiten (optional) */
.reveal-fast  { --dur:.4s; }
.reveal-slow  { --dur:.9s; }

/* Delays (Utilities) */
.reveal-delay-1 { --delay:.05s; }
.reveal-delay-2 { --delay:.30s; }
.reveal-delay-3 { --delay:.45s; }
.reveal-delay-4 { --delay:.60s; }
.reveal-delay-5 { --delay:.75s; }

/* Stagger-Container: verteilt Delays auf direkte Kinder mit .reveal */
.reveal-stagger > .reveal                 { --delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2)    { --delay: 120ms; }
.reveal-stagger > .reveal:nth-child(3)    { --delay: 240ms; }
.reveal-stagger > .reveal:nth-child(4)    { --delay: 360ms; }
.reveal-stagger > .reveal:nth-child(5)    { --delay: 480ms; }
.reveal-stagger > .reveal:nth-child(6)    { --delay: 600ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}