/* ==========================================================================
   Motion-Basis für Landingpages (Pläne in /plans/001, 003, 006)

   Zwei Kurven, sonst keine. Animiert werden nur transform und opacity,
   Ausnahme ist das Aufklappen der FAQ. Das Skript, das `motion-ready` und
   `is-revealed` setzt, steht in BaseLayout.astro. Ohne JavaScript bleibt
   alles sichtbar, weil die Ausblend-Regel an `html.motion-ready` hängt.

   Verwendung:
   - `data-reveal-group` an einen Raster-Container: die direkten Kinder
     erscheinen beim ersten Sichtkontakt gestaffelt.
   - `data-reveal-trigger` an ein Element: bekommt einmal `is-revealed`,
     die Animation dazu definiert die Komponente selbst.
   ========================================================================== */

:root {
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
   --motion-reveal: 420ms;
   --motion-stagger: 60ms;
}

/* ---------- Gruppen-Auftritt ---------- */

/* Geschlossene Dialoge in einem Raster (z. B. Case-Overlays) nie ausblenden. */
html.motion-ready [data-reveal-group] > :not(.is-revealed):not(dialog) {
   opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
   /* `backwards`: nach dem Auftritt gelten wieder die normalen Styles,
      Hover-Transforms der Karten bleiben intakt. */
   [data-reveal-group] > .is-revealed {
      animation: motionRevealUp var(--motion-reveal) var(--ease-out) backwards;
      animation-delay: calc(var(--reveal-i, 0) * var(--motion-stagger));
   }
}

@media (prefers-reduced-motion: reduce) {
   [data-reveal-group] > .is-revealed {
      animation: motionFade 150ms ease-out backwards;
   }
}

@keyframes motionRevealUp {
   from { opacity: 0; transform: translateY(12px); }
}

@keyframes motionFade {
   from { opacity: 0; }
}

@media print {
   html.motion-ready [data-reveal-group] > * {
      opacity: 1 !important;
      animation: none !important;
   }
}

/* ---------- FAQ: Antworten klappen auf statt zu springen ---------- */

/* style.css schaltet per display: none/block. Hier gleiche Spezifität, später
   geladen. `display: grid` auch im aktiven Zustand, sonst gewinnt dort
   style.css mit display: block. `visibility` hält geschlossene Antworten aus
   dem Screenreader-Baum und der Tab-Reihenfolge. */
.faq-item__answer {
   display: grid;
   grid-template-rows: 0fr;
   padding-top: 0;
   opacity: 0;
   visibility: hidden;
   transition:
      grid-template-rows 240ms var(--ease-out),
      padding-top 240ms var(--ease-out),
      opacity 240ms var(--ease-out),
      visibility 0s linear 240ms;
}

.faq-item__answer > * {
   min-height: 0;
   overflow: hidden;
}

.faq-item.active .faq-item__answer {
   display: grid;
   grid-template-rows: 1fr;
   padding-top: 16px;
   opacity: 1;
   visibility: visible;
   transition:
      grid-template-rows 240ms var(--ease-out),
      padding-top 240ms var(--ease-out),
      opacity 240ms var(--ease-out),
      visibility 0s linear 0s;
}

.faq-item__question i {
   transition: transform 200ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
   .faq-item__answer,
   .faq-item.active .faq-item__answer {
      transition: opacity 150ms ease-out, visibility 0s linear 0s;
   }

   .faq-item__question i { transition: none; }
}

/* ---------- Buttons: Druck-Feedback ---------- */

/* Ersetzt für .theme-btn das globale `transition: all 0.3s` durch benannte
   Eigenschaften. */
.theme-btn {
   transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease,
      transform 160ms var(--ease-out);
}

.theme-btn:active:not(:disabled) {
   transform: scale(0.97);
}