/* Intro overlay */
#liber-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dl-color-theme-neutral-light, #000);
  transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
}
#liber-intro-overlay.liber-intro-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.liber-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.liber-intro-logo {
  width: min(180px, 40vw);
  height: auto;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
.liber-intro-logo.liber-intro-logo-visible {
  opacity: 1;
}
.liber-intro-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.liber-intro-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.8);
  transition: background 0.3s ease;
}
.liber-intro-dot.loaded {
  background: #fff;
}

/* Main content - hidden during intro, fades in after */
#liber-main-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}
#liber-main-content.liber-content-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Page switching */
[data-page] {
  display: none;
  pointer-events: none;
}
[data-page].page-active {
  display: block;
  pointer-events: auto;
  animation: liber-page-fade-in 0.3s ease-out;
}
@keyframes liber-page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}