/* Motion layer: page transitions, entrances, press feedback, sheets, swipe. Respects reduced motion via tokens. */

/* Page changes are plain navigations. A cross-document view transition fades the old page out while the new one fades in,
   which on slower phones showed the old page as a ghost behind the new one, so there is none. */

/* ---- entrances ---- */
.rise { animation: rise var(--dur-4) var(--spring-soft) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.fade { animation: fade var(--dur-3) var(--ease-out) backwards; }
@keyframes fade { from { opacity: 0; } }
.stagger > * { animation: rise var(--dur-4) var(--spring-soft) backwards; }
.stagger > :nth-child(1) { animation-delay: 0ms; }   .stagger > :nth-child(2) { animation-delay: 45ms; }
.stagger > :nth-child(3) { animation-delay: 90ms; }  .stagger > :nth-child(4) { animation-delay: 135ms; }
.stagger > :nth-child(5) { animation-delay: 180ms; } .stagger > :nth-child(6) { animation-delay: 225ms; }
.stagger > :nth-child(n+7) { animation-delay: 270ms; }
@media (prefers-reduced-motion: reduce) { .rise, .fade, .stagger > * { animation: none; } }

/* ---- press feedback is handled in js/motion.js (Anime.js springs); only colour transitions live here ---- */
.btn, .icon-btn, .chip, .preset, .stepper button, .promo, .card.tap { transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }

/* ---- add control: "Add" pill swaps for a stepper in place (plain crossfade, same size, no layout shift) ---- */
.add-wrap { position: relative; height: 40px; width: 100%; }
.add-wrap .add, .add-wrap .mini { position: absolute; inset: 0; transition: opacity var(--dur-2) var(--ease-out); }
.add-wrap .mini { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-1); border-radius: var(--r-full);
                  background: var(--ink-900); color: var(--white); opacity: 0; pointer-events: none; }
.add-wrap.in-cart .mini { opacity: 1; pointer-events: auto; }
.add-wrap.in-cart .add { opacity: 0; pointer-events: none; }
.mini button { width: 36px; height: 36px; border: 0; border-radius: var(--r-full); background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; flex: none; }
.mini button:active { background: rgb(255 255 255 / .16); }
.mini output { flex: 1; text-align: center; font-weight: 800; font-size: var(--fs-small); min-width: 0; }

/* ---- bottom sheet with backdrop (open/close/drag release are Anime.js springs in js/sheet.js + motion.js) ---- */
.scrim { position: fixed; inset: 0; z-index: var(--z-sheet); background: rgb(15 27 51 / .45); opacity: 0; pointer-events: none;
         transition: opacity var(--dur-3) var(--ease-out); }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet { animation: none; will-change: transform; overscroll-behavior: contain; touch-action: pan-y; }
.sheet[hidden] { display: none; }
@container (min-width: 768px) {
  .sheet { inset: 0; margin: auto; height: fit-content; transform: none; }
}
body.sheet-open { overflow: hidden; }

/* ---- swipe to reveal an action (cart rows) ---- */
.swipe { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.swipe-action { position: absolute; inset: 0 0 0 auto; width: 96px; display: grid; place-items: center; background: var(--danger); color: var(--white); border: 0; font-weight: 800; }
.swipe-body { position: relative; z-index: var(--l-1); background: var(--surface); touch-action: pan-y; }
.swipe.is-removing { animation: collapse var(--dur-3) var(--ease-out) forwards; }
@keyframes collapse { to { opacity: 0; height: 0; margin: 0; transform: translateX(-30%); } }

/* ---- toast host ---- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + var(--s-6) + var(--fab-lift) + var(--safe-b)); z-index: var(--z-toast);
          display: grid; gap: var(--s-2); justify-items: center; pointer-events: none; padding: 0 var(--s-4); }
.toasts .toast { position: static; transform: none; animation: none; pointer-events: auto; display: inline-flex; gap: var(--s-2); align-items: center; }
.toast.success::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--success-100); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }
.toast .toast-action { margin-left: var(--s-2); color: var(--accent-100); font-weight: 800; text-decoration: underline; background: none; border: 0; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.96); } }
.tabbar.is-hidden ~ .toasts { bottom: calc(var(--s-6) + var(--safe-b)); }