/* ============================================================
   MAVELA AI — shared futuristic navigation
   ============================================================ */

.nav-trigger{
  position:fixed;
  top:24px;
  right:clamp(20px,5vw,64px);
  width:58px;
  height:58px;
  z-index:60;
  background:rgba(4,5,8,0.4);
  border:1px solid rgba(245,244,240,0.18);
  border-radius:50%;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  padding:0;
  box-shadow:0 4px 20px rgba(0,0,0,0.35);
  transition:border-color .25s ease, background .25s ease;
}

.nav-trigger:hover{
  border-color:rgba(245,244,240,0.4);
  background:rgba(4,5,8,0.6);
}

.nav-trigger-rings{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.nav-trigger-rings circle{
  fill:none;
  stroke:rgba(245,244,240,0.65);
  stroke-width:1.3;
}

.nt-outer{
  transform-origin:30px 30px;
  animation:navSpinCW 16s linear infinite;
}

.nt-inner{
  stroke-dasharray:3 5;
  transform-origin:30px 30px;
  animation:navSpinCCW 9s linear infinite;
}

.nav-trigger-bars{
  position:absolute;
  top:50%;
  left:50%;
  width:20px;
  height:15px;
  transform:translate(-50%,-50%);
}

.nav-trigger-bars i{
  position:absolute;
  left:0;
  width:100%;
  height:1.6px;
  background:var(--fg);
  transition:transform .35s cubic-bezier(.16,1,.3,1), top .35s ease;
}

.nav-trigger-bars i:nth-child(1){ top:2px; }
.nav-trigger-bars i:nth-child(2){ top:12px; }

.nav-trigger.is-open .nav-trigger-bars i:nth-child(1){ top:7px; transform:rotate(45deg); }
.nav-trigger.is-open .nav-trigger-bars i:nth-child(2){ top:7px; transform:rotate(-45deg); }

.nav-overlay{
  position:fixed;
  inset:0;
  z-index:55;
  background:rgba(4,5,8,0.8);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}

.nav-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.nav-nodes{
  position:absolute;
  top:112px;
  right:clamp(20px,5vw,64px);
  display:flex;
  flex-direction:column;
  gap:30px;
  align-items:flex-end;
}

.nav-nodes::before{
  content:'';
  position:absolute;
  left:-22px;
  top:4px;
  bottom:4px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(245,244,240,.45), transparent);
  overflow:hidden;
}

.nav-nodes::after{
  content:'';
  position:absolute;
  left:-23px;
  top:0;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--fg);
  box-shadow:0 0 8px 2px rgba(245,244,240,.7);
  opacity:0;
}

.nav-overlay.open .nav-nodes::after{
  animation:navPulseTravel 2.6s ease-in-out .5s infinite;
}

.nav-node{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  opacity:0;
  transform:translateX(28px);
  transition:opacity .5s ease, transform .5s ease;
}

.nav-overlay.open .nav-node{ opacity:1; transform:translateX(0); }
.nav-overlay.open .nav-node:nth-child(1){ transition-delay:.1s; }
.nav-overlay.open .nav-node:nth-child(2){ transition-delay:.18s; }
.nav-overlay.open .nav-node:nth-child(3){ transition-delay:.26s; }
.nav-overlay.open .nav-node:nth-child(4){ transition-delay:.34s; }

.nav-node-ring{
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid rgba(245,244,240,.5);
  transition:background .25s ease, box-shadow .25s ease;
  flex-shrink:0;
}

.nav-node:hover .nav-node-ring,
.nav-node:focus-visible .nav-node-ring,
.nav-node.active .nav-node-ring{
  background:var(--fg);
  box-shadow:0 0 10px 3px rgba(245,244,240,.55);
}

.nav-node-text{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
}

.nav-node-label{
  font-family:'JetBrains Mono', monospace;
  font-size:16px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--fg);
}

.nav-node-code{
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  letter-spacing:.05em;
  color:var(--muted);
}

@keyframes navSpinCW{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes navSpinCCW{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
@keyframes navPulseTravel{
  0%{ top:0; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}

@media (max-width:640px){
  .nav-trigger{ top:18px; width:50px; height:50px; }
  .nav-nodes{ top:88px; }
  .nav-node-label{ font-size:14px; }
}