/* view_transitions.css — Grailsome Sprint 1 native-feel
 *
 * Grid → detail hero morph relies on matched view-transition-name on
 * both source (gallery card) and destination (item detail hero).
 * Each item gets a unique name `item-hero-<id>`.
 */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Customize timing for all named transitions (item-hero-* etc.) */
::view-transition-group(*) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Filter-chip changes — feed items animate in/out */
::view-transition-old(feed-grid),
::view-transition-new(feed-grid) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Theme picker swap — preview surface morphs */
::view-transition-old(theme-preview),
::view-transition-new(theme-preview) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}