/* ============================================================
   Motion — entrances, feedback and hover
   ============================================================ */

/* pages and modals arrive rather than appear */
.page.open    { animation: rise-in var(--dur-3) var(--ease-out) both; }
.overlay.open { animation: fade-in var(--dur-2) ease both; }
.sheet        { animation: sheet-in var(--dur-3) var(--ease-out) both; }

/* recipe cards fan in — but only when the render wasn't triggered by typing */
.grid.stagger > .card { animation: pop-in var(--dur-3) var(--ease-out) both; }
.grid.stagger > .card:nth-child(1)  { animation-delay: 0ms; }
.grid.stagger > .card:nth-child(2)  { animation-delay: 26ms; }
.grid.stagger > .card:nth-child(3)  { animation-delay: 52ms; }
.grid.stagger > .card:nth-child(4)  { animation-delay: 78ms; }
.grid.stagger > .card:nth-child(5)  { animation-delay: 104ms; }
.grid.stagger > .card:nth-child(6)  { animation-delay: 130ms; }
.grid.stagger > .card:nth-child(7)  { animation-delay: 152ms; }
.grid.stagger > .card:nth-child(8)  { animation-delay: 170ms; }
.grid.stagger > .card:nth-child(n+9){ animation-delay: 186ms; }

/* the card itself: a longer lift, and the photo eases in behind it */
.card { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out),
                    border-color var(--dur-2) ease, background-color var(--dur-2) ease; }
.card img { transition: transform var(--dur-4) var(--ease-out); }
.card:hover { transform: translateY(-3px); }
.card:hover img { transform: scale(1.045); }
.card .cbtn { transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-1) ease, color var(--dur-1) ease; }
.card .cbtn:hover { transform: scale(1.12); }
.card .cbtn:active { transform: scale(.94); }

/* rows nudge sideways on hover so the cursor has something to land on */
.prow, .order-row, .grow-item, .mrow {
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) ease,
              box-shadow var(--dur-2) ease, background-color var(--dur-2) ease;
}
.prow:hover, .order-row:hover { transform: translateX(2px); border-color: var(--border-strong); }

/* every pressable thing acknowledges the press */
.tool, .rowbtn, .chip, .iconbtn, .x, #tray .go, #tray .clear, .ptabs button, .sb-foot-btn, .back {
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) ease;
}
.tool:active, .rowbtn:active, .chip:active, .iconbtn:active,
.x:active, #tray .go:active, .ptabs button:active, .back:active { transform: scale(.965); }
.tool:hover:not(.ghost):not(.warn):not(.blue) { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.tool.big:hover { transform: translateY(-1px); }

/* favourite: a small heartbeat when it turns on */
.cbtn.favbtn.on > .ic, .iconbtn.favon > .ic { animation: heart-beat var(--dur-4) var(--ease-spring); }
@keyframes heart-beat {
  0%   { transform: scale(.6); }
  55%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* the selection tray slides up from the bottom edge */
#tray { transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) ease; }

/* toasts spring in from below, and the icon inside them picks up the accent */
.toastmsg { animation: toast-in var(--dur-3) var(--ease-spring) both; }
.toastmsg > span > .ic:first-child { color: var(--accent); margin-right: .35em; vertical-align: -0.18em; }
.toastmsg.err > span > .ic:first-child { color: var(--red); }

/* chips and tabs settle rather than snap */
.chip, .ptabs button { transition: background-color var(--dur-1) ease, color var(--dur-1) ease,
                           border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out); }
.chip:hover, .ptabs button:hover { transform: translateY(-1px); }

/* dashboard tiles: the number counts as the panel settles */
.dash-card { animation: rise-in-sm var(--dur-3) var(--ease-out) both; }
.dash-card:nth-child(2) { animation-delay: 40ms; }
.dash-card:nth-child(3) { animation-delay: 80ms; }
.dash-card:nth-child(4) { animation-delay: 120ms; }
.dash-card:nth-child(5) { animation-delay: 160ms; }

/* the scan banner already flashes — give the flash somewhere to go */
.scan-banner.flash { animation: pulse-ring var(--dur-4) var(--ease-out); }

/* an element the app scrolls you to gets a moment of attention */
.prow.hl { animation: pulse-ring 1.1s var(--ease-out) 2; }