@media (prefers-reduced-motion: no-preference) {
  :root {
    --page-fade-duration: 450ms;
  }

  :root:active-view-transition .header__nav {
    view-transition-name: page-navigation;
    background-color: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :root:active-view-transition .header__nav::before,
  :root:active-view-transition .header__nav .button_header {
    transition: none;
  }

  :root:active-view-transition .header__icon {
    view-transition-name: page-logo;
    position: fixed;
    top: var(--header-logo-top);
    left: var(--Pg);
    color: #000;
    mix-blend-mode: normal;
    opacity: 1;
    transition: none;
  }

  :root:active-view-transition .header__icon svg path {
    fill: currentColor;
  }

  :root:active-view-transition :is(.header-logo-frost, .header-logo-ink) {
    visibility: hidden;
  }

  ::view-transition-group(root),
  ::view-transition-group(page-navigation),
  ::view-transition-group(page-logo),
  ::view-transition-new(page-navigation),
  ::view-transition-new(page-logo) {
    animation: none;
  }

  ::view-transition-group(page-navigation) {
    z-index: 1;
  }

  ::view-transition-group(page-logo) {
    z-index: 2;
  }

  ::view-transition-new(page-navigation),
  ::view-transition-new(page-logo) {
    mix-blend-mode: normal;
  }

  ::view-transition-old(page-navigation),
  ::view-transition-old(page-logo) {
    display: none;
  }

  ::view-transition-old(root) {
    animation: page-fade-out var(--page-fade-duration) ease-in-out both;
  }

  ::view-transition-new(root) {
    animation: page-fade-in var(--page-fade-duration) ease-in-out var(--page-fade-duration) both;
  }

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

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