/* =================================================================
   UXOVIA · MOTION
   Scroll-Reveals und Count-ups — das Bewegungsvokabular. Gehoert zu
   motion.js, das .is-inview setzt und die Zahlen hochzaehlt.
   Laufleisten und Fortschrittsbalken standen hier bis 21.08.2026, siehe unten.

   Progressive enhancement: every "initial hidden" reveal state is
   gated behind  html.motion-ready  — a class motion.js sets only when
   the runtime is present AND the user hasn't asked for reduced motion.
   Without the runtime (or with reduced-motion) nothing is ever hidden.
   ================================================================= */

/* Die Designsystem-Laufleiste .marquee samt .marquee-track und
   .marquee-pill ist am 21.08.2026 entfallen. Die Startseite faehrt eine
   eigene Fassung .ux-marquee, definiert im style-Block von index.html und
   angesteuert von assets/startseite/app.js. Zwei Laufleisten nebeneinander,
   von denen eine nie im Markup stand. Vorrat: /root/design-system-uxovia-2026. */

/* ─────────────────── Scroll reveal (JS adds .is-inview) ─────────────────── */
html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.motion-ready [data-reveal="fade"]  { transform: none; }
html.motion-ready [data-reveal="scale"] { transform: translateY(24px) scale(0.96); }
html.motion-ready [data-reveal="left"]  { transform: translateX(-32px); }
html.motion-ready [data-reveal="right"] { transform: translateX(32px); }
html.motion-ready [data-reveal].is-inview { opacity: 1; transform: none; }
/* Auf schmalen Schirmen kein seitlicher Versatz: er ragt sonst aus dem
   Viewport und erzeugt eine waagerechte Bildlaufleiste, bis die Sektion
   einmal sichtbar war. Der sanfte Übergang bleibt — nur vertikal.

   Die Grenze liegt bei 880px und nicht bei 760px, weil .split erst dort
   einspaltig wird (components.css). Zwischen 761 und 880px stand eine
   Spalte noch neben der anderen und wurde zusaetzlich um 32px nach rechts
   geschoben: das ergab bei 768px auf sechs Seiten 9px Seitwaertsscrollen,
   bis der Abschnitt einmal im Bild war. Gemessen am 21.08.2026. */
@media (max-width: 880px) {
  html.motion-ready [data-reveal="left"],
  html.motion-ready [data-reveal="right"] { transform: translateY(20px); }
}

/* ─────────────────── Count-up (JS rewrites the text) ─────────────────── */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* Die Fortschrittsbalken .skill-bar und .skill-bar-fill sind am 21.08.2026
   entfallen. Sie kamen aus dem Designsystem, standen aber in keiner Seite.
   Wer sie braucht, holt sie aus /root/design-system-uxovia-2026. */

/* ─────────────────── Reduced motion — land everything in end-state ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}