/* ==========================================================================
   SCROLL-ANIMATIONEN
   Nur transform/opacity animieren (GPU-beschleunigt, kein Layout-Reflow).
   Wird per IntersectionObserver getriggert (siehe assets/js/reveal.js),
   nicht per Scroll-Event-Polling.

   Ausnahme: einzelne, isolierte Badges, die nicht scroll-getriggert sind
   und selten wechseln (z.B. .hero__elevator-tag, s. hero.css), dürfen width
   animieren, wenn eine transform-basierte Lösung (z.B. ein zusätzlicher
   Hintergrund-Layer mit scaleX) unverhältnismäßig viel Zusatzkomplexität
   für den Effekt bräuchte — der Reflow bleibt dort auf das eine Element
   beschränkt und beeinflusst kein umliegendes Layout.
   ========================================================================== */

/* Up-Effekt mit Opacity-Fade: Elemente starten unsichtbar/verschoben und
   blenden beim Reveal gleichzeitig ein und in ihre Endposition. Klassenname
   bleibt "fade-in-up", da er in allen Section-Snippets im Markup steht. */
.fade-in-up {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
  /* will-change wird von reveal.js nur kurz vor der Animation gesetzt
     und danach wieder entfernt (siehe JS), nicht dauerhaft hier. */
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gestaffelte Kindelemente (z.B. Service-Rows, Slider-Cards) */
.fade-in-up[data-delay="1"] {
  transition-delay: 80ms;
}
.fade-in-up[data-delay="2"] {
  transition-delay: 160ms;
}
.fade-in-up[data-delay="3"] {
  transition-delay: 240ms;
}

/* Barrierefreiheit: Bewegungsreduktion respektieren.
   Inhalte stehen sofort an ihrer Endposition, keine Transform-Animation. */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Custom-Cursor-Platzhalter (nur falls später aktiviert):
   ausschließlich transform: translate3d für die Positionierung nutzen,
   niemals top/left, und nur bei Pointer-Geräten mit Feinsteuerung. */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-font-dark);
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  will-change: transform;
}

.custom-cursor.is-active {
  opacity: 1;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .custom-cursor {
    display: none;
  }
}