/* ============================================================================
   DayFood 2.0 — motion. Quiet: nothing over 400ms, nothing travels far, every
   decorative move has a reduced-motion fallback (the tokens zero the durations
   and the press scale). Curves are DayFood's own (--df-ease-out / --df-ease-drawer).
   ============================================================================ */

/* page-to-page: a plain cross-fade (same-origin navigations; ignored where unsupported) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--df-dur-2); animation-timing-function: var(--df-ease-out); }

/* a count that changed (cart badge): one pop, re-triggered by re-adding the class */
@keyframes df-pop { 0% { scale: 1; } 40% { scale: 1.3; } 100% { scale: 1; } }
.df2 .df-pop { animation: df-pop var(--df-dur-4) var(--df-ease-out); }

/* a card in a grid lifts a hair on hover (fine pointers only — a tap never fires a false hover) */
@media (hover: hover) and (pointer: fine) {
  .df2 :is(a, label).df-card { transition: border-color var(--df-dur-2) var(--df-ease-out), box-shadow var(--df-dur-2) var(--df-ease-out), translate var(--df-dur-2) var(--df-ease-out); }
  .df2 :is(a, label).df-card:hover { translate: 0 -2px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--df-dur-1); }
  .df2 .df-pop { animation: none; }
  .df2 :is(a, label).df-card:hover { translate: none; }
}