/* =========================================================
   ORBIT SHARED COMPONENTS
   Navigation / Mobile Navigation / Sound
   ========================================================= */

.nav-actions {
  display:flex;
  align-items:center;
  gap:14px;
}


/* MOBILE NAV */

.mobile-menu-btn {
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(231,228,234,.18);
  background:rgba(231,228,234,.04);
  color:var(--stardust);
  cursor:pointer;
  padding:0;
  position:relative;
  z-index:122;
}

.mobile-menu-btn span {
  position:absolute;
  width:20px;
  height:1.5px;
  background:currentColor;
  transition:
    transform .28s ease,
    opacity .2s ease,
    top .28s ease;
}

.mobile-menu-btn span:nth-child(1) {
  transform:translateY(-6px);
}

.mobile-menu-btn span:nth-child(3) {
  transform:translateY(6px);
}

.mobile-menu-btn.open span:nth-child(1) {
  transform:rotate(45deg);
}

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

.mobile-menu-btn.open span:nth-child(3) {
  transform:rotate(-45deg);
}

.mobile-menu-backdrop {
  position:fixed;
  inset:0;
  background:rgba(9,9,13,.62);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:115;
}

.mobile-menu-backdrop.open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.mobile-menu-sheet {
  position:fixed;
  top:0;
  right:0;
  width:min(88vw,390px);
  height:100dvh;
  padding:120px 30px 38px;
  background:
    radial-gradient(
      circle at top right,
      rgba(118,99,154,.24),
      transparent 44%
    ),
    var(--deep-space);
  border-left:1px solid rgba(231,228,234,.12);
  transform:translateX(105%);
  transition:transform .35s cubic-bezier(.22,.75,.2,1);
  z-index:118;
  display:flex;
  flex-direction:column;
}

.mobile-menu-sheet.open {
  transform:translateX(0);
}

.mobile-menu-kicker {
  color:var(--pink);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:26px;
}

.mobile-menu-links {
  display:flex;
  flex-direction:column;
}

.mobile-menu-links a {
  color:var(--stardust);
  text-decoration:none;
  font-family:var(--font-display);
  font-size:clamp(28px,8vw,40px);
  line-height:1;
  padding:16px 0;
  border-bottom:1px solid rgba(231,228,234,.1);
}

.mobile-menu-cta {
  margin-top:auto;
}

.mobile-menu-cta .btn {
  width:100%;
  justify-content:center;
}

.mobile-menu-micro {
  margin-top:14px;
  text-align:center;
  font-size:12px;
  opacity:.52;
}


/* SOUND */

.sound-toggle {
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:110;
  min-height:42px;
  padding:0 13px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(231,228,234,.16);
  background:rgba(9,9,13,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--stardust);
  cursor:pointer;
  font:inherit;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sound-toggle:hover {
  border-color:rgba(231,228,234,.32);
}

.sound-toggle.on {
  border-color:rgba(214,160,164,.45);
}

.sound-meter {
  height:15px;
  display:flex;
  align-items:center;
  gap:2px;
}

.sound-meter i {
  display:block;
  width:2px;
  height:3px;
  background:currentColor;
  opacity:.8;
  transition:height .08s linear;
}


@media (max-width:899px) {
  nav .nav-links,
  nav .nav-cta {
    display:none !important;
  }

  .mobile-menu-btn {
    display:inline-flex;
  }

  .sound-toggle {
    left:14px;
    bottom:14px;
  }
}


@media (min-width:900px) {
  .mobile-menu-backdrop,
  .mobile-menu-sheet {
    display:none !important;
  }
}

/* Active ORBIT sound state:
   keep the existing black + peach toggle treatment,
   only animate the meter in peach while sound is enabled. */
.sound-toggle.on .sound-meter i {
  background:#d6a0a4;
  opacity:1;
}