/* ============================================================
   transitions.css — two-panel curtain wipe between pages
   Panels cover content area only; sidebar stays visible
   ============================================================ */

/* ── PANELS ──────────────────────────────────────────────── */
.transition-panel {
  position: fixed;
  left: var(--sidebar-width);
  right: 0;
  height: 50vh;
  background: rgba(255, 253, 235, 0.7);  /* warm white curtain */
  z-index: 150;                           /* above content (0), below sidebar (100) */
  pointer-events: none;
  will-change: transform;
}

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

/* ── PANELS IN (curtains close over old page) ────────────── */
.transition-panel--top.panel-enter {
  animation: panel-top-in var(--t-slow) var(--ease-in-out) forwards;
}
.transition-panel--bottom.panel-enter {
  animation: panel-bottom-in var(--t-slow) var(--ease-in-out) forwards;
}

/* ── PANELS OUT (curtains open to reveal new page) ───────── */
.transition-panel--top.panel-exit {
  transform: translateY(0);
  animation: panel-top-out var(--t-slow) var(--ease-in-out) forwards;
}
.transition-panel--bottom.panel-exit {
  transform: translateY(0);
  animation: panel-bottom-out var(--t-slow) var(--ease-in-out) forwards;
}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes panel-top-in     { from { transform: translateY(-100%); } to { transform: translateY(0);     } }
@keyframes panel-bottom-in  { from { transform: translateY(100%);  } to { transform: translateY(0);     } }
@keyframes panel-top-out    { from { transform: translateY(0);     } to { transform: translateY(-100%); } }
@keyframes panel-bottom-out { from { transform: translateY(0);     } to { transform: translateY(100%);  } }

/* ── MOBILE — panels span full width ────────────────────── */
@media (max-width: 768px) {
  .transition-panel { left: 0; }
}