/* PriceWrench motion recipes, adapted from transitions.dev patterns.
 * Requires tokens.css. Each recipe maps to a moment in the app (see README). */

/* ---- Number pop-in: total changes ----
 * Wrap each character in a span with --i (see motion.js popNumber). */
.pw-num-pop > span {
  display: inline-block;
  animation: pw-pop-in var(--dur-emphasis) var(--ease-pop) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes pw-pop-in {
  from { transform: translateY(var(--distance-base)); opacity: 0; filter: blur(var(--blur-small)); }
  to   { transform: none; opacity: 1; filter: none; }
}

/* ---- Texts reveal: line item added, list enter ----
 * Set --i on each row for a 40ms stagger. */
.pw-reveal {
  animation: pw-rise var(--dur-emphasis) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--dur-stagger));
}
@keyframes pw-rise {
  from { transform: translateY(var(--distance-medium)); opacity: 0; filter: blur(var(--blur-medium)); }
  to   { transform: none; opacity: 1; filter: none; }
}

/* ---- Tabs sliding: Good / Better / Best ----
 * The pill reads --x and --w from the container (see motion.js moveTabs). */
.pw-tabs { position: relative; display: flex; }
.pw-tabs__pill {
  position: absolute; top: 0; bottom: 0; left: 0; box-sizing: border-box;
  width: var(--w, 0); transform: translateX(var(--x, 0));
  transition: transform var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}

/* ---- Error shake: invalid field (80 / 80 / 60 / 60ms segments) ---- */
.pw-shake { animation: pw-shake 280ms var(--ease-out); }
@keyframes pw-shake {
  0%     { transform: translateX(0); animation-timing-function: var(--ease-out); }
  28.57% { transform: translateX(var(--distance-small)); animation-timing-function: var(--ease-out); }
  57.14% { transform: translateX(calc(var(--distance-small) * -1)); animation-timing-function: var(--ease-out); }
  78.57% { transform: translateX(var(--distance-micro)); animation-timing-function: var(--ease-out); }
  100%   { transform: translateX(0); }
}

/* ---- Success check: quote sent / accepted ----
 * <svg class="pw-check"><path pathLength="1" d="..."/></svg> */
.pw-check { animation: pw-check-in var(--dur-emphasis) var(--ease-out) both; }
.pw-check path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: pw-draw var(--dur-emphasis) var(--ease-out) var(--dur-micro) forwards;
}
@keyframes pw-check-in {
  from { opacity: 0; transform: rotate(80deg) scale(.6); filter: blur(var(--blur-large)); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes pw-draw { to { stroke-dashoffset: 0; } }

/* ---- Toast: saved, backup exported. Toggle [data-open]. ---- */
.pw-toast {
  opacity: 0; visibility: hidden;
  transform: translateY(var(--distance-large)) scale(var(--scale-menu));
  filter: blur(var(--blur-small));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out), visibility 0s var(--dur-fast);
}
.pw-toast[data-open] {
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition-duration: var(--dur-medium); transition-delay: 0s;
}

/* ---- Modal / sheet: edit task. Toggle [data-open]. ---- */
.pw-modal {
  opacity: 0; visibility: hidden; transform: scale(var(--scale-modal));
  transition: opacity var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out),
              visibility 0s var(--dur-quick);
}
.pw-modal[data-open] {
  opacity: 1; visibility: visible; transform: none;
  transition-duration: var(--dur-fast); transition-delay: 0s;
}

/* ---- Skeleton → reveal: price book loading ---- */
.pw-skeleton { background: var(--color-wash); animation: pw-pulse 1s linear infinite; }
.pw-skeleton-reveal { animation: pw-unblur var(--dur-slow) var(--ease-in-out) both; }
@keyframes pw-pulse { 50% { opacity: .5; } }
@keyframes pw-unblur {
  from { opacity: 0; filter: blur(var(--blur-small)); }
  to   { opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pw-num-pop > span, .pw-reveal, .pw-shake, .pw-check, .pw-check path,
  .pw-skeleton, .pw-skeleton-reveal { animation: none; }
  .pw-check path { stroke-dashoffset: 0; }
}