/* ─────────────────────────────────────────────
   MOKUTAN · nav.css
   Navegação principal (desktop + mobile)
   ───────────────────────────────────────────── */

/* ── NAV FIXA ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 22px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.55s cubic-bezier(0.22,1,0.36,1), border-color 0.55s cubic-bezier(0.22,1,0.36,1), padding 0.55s cubic-bezier(0.22,1,0.36,1), backdrop-filter 0.55s cubic-bezier(0.22,1,0.36,1);
  background: transparent;
  border-bottom: 1px solid transparent;
}

nav.on {
  padding: 14px 64px;
  background: rgba(14,12,9,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(244,236,217,.08);
}

/* ── LOGO ── */
.nlogo {
  text-decoration: none;
}
.nlogo-en {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  color: rgba(244,236,217,.92);
  text-transform: uppercase;
}
.nlogo-jp {
  display: block;
  font-family: var(--font-japanese);
  font-size: 0.65rem;
  color: var(--ember);
  letter-spacing: 0.18em;
}

/* ── LINKS DESKTOP ── */
.nlinks {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 38px;
}
.nlinks a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,236,217,.58);
  text-decoration: none;
  transition: color 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}
.nlinks a:hover {
  color: rgba(244,236,217,.95);
}
/* underline deslizante — entra da esquerda, sai pela direita */
.nlinks a:not(.nrsv) {
  position: relative;
}
.nlinks a:not(.nrsv)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .48s cubic-bezier(0.16,1,0.3,1);
}
.nlinks a:not(.nrsv):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nrsv {
  color: rgba(244,236,217,.95) !important;
  background: var(--ember);
  padding: 10px 22px;
  border-radius: 3px;
  border: 1.5px solid var(--ember);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background 0.28s, color 0.28s, box-shadow 0.28s, transform 0.32s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.nrsv:hover {
  background: transparent !important;
  color: var(--ember) !important;
  box-shadow: 0 4px 18px rgba(158,114,32,.2) !important;
  transform: translateY(-2px);
}


/* ── HAMBURGER ── */
.hbg {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.hbg span {
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(244,236,217,.75);
}

/* ── MOBILE MENU ── */
.mmenu {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(14,12,9,.96);
  z-index: 190;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .38s cubic-bezier(0.16,1,0.3,1), visibility .38s;
}
.mmenu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mmenu a {
  font-family: var(--font-body);
  font-size: 2.8rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(244,236,217,.75);
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition: color 0.3s, opacity .42s cubic-bezier(0.16,1,0.3,1), transform .42s cubic-bezier(0.16,1,0.3,1);
}
.mmenu.open a:nth-child(1) { opacity: 1; transform: none; transition-delay: .07s; }
.mmenu.open a:nth-child(2) { opacity: 1; transform: none; transition-delay: .13s; }
.mmenu.open a:nth-child(3) { opacity: 1; transform: none; transition-delay: .19s; }
.mmenu.open a:nth-child(4) { opacity: 1; transform: none; transition-delay: .25s; }
.mmenu a:hover {
  color: var(--ember);
}
/* link de reserva no menu mobile — destaque como CTA */
.mmenu a.mmenu-rsv {
  color: var(--ember);
  font-style: normal;
  letter-spacing: .12em;
}
.mmenu a.mmenu-rsv:hover {
  color: rgba(244,236,217,.95);
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  nav {
    padding: 20px 28px;
  }
  nav.on {
    padding: 14px 28px;
  }
  .nlinks {
    display: none;
  }
  .hbg {
    display: flex;
  }
}