/* ============================================
   Page Transition Overlay
   ============================================ */

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  pointer-events: none;
}

.transition-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--color-accent-deep);
}

.transition-panel--top {
  top: 0;
  transform: translateY(-100%);
}

.transition-panel--bottom {
  bottom: 0;
  transform: translateY(100%);
}

/* Active state: panels cover the screen (initial on page load) */
.transition-overlay--active .transition-panel--top {
  transform: translateY(0);
}

.transition-overlay--active .transition-panel--bottom {
  transform: translateY(0);
}

.transition-overlay--active {
  pointer-events: all;
}