/* Progressive motion: content stays visible when this enhancement is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  html {
    scroll-behavior: smooth;
    view-transition-name: none;
  }

  main {
    view-transition-name: page-content;
  }

  .site-brand {
    view-transition-name: site-brand;
  }

  /* Keep navigation above the content capture without animating header geometry. */
  .site-header {
    view-transition-name: site-header;
  }

  ::view-transition-group(page-content),
  ::view-transition-group(site-header),
  ::view-transition-group(site-brand) {
    animation: none;
  }

  ::view-transition-image-pair(page-content) {
    isolation: isolate;
  }

  ::view-transition-old(page-content) {
    animation: site-content-out 220ms ease-out both;
    mix-blend-mode: normal;
  }

  ::view-transition-new(page-content) {
    animation: site-content-in 420ms cubic-bezier(.22, 1, .36, 1) both;
    mix-blend-mode: normal;
  }

  ::view-transition-old(site-header),
  ::view-transition-old(site-brand) {
    display: none;
  }

  ::view-transition-new(site-header),
  ::view-transition-new(site-brand) {
    animation: none;
  }

  main.is-page-entering {
    animation: site-content-in 420ms cubic-bezier(.22, 1, .36, 1) backwards;
  }

  .has-reveal-motion [data-reveal] {
    transition: opacity 700ms cubic-bezier(.22, 1, .36, 1),
      transform 700ms cubic-bezier(.22, 1, .36, 1);
  }

  .has-reveal-motion [data-reveal].is-reveal-pending {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes site-content-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes site-content-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  main.is-page-entering {
    animation: none;
  }

  .has-reveal-motion [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}