@keyframes collection-page-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes collection-card-depart { to { opacity: 0; } }
.collection-carried-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
html[data-collection-transition] #collection { background: #f2f0e9; }
html[data-collection-transition]::view-transition-group(faaar-collection-card),
html[data-collection-transition]::view-transition-group(faaar-collection-photo) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}
html[data-collection-transition="closing"]::view-transition-group(faaar-collection-card),
html[data-collection-transition="closing"]::view-transition-group(faaar-collection-photo) { animation-duration: 440ms; }
html[data-collection-transition]::view-transition-group(faaar-collection-card) { z-index: 1; }
html[data-collection-transition]::view-transition-group(faaar-collection-photo) { z-index: 2; }
html[data-collection-transition]::view-transition-image-pair(faaar-collection-card),
html[data-collection-transition]::view-transition-image-pair(faaar-collection-photo) { isolation: isolate; overflow: clip; }
html[data-collection-transition]::view-transition-old(faaar-collection-card),
html[data-collection-transition]::view-transition-new(faaar-collection-card),
html[data-collection-transition]::view-transition-old(faaar-collection-photo),
html[data-collection-transition]::view-transition-new(faaar-collection-photo) { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
/* Keep an opaque outgoing page and photo underneath; never fade through white. */
html[data-collection-transition]::view-transition-old(root),
html[data-collection-transition]::view-transition-old(faaar-collection-photo) { animation: none; opacity: 1; }
html[data-collection-transition]::view-transition-new(root) { animation: collection-page-arrive 220ms 100ms ease-out both; mix-blend-mode: normal; }
html[data-collection-transition]::view-transition-old(faaar-collection-card) { animation: collection-card-depart 180ms ease-out both; }
html[data-collection-transition]::view-transition-new(faaar-collection-card) { animation: collection-page-arrive 260ms 80ms ease-out both; }
html[data-collection-transition]::view-transition-new(faaar-collection-photo) { animation: collection-page-arrive 220ms 240ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  html[data-collection-transition]::view-transition-group(*),
  html[data-collection-transition]::view-transition-old(*),
  html[data-collection-transition]::view-transition-new(*) { animation: none !important; }
}