/* Progressive page motion for same-origin CRM navigation. */

@view-transition {
  navigation:auto;
}

.sidebar { view-transition-name:crm-sidebar; }
.topbar { view-transition-name:crm-topbar; }
.content { view-transition-name:crm-content; }

::view-transition-group(crm-sidebar),
::view-transition-group(crm-topbar),
::view-transition-group(crm-content) {
  animation-duration:340ms;
  animation-timing-function:cubic-bezier(.22,.72,.24,1);
}

::view-transition-old(crm-content) {
  animation:crm-content-exit 180ms cubic-bezier(.4,0,1,1) both;
}

::view-transition-new(crm-content) {
  animation:crm-content-enter 340ms cubic-bezier(.22,.72,.24,1) both;
}

@keyframes crm-content-enter {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

@keyframes crm-content-exit {
  from { opacity:1; transform:translateY(0); }
  to { opacity:0; transform:translateY(-4px); }
}

@supports not (view-transition-name: none) {
  .content {
    animation:crm-content-enter 340ms cubic-bezier(.22,.72,.24,1) both;
  }
}

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