/* ============================================================
   Motion Design System — Agora
   Geladen nach mobile.css (Override-Cascade, gleiches Muster).
   Dieses File ist das zentrale Token- und Klassen-System.
   Konkrete Anwendungen auf Sektionen erfolgen in WP-B bis WP-E.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Easing */
  --ease:      cubic-bezier(.22,.61,.36,1);   /* Standard-UI */
  --ease-out:  cubic-bezier(.16,1,.3,1);      /* Reveals/Entrances (expo-out) */
  --ease-snap: cubic-bezier(.2,.8,.2,1);      /* Mock-Stack-Interaktion — reserviert für WP-B */

  /* Durations */
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 450ms;
  --dur-4: 700ms;
  --dur-5: 950ms;

  /* Geometrie */
  --rise: 20px;
  --stagger: 70ms;

  /* Alias-Korrektur: about/faq/etc. nutzen --easing-out inkonsistent.
     motion.css normalisiert auf die neuen Tokens. */
  --easing:     var(--ease);
  --easing-out: var(--ease-out);
}

/* Mobile: Reveal-Distanzen reduzieren, damit nichts horizontal/vertikal überläuft */
@media (max-width: 760px) {
  :root { --rise: 14px; }
}

/* ── Generische Motion-Klassen ───────────────────────────── */
/*
   Pre-State ist AUSSCHLIESSLICH aktiv wenn html.motion-ready gesetzt ist.
   Ohne JS bleibt alles sichtbar (Fail-open).
   .in wird von motion.js via IntersectionObserver gesetzt.
*/

/* Basis: unsichtbar, aber kein transform (Standard-Fade) */
html.motion-ready .m-reveal {
  opacity: 0;
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

/* Modifier: Y-Verschiebung nach oben */
html.motion-ready .m-reveal.m-rise {
  transform: translateY(var(--rise));
}

/* Modifier: nur Opacity */
html.motion-ready .m-reveal.m-fade {
  transform: none;
}

/* Modifier: leichte Skalierung */
html.motion-ready .m-reveal.m-scale {
  transform: scale(.97);
}

/* Sichtbar-Zustand */
html.motion-ready .m-reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Stagger-Support ─────────────────────────────────────── */
/*
   motion.js setzt --m-i als Custom Property pro Kind-Element.
   Der Container bekommt [data-reveal-group], die Kinder erhalten
   automatisch gestaffelte transition-delay Werte.
*/
html.motion-ready [data-reveal-group] > * {
  transition-delay: calc(var(--m-i, 0) * var(--stagger));
}

/* ── Kompatibilitäts-Layer für bestehende Inline-Definitionen ── */
/*
   Die Seiten nutzen bereits .reveal/.in (about, faq, index) und
   .pop/.in (index). Erhöhte Spezifität via html.motion-ready
   harmonisiert die Geometrie — Inline-Definitionen bleiben erhalten
   (Entfernung erfolgt in späteren WPs).
*/

/* .reveal-Harmonisierung: gleiche Geometrie wie .m-reveal.m-rise */
html.motion-ready .reveal {
  opacity: 0;
  transform: translateY(var(--rise));
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}
html.motion-ready .reveal.in {
  opacity: 1;
  transform: none;
}

/* .pop: KEIN Override — index.html hat kontext-spezifische .pop-Geometrien
   (.price-grid .pop, .demo-icons .pop) mit eigenem popIO-Stagger. Ein
   genereller Override würde deren Choreografie zerstören (Review C-1).
   Tuning der .pop-Werte erfolgt direkt in index.html (WP-C). */

/* ── reduced-motion: gezielter Kill, kein globaler Switch ─── */
/*
   Dekorative Entrances werden sofort sichtbar.
   Funktionale Transitions (Accordion max-height, Nav-Backdrop,
   Focus-Ring, Gate-Animation) bleiben bewusst UNANGETASTET.
*/
@media (prefers-reduced-motion: reduce) {
  html.motion-ready .m-reveal,
  html.motion-ready .reveal,
  html.motion-ready .pop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── @supports: View-Transition-Timeline (WP-B/D Vorbereitung) ── */
/*
   Konkrete Parallax-Anwendungen kommen in WP-B und WP-D.
   Dieser Block dokumentiert den geplanten Einstiegspunkt.
*/
@supports (animation-timeline: scroll()) {
  /*
    .m-parallax: Vorlage für scroll-getriebene Parallax-Bewegungen.
    Wird in WP-B/D mit animation-timeline: view() und
    @keyframes konkretisiert. Hier als Marker erhalten.
  */
  /* .m-parallax { } */
}