/*
 * Bewegungsschicht fuer jenius (Record 005).
 *
 * Grundregeln, die in dieser Datei nicht gebrochen werden duerfen:
 *   1. Ohne JavaScript und ohne Animation sind alle Inhalte sichtbar.
 *      Verborgene Ausgangszustaende gelten nur unter `html.js` und nur
 *      bei `prefers-reduced-motion: no-preference`.
 *   2. Animiert werden ausschliesslich `opacity`, `transform` und Farben.
 *   3. Es gibt eine Easing-Kurve und drei Dauern (siehe tokens.css).
 *   4. Jede Bewegung laeuft einmal, nichts bewegt sich dauerhaft.
 */

/* ---- Keyframes ---- */

@keyframes motion-rise {
  from {
    opacity: 0;
    transform: translateY(var(--motion-distance-medium));
  }
}

@keyframes motion-fade {
  from {
    opacity: 0;
  }
}

/* Portrait: nur ein Hauch Skalierung, kein Zoom-Effekt. */
@keyframes motion-portrait {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

/* Markenelement: die Linie wird von links gezogen. */
@keyframes motion-line {
  from {
    transform: scaleX(0);
  }
}

/* Markenelement: der Marker-Strich erscheint nach der Ueberschrift. */
@keyframes motion-mark {
  from {
    text-decoration-color: transparent;
  }
}

@keyframes motion-answer {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--motion-distance-small)));
  }
}

/* ---- Eintrittsanimationen (nur wenn Bewegung erwuenscht ist) ---- */

@media (prefers-reduced-motion: no-preference) {
  /*
   * Hero: die Headline ist zuerst da, alles Weitere folgt in kleinen
   * Schritten. Gesamtdauer inklusive Verzoegerung unter 800 ms.
   */
  .motion-hero-1,
  .motion-hero-2,
  .motion-hero-3,
  .motion-hero-4,
  .motion-hero-5 {
    animation: motion-rise var(--motion-duration-slow) var(--motion-ease) both;
  }

  .motion-hero-1 {
    animation-delay: 0ms;
  }

  .motion-hero-2 {
    animation-delay: 70ms;
  }

  .motion-hero-3 {
    animation-delay: 140ms;
  }

  .motion-hero-4 {
    animation-delay: 200ms;
  }

  .motion-hero-5 {
    animation-delay: 260ms;
  }

  .motion-portrait {
    animation: motion-portrait 650ms var(--motion-ease) 120ms both;
  }

  /* Marker-Strich im Kerngbegriff: erscheint, wenn der Satz steht. */
  .mark {
    animation: motion-mark var(--motion-duration-medium) var(--motion-ease)
      320ms both;
  }

  /* Akzentlinie ueber kleinen Labels (Eyebrow) wird gezogen. */
  .eyebrow::before {
    animation: motion-line var(--motion-duration-slow) var(--motion-ease) both;
  }

  /*
   * Scroll-Eintritt: wird von IntersectionObserver ueber `.is-revealed`
   * ausgeloest, einmal pro Element. Ohne JS greift die Regel nicht,
   * weil `html.js` fehlt.
   */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--motion-distance-medium));
    transition:
      opacity var(--motion-duration-slow) var(--motion-ease),
      transform var(--motion-duration-slow) var(--motion-ease);
    transition-delay: min(
      calc(var(--reveal-index, 0) * var(--motion-stagger)),
      var(--motion-stagger-max)
    );
  }

  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Registerzeile: erst die Linie, dann die Beschriftung. */
  .js .register[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .register[data-reveal] > * {
    opacity: 0;
    transition: opacity var(--motion-duration-medium) var(--motion-ease) 160ms;
  }

  .js .register[data-reveal]::before {
    transform: scaleX(0);
    transition: transform var(--motion-duration-slow) var(--motion-ease);
  }

  .js .register[data-reveal].is-revealed > * {
    opacity: 1;
  }

  .js .register[data-reveal].is-revealed::before {
    transform: scaleX(1);
  }

  /* FAQ: Antwort blendet ruhig ein. */
  .faq__item[open] .faq__answer {
    animation: motion-answer var(--motion-duration-medium) var(--motion-ease)
      both;
  }

  /* Formularmeldungen erscheinen, statt hart umzuschalten. */
  .contact-form__error:not([hidden]),
  .contact-form__status:not(:empty),
  .contact-form__success:not([hidden]) {
    animation: motion-answer var(--motion-duration-medium) var(--motion-ease)
      both;
  }
}

/*
 * Weiche Hoehenanimation des FAQ-Inhalts, wo der Browser sie ohne
 * Layout-Thrashing beherrscht (progressive Verbesserung).
 */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    :root {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--motion-duration-medium) var(--motion-ease),
        content-visibility var(--motion-duration-medium) var(--motion-ease)
          allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}

/*
 * Reduzierte Bewegung: Endzustaende sofort, keine Uebergaenge, keine
 * Verzoegerungen. Inhalte bleiben vollstaendig sichtbar und bedienbar.
 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}