/* =========================================================
   SPARK – Animationen (nur wenn „Bewegung reduzieren“ aus ist)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Klick-Welle ---------- */
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .65s cubic-bezier(.2, .8, .2, 1) forwards; z-index: 0; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.btn, .seg button, .chip, .icon-btn, .settings-nav button { overflow: hidden; }

/* ---------- Seitenwechsel: Inhalte fliegen gestaffelt herein ---------- */
.motion .view-inner { animation: viewIn2 .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes viewIn2 { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.motion .page-head h1, .motion .hello h1, .motion .proj-hero h1 { animation: titleIn .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes titleIn { from { opacity: 0; transform: translateY(14px); letter-spacing: -.02em; clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); } }
.motion .stagger > * { animation: rise .65s cubic-bezier(.16, 1, .3, 1) both; }
.motion .stagger > *:nth-child(1) { animation-delay: .04s; } .motion .stagger > *:nth-child(2) { animation-delay: .09s; }
.motion .stagger > *:nth-child(3) { animation-delay: .14s; } .motion .stagger > *:nth-child(4) { animation-delay: .19s; }
.motion .stagger > *:nth-child(5) { animation-delay: .24s; } .motion .stagger > *:nth-child(6) { animation-delay: .29s; }
.motion .stagger > *:nth-child(n+7) { animation-delay: .34s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.motion .grid.g-4 > .kpi { animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.motion .grid.g-4 > .kpi:nth-child(2) { animation-delay: .07s; } .motion .grid.g-4 > .kpi:nth-child(3) { animation-delay: .14s; } .motion .grid.g-4 > .kpi:nth-child(4) { animation-delay: .21s; }

/* ---------- Einblenden beim Scrollen ---------- */
.motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), transform .8s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms); }
.motion .reveal.in { opacity: 1; transform: none; }

/* ---------- 3D-Karten ---------- */
.motion .tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateZ(0); transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .4s, border-color .3s; will-change: transform; }
.motion .tilt.tilting { transition: transform .08s linear, box-shadow .4s, border-color .3s; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-2); }
.motion .card { transition: border-color .3s, box-shadow .4s, transform .5s cubic-bezier(.16, 1, .3, 1); }
.motion .card.spot:hover { border-color: var(--line-2); }

/* ---------- Buttons ---------- */
.motion .btn { transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .2s, border-color .2s, box-shadow .3s, color .2s; }
.motion .btn.primary { position: relative; transform: translate(var(--tx, 0), var(--ty, 0)); }
.motion .btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
:root[data-theme="light"] .motion .btn.primary::after, .motion:root[data-theme="light"] .btn.primary::after { background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%); }
.motion .btn.primary:hover::after { transform: translateX(120%); }
.motion .btn:active { transform: translate(var(--tx, 0), var(--ty, 0)) scale(.96); }

/* ---------- Navigation ---------- */
.motion .nav a { transition: color .25s, background .25s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.motion .nav a:hover { transform: translateX(3px); }
.motion .nav a.active { animation: navIn .55s cubic-bezier(.16, 1, .3, 1); }
@keyframes navIn { 0% { transform: scale(.94); box-shadow: 0 0 0 0 var(--glow); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.motion .nav a.active svg { animation: iconPop .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes iconPop { 0% { transform: scale(.6) rotate(-12deg); } 70% { transform: scale(1.15) rotate(4deg); } 100% { transform: none; } }

/* ---------- Fenster, Schubladen, Menüs ---------- */
.motion .modal { animation: modalIn .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.motion .overlay { animation: fadeBlur .35s ease both; }
@keyframes fadeBlur { from { opacity: 0; backdrop-filter: blur(0); } }
.motion .drawer { animation: drawerIn .55s cubic-bezier(.16, 1, .3, 1); }
@keyframes drawerIn { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } }
.motion .drawer-body > * { animation: rise .55s cubic-bezier(.16, 1, .3, 1) both; }
.motion .drawer-body > *:nth-child(2) { animation-delay: .05s; } .motion .drawer-body > *:nth-child(3) { animation-delay: .1s; } .motion .drawer-body > *:nth-child(n+4) { animation-delay: .15s; }
.motion .menu { animation: menuIn .28s cubic-bezier(.16, 1, .3, 1); transform-origin: top left; }
@keyframes menuIn { from { opacity: 0; transform: scale(.92) translateY(-6px); } }
.motion .toast { animation: toastSpring .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes toastSpring { from { opacity: 0; transform: translateY(24px) scale(.9); } }

/* ---------- Zahlen, Balken, Ringe ---------- */
.motion .paybar i, .motion .timeline i { animation: barGrow 1.1s cubic-bezier(.16, 1, .3, 1) both; transform-origin: left; }
@keyframes barGrow { from { transform: scaleX(0); } }
.motion .ring-svg .rf { animation: ringDraw 1.4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ringDraw { from { stroke-dashoffset: var(--len, 140); } }
.motion .pop-num { animation: numPop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes numPop { from { opacity: 0; transform: translateY(8px) scale(.92); } }
.motion .kpi .value { transition: letter-spacing .3s; }

/* ---------- Hintergrund: Parallax + langsames Atmen ---------- */
.motion .backdrop { transform: translate(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -14px)); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.motion .backdrop { will-change: transform; }

/* ---------- Anmeldung ---------- */
.motion .auth-card > * { animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.motion .auth-card > *:nth-child(2) { animation-delay: .06s; } .motion .auth-card > *:nth-child(3) { animation-delay: .12s; } .motion .auth-card > *:nth-child(4) { animation-delay: .18s; } .motion .auth-card > *:nth-child(n+5) { animation-delay: .24s; }
.motion .mega-logo img { animation: logoIn 1.2s cubic-bezier(.16, 1, .3, 1) both, logoGlow 6s ease-in-out 1.2s infinite; }
@keyframes logoIn { from { opacity: 0; transform: translateY(30px) scale(.94); filter: blur(12px) drop-shadow(0 18px 40px rgba(0,0,0,.55)); } }
@keyframes logoGlow { 50% { filter: drop-shadow(0 0 28px rgba(255, 255, 255, .22)) drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); } }
.motion .auth-hero .features span { animation: rise .7s cubic-bezier(.16, 1, .3, 1) both; }
.motion .auth-hero .features span:nth-child(2) { animation-delay: .35s; } .motion .auth-hero .features span:nth-child(3) { animation-delay: .4s; } .motion .auth-hero .features span:nth-child(4) { animation-delay: .45s; } .motion .auth-hero .features span:nth-child(5) { animation-delay: .5s; } .motion .auth-hero .features span:nth-child(6) { animation-delay: .55s; }
.motion .auth-hero .features span:nth-child(1) { animation-delay: .3s; }

/* ---------- Tabellenzeilen & Listen ---------- */
.motion .table tbody tr { animation: rowIn .45s cubic-bezier(.16, 1, .3, 1) both; }
.motion .table tbody tr:nth-child(2) { animation-delay: .02s; } .motion .table tbody tr:nth-child(3) { animation-delay: .04s; } .motion .table tbody tr:nth-child(4) { animation-delay: .06s; } .motion .table tbody tr:nth-child(5) { animation-delay: .08s; } .motion .table tbody tr:nth-child(n+6) { animation-delay: .1s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } }
.motion .list-item { transition: background .2s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.motion .list-item.click:hover { transform: translateX(4px); }

@media (max-width: 860px) {
  .motion .tilt { transform: none !important; }
  .motion .view-inner { animation-duration: .45s; }
}