/* ============================================================
   SahiHisab — Motion Kit (micro-interactions)
   Self-contained, namespaced (.sh-*). No !important (CLAUDE.md).
   Reduced-motion handled at the bottom via later + equal specificity.
   Pairs with js/motion.js (window.SHMotion).
   ============================================================ */

/* ── 1. Button tap ripple ───────────────────────────────── */
/* overflow:hidden contains the ripple inside the button bounds.
   .no-ripple opts a button out (e.g. if it has overflow children). */
.btn { position: relative; overflow: hidden; }
.btn.no-ripple { overflow: visible; }
/* Ripple colour is theme-aware so it stays visible in BOTH light and dark mode:
   - filled colour buttons (primary/success/danger/warning/info) → white ripple (works on saturated bg in either theme)
   - everything else → a neutral that flips: dark-on-light in light mode, light-on-dark in dark mode. */
:root { --sh-ripple-soft: hsla(210, 40%, 25%, 0.16); }
[data-theme="dark"], :root.dark-mode, body.dark-mode { --sh-ripple-soft: hsla(0, 0%, 100%, 0.20); }
@media (prefers-color-scheme: dark) { :root:not(.light-mode) { --sh-ripple-soft: hsla(0, 0%, 100%, 0.20); } }

.sh-ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  pointer-events: none; background: var(--sh-ripple-soft);
  animation: sh-ripple 600ms ease-out;
}
.btn-primary .sh-ripple, .btn-success .sh-ripple, .btn-danger .sh-ripple,
.btn-warning .sh-ripple, .btn-info .sh-ripple { background: hsla(0, 0%, 100%, 0.42); }
@keyframes sh-ripple { to { transform: scale(4); opacity: 0; } }

/* ── 2. Count-up numbers ────────────────────────────────── */
/* tabular-nums keeps width stable so the layout doesn't jitter. */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ── 3. Success check draw ──────────────────────────────── */
.sh-check {
  display: inline-grid; place-items: center; border-radius: 9999px;
  background: var(--success-light, hsl(142, 60%, 93%)); flex: 0 0 auto;
}
.sh-check svg { width: 58%; height: 58%; }
.sh-check path {
  stroke: var(--success, hsl(142, 70%, 45%)); stroke-width: 3.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
}
.sh-check.run path { animation: sh-draw 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.sh-check.run { animation: sh-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sh-draw { to { stroke-dashoffset: 0; } }
@keyframes sh-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ── 4. Staggered list entrance ─────────────────────────── */
/* Add .sh-stagger to a container, then .run (SHMotion.stagger does both). */
.sh-stagger > * { opacity: 0; }
.sh-stagger.run > * { animation: sh-slide-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.sh-stagger.run > *:nth-child(1)  { animation-delay: 30ms; }
.sh-stagger.run > *:nth-child(2)  { animation-delay: 75ms; }
.sh-stagger.run > *:nth-child(3)  { animation-delay: 120ms; }
.sh-stagger.run > *:nth-child(4)  { animation-delay: 165ms; }
.sh-stagger.run > *:nth-child(5)  { animation-delay: 210ms; }
.sh-stagger.run > *:nth-child(6)  { animation-delay: 255ms; }
.sh-stagger.run > *:nth-child(7)  { animation-delay: 300ms; }
.sh-stagger.run > *:nth-child(8)  { animation-delay: 345ms; }
.sh-stagger.run > *:nth-child(n+9) { animation-delay: 390ms; }
@keyframes sh-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── 5. Reduced motion (later + equal specificity wins; no !important) ── */
@media (prefers-reduced-motion: reduce) {
  .sh-ripple { display: none; animation: none; }
  .sh-check.run path { animation: none; stroke-dashoffset: 0; }
  .sh-check.run { animation: none; }
  .sh-stagger > *, .sh-stagger.run > * { opacity: 1; animation: none; }
  .sh-stagger.run > *:nth-child(1), .sh-stagger.run > *:nth-child(2),
  .sh-stagger.run > *:nth-child(3), .sh-stagger.run > *:nth-child(4),
  .sh-stagger.run > *:nth-child(5), .sh-stagger.run > *:nth-child(6),
  .sh-stagger.run > *:nth-child(7), .sh-stagger.run > *:nth-child(8),
  .sh-stagger.run > *:nth-child(n+9) { animation-delay: 0ms; }
}