/* ════════════════════════════════════════════════════════════════
 * formstube · fs-mobile-anim.css
 * ════════════════════════════════════════════════════════════════
 * Native-App-Feel Animations für Mobile + PWA-Standalone.
 *
 *  1 · iOS-Push-Slide bei Tab/Link-Navigation
 *  2 · Lime-Ripple bei Button/Link-Tap
 *  3 · Pull-to-Refresh mit Hex-Spinner
 *  4 · Page-Load Stagger für Listen
 *
 * Aktiv: <=720px ODER body.is-pwa.
 * Respektiert prefers-reduced-motion.
 * ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Komplett deaktivieren wenn User es will */
  .fs-anim-out, .fs-anim-in, .fs-ripple { animation: none !important; transition: none !important; }
}

/* ─── 1 · iOS-Push-Slide bei Navigation ───────────────────────── */
@media (max-width: 720px) {

  /* Page-Out (alte Page slidet nach links · Tab-Bar bleibt fix!)
     Marc-Wunsch 2026-05-23: „Menübar unten darf davon nicht
     beeinflusst werden." */
  body.fs-anim-out main {
    animation: fs-page-out-left 0.28s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  body.fs-anim-out-back main {
    animation: fs-page-out-right 0.28s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  }
  /* Tab-Bar fix lassen während der Page-Transition */
  body.fs-anim-out .fs-tab-bar,
  body.fs-anim-out-back .fs-tab-bar,
  body.fs-anim-in .fs-tab-bar,
  body.fs-anim-in-back .fs-tab-bar {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Page-In (neue Page kommt von rechts/links rein) */
  body.fs-anim-in main {
    animation: fs-page-in-right 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  body.fs-anim-in-back main {
    animation: fs-page-in-left 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes fs-page-out-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0.4; transform: translateX(-30px); }
  }
  @keyframes fs-page-out-right {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0.4; transform: translateX(30px); }
  }
  @keyframes fs-page-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes fs-page-in-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* ─── 2 · Lime-Ripple bei Tap ─────────────────────────────────── */
.fs-ripple-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fs-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(216, 255, 60, 0.35);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: fs-ripple-pulse 0.55s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  z-index: 0;
}
.fs-ripple--ink {
  background: rgba(10, 10, 12, 0.25);
}
@keyframes fs-ripple-pulse {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* ─── 3 · Pull-to-Refresh · ROLLBACK 2026-05-23 (Marc-Wunsch)
       Native iOS-Browser-Bounce sah besser aus · Custom-PTR raus. */

/* ─── 4 · Save-Pulse Lime auf Editor-Bar ──────────────────────── */
.fs-edit-bar-save.fs-pulse {
  animation: fs-save-pulse 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}
@keyframes fs-save-pulse {
  0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(216, 255, 60, 0); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(216, 255, 60, 0); }
  0% { box-shadow: 0 0 0 0 rgba(216, 255, 60, 0.55); }
}

/* ─── 5 · Mobile-Listen-Pages · page-head kompakt ──────────────
   Marc-Bug 2026-05-23: „Bei Ausgaben ist der Leerraum oben zu groß"
   Default page-head hat 80–120px margin-top + große Headline + Lead.
   Auf Mobile drückt das Content unnötig weit nach unten — Top-Nav
   gibt's eh schon. Eyebrow + Headline + Lead kompakter, weniger
   Leerraum oben. */
@media (max-width: 720px) {
  .page-head {
    margin-top: 16px;
    padding-top: 0;
    margin-bottom: 18px;
  }
  .page-eyebrow {
    font-size: 0.66rem !important;
    letter-spacing: 0.18em !important;
    margin-bottom: 8px;
    display: block;
  }
  .page-title {
    font-size: clamp(2rem, 8vw, 2.6rem) !important;
    line-height: 1 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.025em;
  }
  .page-lead {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    margin: 0 0 4px;
    color: var(--fg-mute, #B5B5B5);
  }
  /* Mega-Text-Underlay (z.B. "AUSG" hinter "Ausgaben") · Opazität runter
     damit es weniger raumgreifend wirkt auf Mobile */
  .page-head .mega-underlay,
  .page-head .mega-text {
    opacity: 0.06 !important;
    font-size: 4rem !important;
  }
  /* Container-Padding-Top auf Mobile · main bekam vorher >40px */
  main > .container:first-child,
  main > .container--wide:first-child {
    padding-top: 14px;
  }
}