/* ══════════════════════════════════════
   GORA — menu.css
══════════════════════════════════════ */

#menu-trigger {
  position: fixed;
  top: 2rem;
  right: 2rem;

  width: 140px;
  height: 140px;

  z-index: 99999;

  cursor: pointer;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

#menu-trigger.open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

#menu-trigger span {
  display: block;

  width: 18px;
  height: 1px;

  background: rgba(255, 255, 255, 0.5);

  transition: all 0.3s ease;
}

#menu-trigger:hover span {
  background: #fff;
}

#menu-trigger.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  background: #fff;
}

#menu-trigger.open span:nth-child(2) {
  opacity: 0;
}

#menu-trigger.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background: #fff;
}

#menu-sketch {
  width: 140px;
  height: 140px;
}

#menu-sketch canvas {
  position: relative !important;
  inset: unset !important;
  top: unset !important;
  left: unset !important;

  width: 100% !important;
  height: 100% !important;

  display: block;

  background: transparent !important;
}

#menu-overlay {
  position: fixed;

  top: 4rem;
  right: 2rem;

  width: auto;
  height: auto;

  z-index: 99998;

  background: transparent;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.35s ease;
}

#menu-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#menu-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  min-width: 280px;

  gap: 0.6rem;
  text-align: right;
}

.menu-link {
  display: flex;

  justify-content: flex-end;
  align-items: center;

  width: 100%;

  padding: 8px 0;

  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(0.7rem, 1.4vw, 1.1rem);

  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #c1111e !important;
  text-decoration: none !important;

  cursor: pointer;

  opacity: 0;
  transform: translateX(10px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.menu-link:hover,
.menu-link:visited,
.menu-link:focus {
  color: #c1111e !important;
  text-decoration: none !important;
}

#menu-overlay.open .menu-link:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.03s;
}

#menu-overlay.open .menu-link:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.08s;
}

#menu-overlay.open .menu-link:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.13s;
}

#menu-overlay.open .menu-link:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.18s;
}

#menu-overlay.open .menu-link:nth-child(5) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.23s;
}

@media (max-width: 768px) {
  #menu-trigger {
    top: 1rem;
    right: 1rem;

    width: 95px;
    height: 95px;
  }

  #menu-sketch {
    width: 95px;
    height: 95px;
  }

  #menu-overlay {
    top: 3.2rem;
    right: 1rem;
  }

  #menu-links {
    min-width: 210px;
  }
}