:root {
  --staffhub-transition-duration: 220ms;
  --staffhub-transition-blur: 8px;
  --staffhub-transition-scale: .996;
  --staffhub-transition-backdrop: rgba(15, 23, 42, .18);
}

html.staffhub-transition-active body > :not(#staffhubPageTransition):not(script):not(style):not(link):not(template) {
  transition:
    opacity var(--staffhub-transition-duration) ease,
    filter var(--staffhub-transition-duration) ease,
    transform var(--staffhub-transition-duration) ease;
  will-change: opacity, filter, transform;
}

html.staffhub-transition-entering body > :not(#staffhubPageTransition):not(script):not(style):not(link):not(template),
html.staffhub-transition-leaving body > :not(#staffhubPageTransition):not(script):not(style):not(link):not(template) {
  opacity: .56;
  filter: blur(var(--staffhub-transition-blur));
  transform: scale(var(--staffhub-transition-scale));
}

#staffhubPageTransition {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--staffhub-transition-backdrop);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

html.staffhub-transition-loading #staffhubPageTransition {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.staffhub-transition-modal {
  min-width: 176px;
  max-width: min(320px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px 24px;
  border: 1px solid var(--staffhub-line, var(--tm-line, var(--line, rgba(148, 163, 184, .35))));
  border-radius: 16px;
  background: var(--staffhub-panel, var(--tm-panel, var(--panel, #ffffff)));
  color: var(--staffhub-on-panel, var(--tm-ink, var(--ink, #111827)));
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  font: 800 14px/1.2 Arial, Helvetica, sans-serif;
  text-align: center;
}

.staffhub-transition-spinner {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 4px solid rgba(245, 158, 11, .18);
  border-top-color: var(--staffhub-accent, var(--tm-orange, var(--accent, #f59e0b)));
  animation: staffhubTransitionSpin 800ms linear infinite;
}

.staffhub-transition-label {
  color: inherit;
}

html.staff-theme-dark #staffhubPageTransition,
html.staffhub-theme-dark #staffhubPageTransition {
  --staffhub-transition-backdrop: rgba(2, 6, 23, .45);
}

html.staff-theme-dark .staffhub-transition-modal,
html.staffhub-theme-dark .staffhub-transition-modal {
  background: var(--staffhub-panel, #1f2937);
  color: var(--staffhub-on-panel, #f8fafc);
  border-color: rgba(255, 255, 255, .16);
}

@keyframes staffhubTransitionSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.staffhub-transition-active body > :not(#staffhubPageTransition):not(script):not(style):not(link):not(template) {
    transition: opacity 80ms linear;
  }

  html.staffhub-transition-entering body > :not(#staffhubPageTransition):not(script):not(style):not(link):not(template),
  html.staffhub-transition-leaving body > :not(#staffhubPageTransition):not(script):not(style):not(link):not(template) {
    opacity: .78;
    filter: none;
    transform: none;
  }

  #staffhubPageTransition {
    transition: opacity 80ms linear;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .staffhub-transition-spinner {
    animation: none;
  }
}