/* View Transitions — served as raw CSS to bypass PostCSS/Tailwind parsing */
@media (prefers-reduced-motion: no-preference) {
  /* Push-in: list → detail (slide from right) */
  ::view-transition-old(page-content):active-view-transition-type(push-in) {
    animation: 220ms cubic-bezier(0.4, 0, 0.2, 1) both vt-slide-out-left;
  }
  ::view-transition-new(page-content):active-view-transition-type(push-in) {
    animation: 220ms cubic-bezier(0.4, 0, 0.2, 1) both vt-slide-in-right;
  }

  /* Back: reverse of push-in */
  ::view-transition-old(page-content):active-view-transition-type(push-in-back) {
    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both vt-slide-in-right reverse;
  }
  ::view-transition-new(page-content):active-view-transition-type(push-in-back) {
    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both vt-slide-out-left reverse;
  }

  /* Slide-up: home → add page (from bottom) */
  ::view-transition-old(page-content):active-view-transition-type(slide-up) {
    animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-out;
  }
  ::view-transition-new(page-content):active-view-transition-type(slide-up) {
    animation: 250ms cubic-bezier(0.4, 0, 0.2, 1) both vt-slide-in-up;
  }

  /* Cross-fade: tab switches */
  ::view-transition-old(page-content):active-view-transition-type(cross-fade) {
    animation: 150ms ease both vt-fade-out;
  }
  ::view-transition-new(page-content):active-view-transition-type(cross-fade) {
    animation: 150ms ease both vt-fade-in;
  }

  @keyframes vt-slide-out-left {
    to { opacity: 0; transform: translateX(-30%); }
  }
  @keyframes vt-slide-in-right {
    from { opacity: 0; transform: translateX(30%); }
  }
  @keyframes vt-slide-in-up {
    from { opacity: 0; transform: translateY(40%); }
  }
  @keyframes vt-fade-out {
    to { opacity: 0; }
  }
  @keyframes vt-fade-in {
    from { opacity: 0; }
  }
}