/* motion-kit v1.0 — WebSelling Demo-Motion (Mechanik, nicht Optik)
 * ─────────────────────────────────────────────────────────────────
 * KOPIEREN pro Demo (wie fonts.css / _base.css), dann in index.html:
 *   <link rel="stylesheet" href="motion.css">
 *   <script defer src="motion.js"></script>
 *
 * REGEL (Council 2026-06-15, "Kipp-Punkt"): Diese Datei enthaelt NUR
 * Bewegungs-Mechanik + Default-Werte. Damit Demos NICHT gleich aussehen
 * (Template-Verbot, feedback_keine_templates), MUSST du die --motion-*
 * Werte PRO Demo in style.css ueberschreiben: Tempo, Distanz, Easing,
 * und WELCHE Elemente data-reveal bekommen. Geteilte Mechanik ist ok,
 * geteilte Optik nicht.
 * ───────────────────────────────────────────────────────────────── */

:root {
  /* ↓↓ In der Demo-style.css ueberschreiben — sonst fuehlen sich alle Demos gleich an. */
  --motion-duration: 220ms;            /* UI-Transitions < 300ms */
  --motion-duration-reveal: 480ms;     /* Entrance darf etwas laenger */
  --motion-distance: 16px;             /* translateY-Start fuer Reveals */
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);        /* ease-out-quint */
  --motion-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out-expo */
  --motion-stagger: 70ms;              /* Abstand bei gestaffelten Reveals */
  --motion-hover-lift: -3px;           /* Hover-Anhebung */
}

/* ── Scroll-Reveal-Mechanik ──
 * motion.js setzt .is-revealed, sobald das Element in den Viewport kommt.
 * Anwenden: <div data-reveal> … </div>
 * Stagger: inline --i setzen → <li data-reveal style="--i:2"> */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-distance));
  transition: opacity var(--motion-duration-reveal) var(--motion-ease-reveal),
              transform var(--motion-duration-reveal) var(--motion-ease-reveal);
}
[data-reveal]:not(.is-revealed) {
  /* will-change nur solange noch nicht animiert → schont GPU-Speicher auf Mid-Range-Handys */
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-reveal][style*="--i"] {
  transition-delay: calc(var(--i) * var(--motion-stagger));
}

/* ── Hover-Lift-Mechanik (Optik via --motion-* pro Demo) ──
 * Anwenden: class="motion-hover" auf Cards/Buttons. */
.motion-hover {
  transition: transform var(--motion-duration) var(--motion-ease);
}
@media (hover: hover) {
  .motion-hover:hover {
    transform: translateY(var(--motion-hover-lift));
  }
}

/* ── A11y-Pflicht: Bewegung respektieren ──
 * NICHT entfernen — check-demo blockt Motion-Kit ohne diesen Block. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-hover,
  .motion-hover:hover {
    transition: none;
    transform: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}