/* Webworks page transitions (Chrome, Edge, Safari 18.2+; others just navigate).
   Loaded in <head> on every page when page transitions are on in the customiser. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Quick fade out, short delay, fade in */
::view-transition-old(root) { animation: 120ms cubic-bezier(0.4, 0, 1, 1) both wwcc-vt-out; }
::view-transition-new(root) { animation: 220ms cubic-bezier(0, 0, 0.2, 1) 60ms both wwcc-vt-in; }
::view-transition-group(wwcc-header) { animation-duration: 220ms; }
@keyframes wwcc-vt-out { to { opacity: 0; } }
@keyframes wwcc-vt-in { from { opacity: 0; } }

/* Card image <-> hero image.
   The old image stays solid underneath while the new one fades in on top, so a hero still loading
   shows the card's image rather than a gap. Both fill the moving box (no stretching between aspect ratios). */
::view-transition-group(wwcc-hero-image) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-image-pair(wwcc-hero-image) { border-radius: 12px; overflow: hidden; }
::view-transition-old(wwcc-hero-image),
::view-transition-new(wwcc-hero-image) { width: 100%; height: 100%; object-fit: cover; }
::view-transition-old(wwcc-hero-image) { animation: none; opacity: 1; }
::view-transition-new(wwcc-hero-image) { animation: 220ms ease-out 120ms both wwcc-vt-in; }

/* No partner on the other page (a card with no marked image, or one that's off screen): the image would
   otherwise sit solid over the incoming page, so fade it with the page instead. */
::view-transition-old(wwcc-hero-image):only-child { animation: 120ms cubic-bezier(0.4, 0, 1, 1) both wwcc-vt-out; }
::view-transition-new(wwcc-hero-image):only-child { animation: 220ms cubic-bezier(0, 0, 0.2, 1) 60ms both wwcc-vt-in; }