/* =============================================================================
   motion.css — page-to-page transitions
   Progressive enhancement: browsers without View Transitions support just
   navigate normally. @supports also shields older/forked Chromium engines.
   ============================================================================= */

@supports (view-transition-name: none) {

  @view-transition {
    navigation: auto;
  }

  /* Persistent chrome across pages.
     Exists on every page via templates/menu/menu.html, bandeau-sitewide.html, footer.html. */
  #menuContainer    { view-transition-name: menu-bar; }
  .bandeau-sitewide { view-transition-name: site-bandeau; }
  #logo-white       { view-transition-name: revo-logo-white; }
  #logo-blue        { view-transition-name: revo-logo-blue; }
  footer            { view-transition-name: site-footer; }

  /* Root transition: OLD stays fully opaque (animation: none overrides the UA
     fade-out), NEW fades in on top. Per spec, new paints above old, so keeping
     one layer at opacity 1 throughout guarantees no html/body bleed-through. */
  ::view-transition,
  ::view-transition-group(root),
  ::view-transition-image-pair(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    background: var(--color-black, #04082d);
  }
  ::view-transition-image-pair(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    display: block;
    width: 100%;
    height: 100%;
    mix-blend-mode: normal;
  }
  ::view-transition-image-pair(root) {
    isolation: auto;
  }
  ::view-transition-old(root) {
    animation: none;
  }
  ::view-transition-new(root) {
    animation-name: revo-fade-in;
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
  }
  @keyframes revo-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Persistent chrome: same content + position across pages, so a short
     crossfade feels invisible but smooths out state swaps like logo white↔blue. */
  ::view-transition-old(menu-bar),
  ::view-transition-new(menu-bar),
  ::view-transition-old(site-bandeau),
  ::view-transition-new(site-bandeau),
  ::view-transition-old(site-footer),
  ::view-transition-new(site-footer) {
    animation-duration: 220ms;
  }

  /* Users who opted out of motion get an effectively instant transition. */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(menu-bar),
    ::view-transition-new(menu-bar),
    ::view-transition-old(site-bandeau),
    ::view-transition-new(site-bandeau),
    ::view-transition-old(site-footer),
    ::view-transition-new(site-footer) {
      animation-duration: 1ms;
      animation-delay: 0ms;
    }
  }
}