/* V9 motion system — three durations, one easing family, transform/opacity
   only. Laws: nothing >350ms, nothing blocks input, reduced-motion kills all.
   micro  (--v9-t-micro 120ms): hover, press, chip toggles
   std    (--v9-t-std   200ms): fades, rises, accordions, slides-in-place
   overlay(--v9-t-overlay 320ms): sheets, drawers, modals */

/* One-time first-paint rise. Apply to a page's content root on mount.
   fill-mode backwards (NOT both): a forwards fill leaves a permanent
   transform on the page, which hijacks position:fixed overlays into
   positioning against the page instead of the viewport. */
@keyframes v9-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.v9-rise { animation: v9-rise var(--v9-t-std) var(--v9-ease) backwards; }

/* Modal enter: fade + scale 0.98 -> 1 */
@keyframes v9-fade-scale {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.v9-fade-scale { animation: v9-fade-scale var(--v9-t-overlay) var(--v9-ease) both; }

/* Sheet/drawer slides — paired with [data-open] toggles, not keyframes, so
   they reverse cleanly. Transition lives on the element; these set direction. */
.v9-slide-up    { transform: translateY(100%); }
.v9-slide-left  { transform: translateX(100%); }
.v9-slide-right { transform: translateX(-100%); }
.v9-slide-up, .v9-slide-left, .v9-slide-right {
  transition: transform var(--v9-t-overlay) var(--v9-ease);
  will-change: transform;
}
.v9-slide-up[data-open="true"],
.v9-slide-left[data-open="true"],
.v9-slide-right[data-open="true"] { transform: translate(0, 0); }

/* Backdrop fade (overlays) */
.v9-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v9-t-overlay) var(--v9-ease);
}
.v9-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

/* Collapsible body — animates open/closed with no JS measurement:
   wrap content in a grid row that goes 0fr -> 1fr. Inner child needs
   min-height: 0 / overflow: hidden. */
.v9-collapse-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--v9-t-std) var(--v9-ease);
}
.v9-collapse-body > * { min-height: 0; overflow: hidden; }
details.v9-collapse[open] .v9-collapse-body,
.v9-collapse-body[data-open="true"] { grid-template-rows: 1fr; }

/* Micro feedback (hover/press) — shared by kit buttons/chips/rows */
.v9-press {
  transition:
    background-color var(--v9-t-micro) var(--v9-ease),
    border-color var(--v9-t-micro) var(--v9-ease),
    color var(--v9-t-micro) var(--v9-ease),
    transform var(--v9-t-micro) var(--v9-ease);
}
.v9-press:active { transform: scale(0.985); }

/* Stagger helper: first-paint rise for up to 8 children, 24ms apart.
   backwards fill, same containing-block rationale as .v9-rise. */
.v9-stagger > * { animation: v9-rise var(--v9-t-std) var(--v9-ease) backwards; }
.v9-stagger > :nth-child(1) { animation-delay: 0ms; }
.v9-stagger > :nth-child(2) { animation-delay: 24ms; }
.v9-stagger > :nth-child(3) { animation-delay: 48ms; }
.v9-stagger > :nth-child(4) { animation-delay: 72ms; }
.v9-stagger > :nth-child(5) { animation-delay: 96ms; }
.v9-stagger > :nth-child(6) { animation-delay: 120ms; }
.v9-stagger > :nth-child(7) { animation-delay: 144ms; }
.v9-stagger > :nth-child(8) { animation-delay: 168ms; }
.v9-stagger > :nth-child(n+9) { animation-delay: 168ms; }

/* Hero pop when the flying card lands in the dock. */
@keyframes v9-hero-pop {
  0% { transform: scale(0.965); }
  55% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.v9-hero-land { animation: v9-hero-pop 280ms var(--v9-ease); }

/* A freshly-added gallery tile holds its art hidden until the fly lands, so it
   doesn't flash in ahead of the animation. motion-flip clears .is-fly-pending. */
.card.is-fly-pending .card-art { opacity: 0; }

/* Topbar cart button bump when an add-to-cart fly lands. */
@keyframes v9-cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.v9-cart-bump { animation: v9-cart-bump 320ms var(--v9-ease); }

@media (prefers-reduced-motion: reduce) {
  .v9-rise, .v9-fade-scale, .v9-stagger > *, .v9-hero-land { animation: none; }
  .v9-slide-up, .v9-slide-left, .v9-slide-right,
  .v9-backdrop, .v9-collapse-body, .v9-press { transition: none; }
}