/* Only opted-in, same-origin card navigations receive a shared-element transition. */
@media (prefers-reduced-motion: no-preference) {
  html[data-card-transition]::view-transition-group(*) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  html[data-card-transition]::view-transition-old(root) {
    animation: cc-page-out 180ms ease-out both;
  }
  html[data-card-transition]::view-transition-new(root) {
    animation: cc-page-in 300ms 60ms ease-out both;
  }
  html[data-card-transition]::view-transition-group(cc-card) {
    z-index: 2;
    overflow: clip;
    border-radius: 8px;
  }
  html[data-card-transition]::view-transition-group(cc-title) { z-index: 3; }
  html[data-card-transition]::view-transition-group(cc-header) { z-index: 4; }
  html[data-card-transition]::view-transition-old(cc-card),
  html[data-card-transition]::view-transition-new(cc-card) {
    height: 100%;
    object-fit: cover;
  }
  html[data-card-transition]::view-transition-old(cc-card),
  html[data-card-transition]::view-transition-old(cc-title) {
    animation: cc-page-out 120ms ease-out both;
  }
  html[data-card-transition]::view-transition-new(cc-card),
  html[data-card-transition]::view-transition-new(cc-title) {
    animation: cc-page-in 280ms 60ms ease-out both;
  }
  html[data-card-transition]::view-transition-old(cc-title),
  html[data-card-transition]::view-transition-new(cc-title) { mix-blend-mode: normal; }
  html[data-card-transition]::view-transition-old(cc-header) { animation: none; }
  html[data-card-transition]::view-transition-new(cc-header) { animation: none; }
}

@keyframes cc-page-out { to { opacity: 0; } }
@keyframes cc-page-in { from { opacity: 0; } }

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