/* ==========================================================================
   AMCALC motion.css — "Ruhe im Arbeitsbereich, Magie in den Momenten" (PR3)
   ==========================================================================
   Deklarative Motion-Utilities. Views nutzen NUR data-Attribute/Klassen —
   keine Motion-Logik inline in Views (Versicherung gegen Copy-Paste-Drift).
   Regeln: nur transform/opacity · keine Dauer-Animationen · Reduced Motion
   nullt alles über die Dauer-Tokens (siehe main.css).
   ========================================================================== */

/* ── Page-Enter-Kaskade: [data-animate] + --i (setzt amcalc-ui.js) ── */
/* Kaskade NUR beim ersten Aufruf der Session (html[data-intro], siehe Header-Inline-Gate) —
   sonst ist der Inhalt sofort da: kein Verstecken, kein Nach-Klappern bei jeder Navigation. */
html[data-intro] [data-animate] { opacity: 0; }
html[data-intro] body.entered [data-animate] {
    animation: pwEnter var(--t-enter) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes pwEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Tabellen-Zeilen treten gestaffelt ein: <table data-stagger-rows> ── */
html[data-intro] [data-stagger-rows] tbody tr { animation: pwRowFade 160ms var(--ease-out) both; }
@keyframes pwRowFade { from { opacity: 0; } }
[data-stagger-rows] tbody tr:nth-child(1) { animation-delay: 0ms; }
[data-stagger-rows] tbody tr:nth-child(2) { animation-delay: 14ms; }
[data-stagger-rows] tbody tr:nth-child(3) { animation-delay: 28ms; }
[data-stagger-rows] tbody tr:nth-child(4) { animation-delay: 42ms; }
[data-stagger-rows] tbody tr:nth-child(5) { animation-delay: 56ms; }
[data-stagger-rows] tbody tr:nth-child(6) { animation-delay: 70ms; }
[data-stagger-rows] tbody tr:nth-child(7) { animation-delay: 84ms; }
[data-stagger-rows] tbody tr:nth-child(8) { animation-delay: 98ms; }
[data-stagger-rows] tbody tr:nth-child(9) { animation-delay: 112ms; }
[data-stagger-rows] tbody tr:nth-child(10) { animation-delay: 126ms; }
[data-stagger-rows] tbody tr:nth-child(11) { animation-delay: 140ms; }
[data-stagger-rows] tbody tr:nth-child(12) { animation-delay: 154ms; }
/* Deckel: ab Zeile 13 keine Animation — große Tabellen erzeugen sonst einen Paint-Sturm */
[data-stagger-rows] tbody tr:nth-child(n+13) { animation: none; }

/* ── Stempel-Feedback: Badge schlägt ein (Label gedruckt, gebucht, gelöst) ── */
.pw-stamp { animation: pwStamp 220ms var(--ease-out) both; }
@keyframes pwStamp {
    0%   { transform: scale(1.3) rotate(-4deg); opacity: 0; }
    60%  { transform: scale(0.96) rotate(-2deg); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

/* ── Ledger-Puls: neue Zeile ("Geld trifft ein") ── */
tr.pw-row-in { animation: pwRowIn var(--t-enter) var(--ease-out); }
@keyframes pwRowIn { from { opacity: 0; transform: translateY(-4px); } }
tr.pw-ledger td { animation: pwLedgerBg 1.6s var(--ease-out); }
tr.pw-ledger td:first-child { box-shadow: inset 2px 0 0 var(--accent-primary); transition: box-shadow 400ms var(--ease-io); }
tr.pw-ledger.pw-settled td:first-child { box-shadow: inset 0 0 0 transparent; }
@keyframes pwLedgerBg { 0% { background: var(--accent-primary-tint); } 100% { background: transparent; } }
tr.pw-saved td { animation: pwLedgerBg 1.2s var(--ease-out); }

/* ── Zell-Blitz bei Live-Updates (Throttling macht amcalc-ui.js) ── */
.pw-flash { animation: pwCellFlash 400ms var(--ease-io); }
@keyframes pwCellFlash { 30% { color: var(--accent-primary-text); } }

/* ── Skeleton-Sweep: läuft NUR solange [aria-busy="true"] ── */
[aria-busy="true"] { position: relative; }
[aria-busy="true"]::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--text-primary) 5%, transparent) 50%, transparent 60%);
    background-size: 200% 100%; animation: pwSweep 1.2s linear infinite;
}
@keyframes pwSweep { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* ── Toasts (erzeugt amcalc-ui.js) ── */
.pw-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 4100; display: flex; flex-direction: column; gap: 8px; }
.pw-toast {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: var(--shadow-overlay); padding: 11px 14px 13px; min-width: 260px; max-width: 340px;
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
    font-size: 0.8125rem; color: var(--text-primary);
    animation: pwToastIn var(--t-overlay) var(--ease-out);
}
.pw-toast.out { animation: pwToastOut var(--t-fast) var(--ease-io) forwards; }
@keyframes pwToastIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes pwToastOut { to { opacity: 0; transform: translateY(4px); } }
.pw-toast .life {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: var(--grad-swoosh); transform-origin: left; animation: pwLife 4s linear forwards;
}
@keyframes pwLife { to { transform: scaleX(0); } }

/* ── Sparklines: Clip-Reveal (kein dasharray — Chrome-Bug bei gestreckten SVGs) ── */
.spark svg { display: block; width: 100%; height: 32px; clip-path: inset(0 100% 0 0); transition: clip-path 550ms var(--ease-out) 120ms; }
.spark.on svg { clip-path: inset(0 0 0 0); }
.spark .spark-dot { opacity: 0; transition: opacity 250ms var(--ease-io) 500ms; }
.spark.on .spark-dot { opacity: 1; }

/* ── Balken-Draw-In (Bar-Charts von amcalc-ui.js) ── */
.pw-bars rect.bar { fill: var(--chart-line); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 300ms var(--ease-out); }
.pw-bars.on rect.bar { transform: scaleY(1); }

/* ── Button-Mechanik: Press + Loading-Dreipunkt ── */
.pw-press:active { transform: scale(0.98); transition: transform var(--t-press) var(--ease-io); }
.pw-loading { pointer-events: none; position: relative; color: transparent !important; }
.pw-loading::after {
    content: "···"; position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--font-mono); font-size: 1rem; letter-spacing: 2px;
    color: var(--text-secondary); animation: pwDots 900ms steps(3) infinite;
}
@keyframes pwDots { 0% { clip-path: inset(0 66% 0 0); } 100% { clip-path: inset(0 -10% 0 0); } }