/* ---------- Motion ---------- */
/* Existing, preserved */
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(248,113,113,.55)}
  70%{box-shadow:0 0 0 7px rgba(248,113,113,0)}
  100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}
}
@keyframes panelIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: no-preference){
  .panel.active{animation:panelIn .18s ease both}
}

/* ---------- View Transitions (tab change) ---------- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:vtFade .16s ease both}
  ::view-transition-new(root){animation:vtSlide .22s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes vtFade{to{opacity:0}}
@keyframes vtSlide{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ---------- Skeleton shimmer (hydrate) ---------- */
.skeleton{
  position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); min-height:60px;
}
.skeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform:translateX(-100%);
}
@media (prefers-reduced-motion: no-preference){
  .skeleton::after{animation:shimmer 1.2s infinite}
}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ---------- SVG stroke-draw checkmark ---------- */
@media (prefers-reduced-motion: no-preference){
  .draw-check{stroke-dasharray:30; stroke-dashoffset:30; animation:drawCheck .35s ease forwards}
}
@keyframes drawCheck{to{stroke-dashoffset:0}}

/* ---------- Stash "liquid fill" gauge ---------- */
.gauge{position:relative; height:8px; border-radius:6px; background:var(--card); border:1px solid var(--border); overflow:hidden; margin:10px 0 4px}
.gauge .fill{position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg, var(--purple), var(--blue));
  border-radius:6px; transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* ---------- Confetti (milestone) ---------- */
.confetti-host{position:fixed; inset:0; pointer-events:none; z-index:80; overflow:hidden}
.confetti-host i{position:absolute; top:-12px; width:8px; height:12px; opacity:.95}
@media (prefers-reduced-motion: no-preference){
  .confetti-host i{animation:confettiFall var(--dur,1.6s) cubic-bezier(.3,.5,.6,1) forwards}
}
@keyframes confettiFall{
  0%{transform:translateY(-10px) rotate(0); opacity:1}
  100%{transform:translateY(102vh) rotate(720deg); opacity:0}
}

/* ---------- Toast ---------- */
#toastHost{position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 16px); z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  border-radius:999px; padding:9px 16px; font-size:13px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion: no-preference){
  .toast{animation:toastIn .2s ease both}
}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* count-up uses tabular-nums via .stat .v / .scard .v already */

/* ---------- Reduced motion: hard kill switch (preserved) ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .gauge .fill{transition:none !important}
}