/* ==========================================================================
   src/styles/layout.css
   Fixed Header, Fixed Desktop Sidebar, Main Workspace Container, Zen Mode,
   and Initial Application Entrance / View Switch Motion
   ========================================================================== */

@keyframes appInitialReveal {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes viewSectionEnter {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body.app-initialized #top-header {
  animation: appInitialReveal var(--motion-page) var(--ease-out-smooth);
}

.view-section:not(.hidden) {
  animation: viewSectionEnter var(--motion-page) var(--ease-out-smooth);
}

body.zen-mode {
  padding-top: 0 !important;
}

body.zen-mode #top-header,
body.zen-mode #desktop-sidebar,
body.zen-mode #mobile-bottom-nav,
body.zen-mode #reader-subtoolbar {
  display: none !important;
}

body.zen-mode #zen-exit-btn {
  display: flex !important;
  animation: viewSectionEnter var(--motion-normal) var(--ease-out-smooth);
}

/* Smooth Sidebar Drawer & Mobile Backdrop Transitions */
#desktop-sidebar {
  transition: transform var(--motion-drawer) var(--ease-out-smooth),
              background-color var(--motion-normal) var(--ease-in-out-soft),
              border-color var(--motion-normal) var(--ease-in-out-soft);
}

#sidebar-backdrop {
  transition: opacity var(--motion-drawer) var(--ease-in-out-soft),
              visibility var(--motion-drawer) var(--ease-in-out-soft);
  opacity: 1;
  visibility: visible;
}

#sidebar-backdrop.hidden {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Fixed Sidebar & Main Workspace Synchronization on Desktop (RTL) */
@media (min-width: 1024px) {
  #desktop-sidebar {
    position: fixed !important;
    top: 4rem !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100vh - 4rem) !important;
    width: 20rem !important;
    z-index: 30 !important;
    transform: translateX(0) !important;
  }
  body.sidebar-closed-desktop #desktop-sidebar {
    transform: translateX(100%) !important;
  }
  #main-content-area {
    margin-right: 20rem;
    transition: margin-right var(--motion-drawer) var(--ease-out-smooth);
  }
  body.sidebar-closed-desktop #main-content-area,
  body.zen-mode #main-content-area {
    margin-right: 0 !important;
  }
}