/* ============================================================================
   Wellpaged — motion.css (shared brand motion layer)
   The named motions from DESIGN.md §3.3/§5 — rise (staggered entrance),
   rotator-pop, breathe, drift, pulse — plus the app-shell utilities every
   surface shares (pop, fade, bar growth, skeleton shimmer).

   Rules of the house:
   • Durations/easings come from the tokens (--dur-*, --ease-*) with literal
     fallbacks, so surfaces that don't import colors_and_type.css still work.
   • breathe/drift animate the standalone `scale`/`translate` properties, NEVER
     `transform` — stickers and shapes keep their rotate()/offsets intact.
   • Everything dies under prefers-reduced-motion (spec: "All gated").
   ============================================================================ */

@keyframes wp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wp-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes wp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wp-rotator-pop {
  0% { opacity: 0; transform: translateY(10px) rotate(-2deg) scale(.94); }
  60% { opacity: 1; transform: translateY(-2px) rotate(.5deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
/* breathe — a slow, alive scale on stickers/badges (composes with rotate()). */
@keyframes wp-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
/* drift — ambient float for hero shapes / background numerals. */
@keyframes wp-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes wp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* grow-y — chart bars rising from the baseline (set transform-origin: bottom). */
@keyframes wp-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* shimmer — skeleton loading sheen (frozen under reduced-motion). */
@keyframes wp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- utilities ---- */
.wp-rise { animation: wp-rise var(--dur-slow, 320ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both; }
.wp-pop { animation: wp-pop var(--dur-base, 220ms) var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)) both; }
.wp-fade { animation: wp-fade var(--dur-fast, 160ms) ease-out both; }
.wp-breathe { animation: wp-breathe 4.6s ease-in-out infinite; }
.wp-drift { animation: wp-drift 7s ease-in-out infinite; }

/* Staggered entrance: put .wp-stagger on a container; its children cascade in.
   Delays cap at the 8th child — later siblings arrive with the 8th. */
.wp-stagger > * { animation: wp-rise var(--dur-slow, 320ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)) both; }
.wp-stagger > *:nth-child(1) { animation-delay: 0ms; }
.wp-stagger > *:nth-child(2) { animation-delay: 55ms; }
.wp-stagger > *:nth-child(3) { animation-delay: 110ms; }
.wp-stagger > *:nth-child(4) { animation-delay: 165ms; }
.wp-stagger > *:nth-child(5) { animation-delay: 220ms; }
.wp-stagger > *:nth-child(6) { animation-delay: 275ms; }
.wp-stagger > *:nth-child(7) { animation-delay: 330ms; }
.wp-stagger > *:nth-child(n+8) { animation-delay: 385ms; }

/* Skeleton block — paper-sink shimmer, frozen (solid) under reduced-motion. */
.wp-skeleton {
  background: linear-gradient(100deg, var(--paper-sink, #F1ECE3) 40%, rgba(255, 255, 255, .75) 50%, var(--paper-sink, #F1ECE3) 60%);
  background-size: 200% 100%;
  animation: wp-shimmer 1.6s linear infinite;
  border-radius: var(--r-sm, 8px);
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .wp-rise, .wp-pop, .wp-fade, .wp-breathe, .wp-drift, .wp-stagger > *, .wp-skeleton { animation: none !important; }
}