/* ============================================================
   Loma Pflege · motion.css — Single Source für die AP1-Motion-Bausteine
   Dockt ausschliesslich an BESTEHENDE Shell-Klassen (app.css) an: ein
   Screen bindet nach tokens-v2.css + app.css zusätzlich diese Datei ein,
   mehr ist nicht nötig — die Bewegung greift über die schon vorhandenen
   Klassen automatisch (kein Extra-Markup, keine Extra-Klassen).

   Regeln (DESIGN.md Anti-Pattern 10):
   - NUR Token-Dauern/-Easings. tokens-v2.css nullt alle --loma-duration-*
     bei prefers-reduced-motion → Reduced-Motion greift hier von selbst.
   - Keine Show-Animationen; nichts läuft länger als --loma-duration-slow
     (520ms, klar unter dem 700ms-Limit).
   ============================================================ */

/* 1 · screen-enter — Inhalt fadet + slidet beim Laden herein (220ms).
   Bewusst OHNE fill-forwards: nach Ablauf fällt der Transform auf none
   zurück, damit .shell-content keinen bleibenden Containing-Block für die
   absolut gedockte 112-Leiste (.emergency--dock) bildet. */
@keyframes loma-screen-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.shell-content {
  animation: loma-screen-enter var(--loma-duration-screen) var(--loma-ease-out);
}

/* 2 · progress-fill — Fortschritts-Balken wachsen von links auf.
   Konsolidiert die Hero-Bar (Fallback-Keyframe bleibt in app.css, falls ein
   Screen motion.css nicht bindet) und animiert zusätzlich den Tagescheck-
   Stepper. Die Breite (--p) setzt weiterhin app.css; hier nur das Auffüllen. */
@keyframes loma-progress-fill { from { transform: scaleX(0); } }
.hero__bar-fill,
.metric-stepper__fill {
  transform-origin: left;
  animation: loma-progress-fill var(--loma-duration-slow) var(--loma-ease-out) both;
}
/* aktiver Step-Dot (Flow-Fortschritt) wächst sanft in die Länge */
@keyframes loma-step-grow { from { transform: scaleX(0.3); } }
.steps__dot[aria-current="step"] {
  transform-origin: left;
  animation: loma-step-grow var(--loma-duration-base) var(--loma-ease-out) both;
}

/* 3 · success / ampel — Status- und Erfolgs-Disc + Badge skalieren herein.
   Eine federnde Disc-Reveal deckt beide Befunde ab: den Erfolgs-Haken
   (bestaetigung.html, tagescheck-ergebnis.html → .ampel-disc / .reward__badge)
   UND die Ampel-Disc (tagescheck-ergebnis/-rot/-gelb → .ampel-disc). Dezent
   federnd, kein Show-Effekt. */
@keyframes loma-disc-reveal {
  0%   { opacity: 0; transform: scale(0.68) translateY(var(--loma-space-2)); }
  48%  { opacity: 1; transform: scale(1.08) translateY(0); }
  72%  { opacity: 1; transform: scale(0.97) translateY(0); }
  100% { opacity: 1; transform: scale(1); }
}
.ampel-disc,
.reward__badge {
  animation: loma-disc-reveal var(--loma-duration-slow) var(--loma-ease-spring) both;
}
@keyframes loma-check-draw {
  from { stroke-dashoffset: 48; }
  to   { stroke-dashoffset: 0; }
}
.ampel-disc--ok .icon path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: loma-check-draw var(--loma-duration-base) var(--loma-ease-out) both;
  animation-delay: calc(var(--loma-duration-fast) / 2);
}
/* kleine Ampel-Status-Pillen (Summary-Rows, Tagescheck-Ergebnis) fade-in */
@keyframes loma-ampel-pill { from { opacity: 0; transform: translateY(3px); } }
.ampel {
  animation: loma-ampel-pill var(--loma-duration-base) var(--loma-ease-out) both;
}

/* 4 · tap — 90ms Scale-Feedback, über alle Tap-Flächen konsolidiert.
   .btn/.choice tragen ihre Tap-Transition zwar schon in app.css; hier wird
   sie einheitlich (inkl. .row-v2, das in app.css nur den Flächen-Shift hatte)
   zusammengeführt. Antwort vor dem Abheben des Fingers. */
.btn,
.row-v2 {
  transition: background var(--loma-duration-tap) var(--loma-ease-out),
              transform var(--loma-duration-tap) var(--loma-ease-out);
}
.btn:active,
.row-v2:active { transform: scale(0.98); }
.choice {
  position: relative;
  transition: background var(--loma-duration-tap) var(--loma-ease-out),
              box-shadow var(--loma-duration-base) var(--loma-ease-spring),
              transform var(--loma-duration-base) var(--loma-ease-spring);
}
.choice::after {
  content: "";
  position: absolute;
  right: var(--loma-space-4);
  top: 50%;
  width: var(--loma-icon-sm);
  height: calc(var(--loma-icon-sm) / 2);
  border-left: var(--loma-focus-ring) solid currentColor;
  border-bottom: var(--loma-focus-ring) solid currentColor;
  opacity: 0;
  transform: translateY(-65%) rotate(-45deg) scale(0.72);
  transform-origin: center;
}
@keyframes loma-choice-check {
  0%   { opacity: 0; transform: translateY(-65%) rotate(-45deg) scale(0.72); }
  100% { opacity: 1; transform: translateY(-65%) rotate(-45deg) scale(1); }
}
.choice:active,
[data-selected="true"].choice {
  background: var(--loma-surface-warm);
  box-shadow: var(--loma-elevation-2);
  transform: scale(1.012);
}
.choice:active > .icon--caret,
[data-selected="true"].choice > .icon--caret {
  opacity: 0;
}
.choice:active::after,
[data-selected="true"].choice::after {
  animation: loma-choice-check var(--loma-duration-base) var(--loma-ease-spring) both;
}

@keyframes loma-seal-stamp {
  0%   { opacity: 0; transform: scale(1.32) rotate(-8deg); }
  58%  { opacity: 1; transform: scale(0.94) rotate(2deg); }
  100% { opacity: 0.78; transform: scale(1) rotate(0); }
}
.shell[data-screen-label="Antrag eingereicht"] .ampel-disc {
  position: relative;
}
.shell[data-screen-label="Antrag eingereicht"] .ampel-disc::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--loma-space-2));
  border-radius: var(--loma-radius-round);
  box-shadow:
    inset 0 0 0 var(--loma-hairline) currentColor,
    0 0 0 var(--loma-space-1) var(--loma-status-ok-soft);
  opacity: 0;
  pointer-events: none;
  animation: loma-seal-stamp var(--loma-duration-slow) var(--loma-ease-spring) both;
}