/* Navigation.css */

/* 1. Base drawer styles (Off-screen state) */
.nav-drawer {
  position: fixed;
  top: 50;
  left: 0;
  width: 300px; /* Adjust width as needed */
  height: 70vh;
  background-color: #020204;
  color: #d0d0f0;
  padding: 2rem;
  z-index: 4;

  /* Crucial for the transition */
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}

/* 2. On-screen state */
.nav-drawer.open {
  transform: translateX(0);
}

.back-drawer {
  height: 100vw;
  z-index: 3;
  opacity: 0.5;
}