:root{
  --fra-motion-fast:160ms;
  --fra-motion-base:280ms;
  --fra-motion-slow:420ms;
  --fra-motion-ease:cubic-bezier(.22,1,.36,1);
  --fra-motion-ease-soft:cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: no-preference){
  .topbar-left > div,
  #pageTitle,
  #pageSubtitle,
  .nav-item,
  .button,
  button,
  .control,
  select,
  input,
  textarea,
  .panel,
  .card,
  .metric-card,
  .stat-card,
  .summary-card,
  .table-wrap,
  .data-table,
  .command-board,
  .provider-card,
  .account-card,
  .workspace-card {
    transition:
      transform var(--fra-motion-fast) var(--fra-motion-ease-soft),
      box-shadow var(--fra-motion-base) var(--fra-motion-ease-soft),
      border-color var(--fra-motion-base) var(--fra-motion-ease-soft),
      background-color var(--fra-motion-base) var(--fra-motion-ease-soft),
      color var(--fra-motion-fast) ease,
      opacity var(--fra-motion-fast) ease;
    will-change: transform;
  }

  .nav-item{
    position:relative;
    overflow:hidden;
  }
  .nav-item::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:6px;
    height:2px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent, #b6f34a) 85%, white 15%);
    transform:scaleX(.25);
    transform-origin:left center;
    opacity:0;
    transition:transform var(--fra-motion-base) var(--fra-motion-ease), opacity 220ms ease;
  }
  .nav-item:hover{ transform:translateX(2px); }
  .nav-item:active,
  .button:active,
  button:active{
    transform:scale(.985);
  }
  .nav-item.active::after{
    transform:scaleX(1);
    opacity:1;
  }
  .nav-item.fra-nav-pulse{
    animation:fraNavPulse 340ms var(--fra-motion-ease);
  }

  .button:hover,
  button:hover,
  .control:hover,
  select:hover{
    transform:translateY(-1px);
  }

  /* Override older instant/disabled view animations */
  .view.active,
  .view.active.fra-view-enter,
  .terminal-trial .view.active,
  .terminal-trial .view.active.fra-view-enter{
    animation:none !important;
  }
  .view.fra-view-enter{
    display:block !important;
    animation:fraViewEnter var(--fra-motion-base) var(--fra-motion-ease) both !important;
  }
  .view.fra-view-enter > *{
    animation:fraViewChildren calc(var(--fra-motion-base) + 60ms) var(--fra-motion-ease) both;
  }
  .view.fra-view-enter > *:nth-child(2){ animation-delay:18ms; }
  .view.fra-view-enter > *:nth-child(3){ animation-delay:34ms; }
  .view.fra-view-enter > *:nth-child(4){ animation-delay:48ms; }
  .view.fra-view-enter > *:nth-child(n+5){ animation-delay:60ms; }

  #pageTitle.fra-title-enter,
  #pageSubtitle.fra-subtitle-enter{
    animation:fraTextUp 320ms var(--fra-motion-ease) both;
  }
  #pageSubtitle.fra-subtitle-enter{ animation-delay:22ms; }

  @supports (view-transition-name: root) {
    ::view-transition-old(root),
    ::view-transition-new(root){
      animation-duration:300ms;
      animation-timing-function:var(--fra-motion-ease);
    }
    ::view-transition-old(root){
      animation-name:fraRootOld;
    }
    ::view-transition-new(root){
      animation-name:fraRootNew;
    }
  }

  @keyframes fraViewEnter{
    from{ opacity:0; transform:translateY(14px) scale(.992); filter:saturate(.96); }
    to{ opacity:1; transform:translateY(0) scale(1); filter:saturate(1); }
  }
  @keyframes fraViewChildren{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes fraTextUp{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes fraNavPulse{
    0%{ transform:scale(.985); }
    55%{ transform:translateX(2px) scale(1.01); }
    100%{ transform:none; }
  }
  @keyframes fraRootOld{
    from{ opacity:1; transform:none; }
    to{ opacity:0; transform:translateY(-8px) scale(.995); }
  }
  @keyframes fraRootNew{
    from{ opacity:0; transform:translateY(10px) scale(.995); }
    to{ opacity:1; transform:none; }
  }
}

@media (prefers-reduced-motion: reduce){
  .nav-item,
  .button,
  button,
  .control,
  .view,
  #pageTitle,
  #pageSubtitle{ transition:none !important; animation:none !important; }
}