/* The existing layout owns sidebar widths, visibility and final transforms. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: cockpit-document-out 140ms ease-out both; }
::view-transition-new(root) { animation: cockpit-document-in 180ms ease-out both; }
@keyframes cockpit-document-out { to { opacity: 0; } }
@keyframes cockpit-document-in { from { opacity: 0; } }
.cockpit-transition-pending .promotionscockpit-shell > .app-sidebar { animation: none; opacity: 0; }
.cockpit-transition-pending .promotionscockpit-shell > .app-main,
.cockpit-transition-complete .promotionscockpit-shell > .app-main { animation: none; }
.promotionscockpit-shell {
  --cockpit-entry-duration: 500ms;
  --cockpit-entry-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

.promotionscockpit-shell > .app-main {
  animation: cockpit-content-enter var(--cockpit-entry-duration) ease-out;
}

@keyframes cockpit-content-enter {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@keyframes cockpit-sidebar-enter {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: none; }
}

/* No forwards fill: collapsing the sidebar remains controlled by styles.css. */
@media (min-width: 761px) {
  .promotionscockpit-shell > .app-sidebar {
    animation: cockpit-sidebar-enter var(--cockpit-entry-duration) var(--cockpit-entry-easing);
  }
}

/* On phones the menu stays closed on arrival and slides in when requested. */
@media (max-width: 760px) {
  .promotionscockpit-shell > .app-sidebar {
    opacity: 0;
    transition:
      transform var(--cockpit-entry-duration) var(--cockpit-entry-easing),
      opacity 220ms ease-out,
      visibility 0s linear var(--cockpit-entry-duration);
  }

  .promotionscockpit-shell.is-mobile-sidebar-open > .app-sidebar {
    opacity: 1;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .promotionscockpit-shell {
    transition: none;
  }

  .promotionscockpit-shell > .app-sidebar,
  .promotionscockpit-shell > .app-main {
    animation: none;
    transition: none;
  }
}