.grid-wrapper {
  background: #1a1a1a;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] .grid-wrapper {
  grid-template-rows: 1fr;
}

.nav-links {
  list-style: none;
  min-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
}

.nav-links li {
  opacity: 0;
  padding: 1rem 0;
  transform: translateY(15px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  transition-delay: calc(var(--i) * 0.08s);
}

details[open] .nav-links li {
  opacity: 1;
  transform: translateY(0);
}

details[open] .bar {
  background: transparent;
}

details[open] .bar::before {
  top: 0;
  transform: rotate(45deg);
}

details[open] .bar::after {
  top: 0;
  transform: rotate(-45deg);
}

.grid-wrapper,
.nav-links li {
  transform: none !important;
  transition: none !important;
}