/* Fade between pages across the site. Every page loads this file, because a
   cross-page transition only runs when both pages opt in. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* The fade is drawn on a layer over the page; let clicks fall through to the real
     page underneath. Chrome ignores this, so js/page-transitions.js forwards them. */
  ::view-transition { pointer-events: none; }

  /* Header and product tabs stay in place; only the page content fades. */
  .site-header { view-transition-name: site-header; }
  .product-route-nav { view-transition-name: product-tabs; }

  /* The old page starts fading the moment the swap begins (ease-out), so a click
     feels answered; the two fades overlap so the page never dips to the bare background. */
  ::view-transition-old(root) { animation: page-fade-out 240ms cubic-bezier(.2, .6, .35, 1) both; }
  ::view-transition-new(root) { animation: page-fade-in 460ms cubic-bezier(.22, .7, .3, 1) 60ms both; }
  ::view-transition-group(site-header),
  ::view-transition-group(product-tabs) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-old(product-tabs),
  ::view-transition-new(product-tabs) { animation-duration: 260ms; }

  /* The dark hero fades on its own, over the hero's navy rather than the light page,
     and a little slower so the change of page is noticeable. js/page-transitions.js
     drops the name when either hero is off screen, so it never slides across the page. */
  :is(.experience-stage, .page-hero, .detail-hero, .enquiry-confirmation) { view-transition-name: page-hero; }
  ::view-transition-group(page-hero) { background: #041b28; overflow: hidden; animation-duration: 650ms; animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
  ::view-transition-old(page-hero) { animation: page-fade-out 320ms cubic-bezier(.2, .6, .35, 1) both; }
  ::view-transition-new(page-hero) { animation: page-fade-in 650ms cubic-bezier(.22, .7, .3, 1) 140ms both; }
}

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