/* Same-origin MPA opt-in only. Link this file to editorial pages, never forms/admin.
   Unsupported engines ignore @view-transition and retain ordinary navigation. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  :root { --page-fade-duration: 320ms; }
  .site-header { view-transition-name: opale-header; }
  ::view-transition { pointer-events: none; }

  /* No geometry interpolation, zoom, slide or cloned interactive page layer. */
  ::view-transition-group(root), ::view-transition-group(opale-header) { animation: none; }
  ::view-transition-image-pair(root) { isolation: isolate; }
  ::view-transition-old(root), ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation-duration: var(--page-fade-duration);
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
    animation-fill-mode: both;
  }
  ::view-transition-old(root) { animation-name: opale-page-out; }
  ::view-transition-new(root) { animation-name: opale-page-in; }

  /* The header is a single named element. Its destination state appears directly. */
  ::view-transition-old(opale-header) { display: none; animation: none; }
  ::view-transition-new(opale-header) { animation: none; mix-blend-mode: normal; }
  @media (max-width: 780px) { :root { --page-fade-duration: 220ms; } }
}
@keyframes opale-page-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes opale-page-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .site-header { view-transition-name: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  @view-transition { navigation: none; }
  .site-header { view-transition-name: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}