/* ============================================================
   Wunderlust — motion
   The app's animation language, kept in one file so it can be
   reasoned about (and silenced) as a unit. Inspired by the
   crabbyvibez hover language — a springy lift, a slow spin, a
   staggered arrival — but dialled down to Apple restraint: short,
   quiet, purposeful. Every rule lives inside a reduced-motion guard,
   so a visitor who asks for less motion gets a still page with full
   opacity and no transforms.
   ============================================================ */

/* --- Card grid: staggered entrance ------------------------- */
/* A short rise + fade on load, each card a beat behind the last,
   capped at the sixth so a full grid never drags. */
@media (prefers-reduced-motion: no-preference) {
  .grid > .card { animation: wl-rise .5s cubic-bezier(.175,.885,.32,1.275) both; }
  .grid > .card:nth-child(1) { animation-delay: .02s; }
  .grid > .card:nth-child(2) { animation-delay: .06s; }
  .grid > .card:nth-child(3) { animation-delay: .10s; }
  .grid > .card:nth-child(4) { animation-delay: .14s; }
  .grid > .card:nth-child(5) { animation-delay: .18s; }
  .grid > .card:nth-child(n+6) { animation-delay: .22s; }
}
@keyframes wl-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Foot actions: springy lift + globe spin --------------- */
/* The three foot actions (Website, Directions, Done) lift on hover
   with the crabby spring curve; the globe adds a slow spin — the
   "website" nod to the vinyl-spin motif. */
@media (prefers-reduced-motion: no-preference) {
  .card-web, .card-nav, .card-done {
    transition: transform .28s cubic-bezier(.175,.885,.32,1.275),
                background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease);
  }
  .card-web:hover, .card-nav:hover, .card-done:hover { transform: translateY(-2px); }
  .card-web:active, .card-nav:active, .card-done:active { transform: translateY(0); }
  .card-web:hover .ms { animation: wl-spin 3.2s linear infinite; }
}
@keyframes wl-spin { to { transform: rotate(360deg); } }