@media (prefers-reduced-motion: no-preference) {
  :root { --radar-page-shift: 12px; }
  :root[data-radar-direction="back"] { --radar-page-shift: -12px; }
  :root:has(.landing, .webapp, .auth-layout, .radar-workspace, .radar-support, main .top-l.login) {
    --radar-page-background: #111111;
  }
  ::view-transition { background: var(--radar-page-background, Canvas); }

  :is(.site-header, .app-header, .radar-header, body > header:has(.header-wrapper)) {
    view-transition-name: radar-header;
  }
  :root:not([data-auth-direction]) .auth-header { view-transition-name: radar-header; }
  :root:not([data-auth-direction]) .auth-visual { view-transition-name: radar-auth-map; }
  :root:not([data-auth-direction]) .auth-footer { view-transition-name: radar-auth-footer; }
  ::view-transition-group(radar-auth-map),
  ::view-transition-group(radar-auth-footer) { animation-duration: 260ms; }

  ::view-transition-group(root) { animation-duration: 310ms; }
  ::view-transition-old(root) {
    animation: radar-page-out 205ms cubic-bezier(.4,0,.7,1) both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    animation: radar-page-in 310ms cubic-bezier(.18,.78,.24,1) both;
    mix-blend-mode: normal;
  }
  ::view-transition-group(radar-header) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(.18,.78,.24,1);
  }
  ::view-transition-old(radar-header) {
    animation: radar-header-out 205ms ease both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(radar-header) {
    animation: radar-header-in 260ms ease both;
    mix-blend-mode: normal;
  }

  html[data-radar-arriving] body { animation: radar-header-in 260ms cubic-bezier(.18,.78,.24,1) both; }

  @keyframes radar-page-out {
    to { opacity: 0; transform: translateX(calc(var(--radar-page-shift) * -.55)); }
  }
  @keyframes radar-page-in {
    from { opacity: 0; transform: translateX(var(--radar-page-shift)); }
  }
  @keyframes radar-header-out { to { opacity: 0; } }
  @keyframes radar-header-in { from { opacity: .68; } }
}