/* motion.css - komplett in prefers-reduced-motion: no-preference gekapselt.
   Animiert werden ausschliesslich transform/translate, opacity, filter, clip-path. */

@media (prefers-reduced-motion: no-preference) {
  /* Seitenuebergaenge zwischen den Dokumenten */
  @view-transition { navigation: auto; }
  .site-header .site-logo { view-transition-name: logo; }
  h1 { view-transition-name: page-title; }
  main { view-transition-name: main; }

  /* Micro-Feedback: Anhebung, :active drueckt physisch */
  .button,
  .icon-button,
  .filter-chip {
    transition: translate var(--dur-micro) var(--ease-spring);
  }
  .button:hover { translate: 0 -1px; }
  .button:active { translate: 0 1px; }

  a.card, .bento__tile {
    transition: translate var(--dur-standard) var(--ease-out-expo);
  }
  a.card:hover, .bento__tile:hover { translate: 0 -3px; }
  a.card:active, .bento__tile:active { translate: 0 -1px; }

  .skip-link { transition: translate var(--dur-standard) var(--ease-out-expo); }

  /* Dropdown-Einblendung: Zustandswechsel sichtbar machen */
  .nav-sub.is-open { animation: nav-in var(--dur-micro) var(--ease-out-expo); }
  @keyframes nav-in {
    from { opacity: 0; translate: 0 -4px; }
    to { opacity: 1; translate: 0 0; }
  }

  /* Dialog: ruhiges Einblenden, Fokusfalle bleibt nativ */
  .nav-dialog[open] { animation: dialog-in var(--dur-standard) var(--ease-out-expo); }
  @keyframes dialog-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Stepper: Position physisch nachfuehren */
  html.js .stepper__track { scroll-behavior: smooth; }

  /* Reveal: einmalig, gestaffelt ueber --index.
     Startzustand nur unter html.js, ohne JS ist alles sofort sichtbar. */
  html.js .reveal {
    opacity: 0;
    translate: 0 var(--space-4);
    transition: opacity var(--dur-reveal) var(--ease-out-expo),
      translate var(--dur-reveal) var(--ease-out-expo);
    transition-delay: calc(var(--index, 0) * 60ms);
  }
  html.js .reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
  }

  /* Accordion-Oeffnung sanft nachziehen */
  .accordion details[open] > div {
    animation: acc-in var(--dur-standard) var(--ease-out-expo);
  }
  @keyframes acc-in {
    from { opacity: 0; translate: 0 calc(-1 * var(--space-2)); }
    to { opacity: 1; translate: 0 0; }
  }
}

/* Harter Override: unter reduce bleibt hoechstens ein Farbwechsel unter 100ms */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}