@keyframes guide-arrive { from { opacity: 0; } }
@keyframes guide-photo-arrive { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
html[data-guide-transition]::view-transition-group(faaar-guide-photo) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
  z-index: 2;
}
html[data-guide-transition]::view-transition-image-pair(faaar-guide-photo) { isolation: isolate; overflow: clip; }
html[data-guide-transition]::view-transition-old(faaar-guide-photo),
html[data-guide-transition]::view-transition-new(faaar-guide-photo) { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
html[data-guide-transition]::view-transition-old(root),
html[data-guide-transition]::view-transition-old(faaar-guide-photo) { animation: none; opacity: 1; }
html[data-guide-transition]::view-transition-new(root) { animation: guide-arrive 240ms ease-out both; mix-blend-mode: normal; }
html[data-guide-transition]::view-transition-new(faaar-guide-photo) { animation: guide-photo-arrive 500ms linear both; }
@media (prefers-reduced-motion: reduce) {
  html[data-guide-transition]::view-transition-group(*),
  html[data-guide-transition]::view-transition-old(*),
  html[data-guide-transition]::view-transition-new(*) { animation: none !important; }
}