/* navigation: auto removed — router.js handles transitions via startViewTransition() */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}

::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vt-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ── Shared-element morph timing ─────────────────────────────── */
/* Applies to listing, agent, team-logo transitions */
::view-transition-group(*) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Root keeps its own timing (override the wildcard) */
::view-transition-group(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Lightbox shared-element morph (open/close) + cross-fade (prev/next) */
::view-transition-group(lightbox-img) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

::view-transition-old(lightbox-img),
::view-transition-new(lightbox-img) {
  animation-duration: 200ms;
  animation-timing-function: ease;
}

/* ── Directional slides ──────────────────────────────────────── */
@keyframes slide-out-left {
  to { opacity: 0; transform: translateX(-30px); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
}
@keyframes slide-out-right {
  to { opacity: 0; transform: translateX(30px); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
}

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) { animation-name: slide-out-left; }
  &::view-transition-new(root) { animation-name: slide-in-right; }
}

html:active-view-transition-type(backwards) {
  &::view-transition-old(root) { animation-name: slide-out-right; }
  &::view-transition-new(root) { animation-name: slide-in-left; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s !important;
  }
}