/* Loaded only by the four signed-in client pages. Native links remain native. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  .header { view-transition-name: ftl-header; }
  [data-client-nav] { view-transition-name: ftl-nav; }
  [data-client-nav] a[aria-current=page] { view-transition-name: ftl-active-tab; }

  ::view-transition-group(*) {
    animation-duration: 180ms;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
  }
  ::view-transition-old(root) {
    animation: ftl-page-out 90ms ease-out both;
  }
  ::view-transition-new(root) {
    animation: ftl-page-in 180ms cubic-bezier(.22,1,.36,1) both;
  }
  ::view-transition-group(ftl-header),
  ::view-transition-group(ftl-nav) { animation: none; }
  ::view-transition-old(ftl-header),
  ::view-transition-old(ftl-nav) { animation: none; opacity: 0; }
  ::view-transition-new(ftl-header),
  ::view-transition-new(ftl-nav) { animation: none; }
  ::view-transition-group(ftl-active-tab) {
    animation-duration: 200ms;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
  }

  .button, button.primary, .icon-button, .walk-pill, .list-walk,
  [data-client-nav] a svg {
    transition: transform 180ms cubic-bezier(.2,1.25,.4,1);
  }
  .button:active:not(:disabled), button.primary:active:not(:disabled),
  .icon-button:active:not(:disabled), .walk-pill:active:not(:disabled),
  .list-walk:active:not(:disabled) {
    transform: scale(.98);
    transition-duration: 70ms;
  }
  [data-client-nav] a:active svg {
    transform: translateY(1px) scale(.92);
    transition-duration: 70ms;
  }
  @keyframes ftl-page-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes ftl-page-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .loader-dots i { animation: ftl-loading-dot 900ms ease-in-out infinite; }
  .loader-dots i:nth-child(2) { animation-delay: 150ms; }
  .loader-dots i:nth-child(3) { animation-delay: 300ms; }
  @keyframes ftl-loading-dot {
    0%,70%,100% { opacity: .25; }
    35% { opacity: 1; }
  }
  .notification-dialog[open] { animation: ftl-page-in 160ms cubic-bezier(.22,1,.36,1); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}