/**
 * FDC unified route transitions — soft slide + fade with translucent veil.
 * Nav (z-index 40) stays visible; veil covers content area beneath it.
 *
 * Scroll lock applies to intranet shell pages only — NOT the public homepage (dev.html).
 */
@import url('fdc-nav-lock.css');

/* Intranet shell: document locked; .fdc-page-main / #fdc-scrollport scrolls */
html:has(body.fdc-page),
html:has(body.fdc-app-page),
html:has(body.fdc-page-solar),
html:has(body.at-login) {
  overflow: hidden !important;
  scrollbar-gutter: stable !important;
  width: 100%;
  height: 100%;
}

html:has(body.fdc-page),
html:has(body.fdc-app-page),
html:has(body.fdc-page-solar),
html:has(body.at-login),
html:has(body.fdc-page) body,
html:has(body.fdc-app-page) body,
html:has(body.fdc-page-solar) body {
  overscroll-behavior: none;
}

#fdc-route-veil {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 39;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.42s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity;
}

#fdc-route-veil.fdc-route-veil--cover {
  opacity: 1;
  pointer-events: auto;
}

#fdc-route-veil.fdc-route-veil--reveal {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.52s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Login page — veil covers full viewport (login nav is inside content stack) */
html.fdc-route-login #fdc-route-veil {
  top: 0;
}

/* Public site — full viewport veil; green nav stays above at z-40 */
html.fdc-route-public #fdc-route-veil {
  top: 0;
}

html.fdc-route-pending,
html.fdc-route-pending body {
  background-color: var(--fdc-route-bg, #0d0f1a);
}

html.fdc-route-pending .fdc-page-main,
html.fdc-route-pending .fdc-app-main,
html.fdc-route-pending #fdc-scrollport,
html.fdc-route-pending #content {
  opacity: 0;
}

/* Never hide the login form on backend.html — a stale route flag must not trap users */
html.fdc-route-pending body.at-login #login-screen {
  opacity: 1;
}

/* Shared motion on scroll roots */
.fdc-route-root {
  transition:
    opacity 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.42s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform;
}

.fdc-page-main,
.fdc-app-main,
#fdc-scrollport,
#login-screen,
#fdc-public-root {
  transition:
    opacity 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.42s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform;
}

/* Scroll roots: fade only — fixed top:41px must not translate between routes */
.fdc-page-main,
.fdc-app-main,
#fdc-scrollport {
  transition: opacity 0.42s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity;
}

.fdc-route-leave,
.fdc-page-leave {
  opacity: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

.fdc-route-enter,
.fdc-page-enter {
  opacity: 0;
  transform: none !important;
}

.fdc-route-enter-active,
.fdc-page-enter-active {
  opacity: 1 !important;
  transform: none !important;
}

/* Non-scroll roots (login, public) keep the soft slide */
#login-screen.fdc-route-leave,
#fdc-public-root.fdc-route-leave {
  transform: translateY(-6px) scale(0.997) !important;
}
#login-screen.fdc-route-enter,
#fdc-public-root.fdc-route-enter {
  transform: translateY(8px) scale(0.997);
}
#login-screen.fdc-route-enter-active,
#fdc-public-root.fdc-route-enter-active {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #fdc-route-veil,
  .fdc-route-root,
  .fdc-page-main,
  .fdc-app-main,
  #fdc-scrollport {
    transition-duration: 0.01ms !important;
  }
  .fdc-route-leave,
  .fdc-page-leave,
  .fdc-route-enter,
  .fdc-page-enter {
    transform: none !important;
  }
}