/* ============================================================
   NAV.CSS — Navegação + Logo SVG Animada
   ============================================================ */

/* ── Nav wrapper ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900; height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(247,244,239,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-subtle);
  transition: box-shadow .4s, border-color .4s;
}
.nav.is-scrolled {
  box-shadow: 0 2px 20px rgba(26,26,22,.06);
  border-color: var(--line);
}

/* ════════════════════════════════════════════════════════════
   LOGO SVG — slash desenha de baixo-esq para cima-dir
   Máscara entra no M pelo lado ESQUERDO (espelha o S)
   stroke-width=40 na máscara: sombra de 20px p/ cada lado
   ════════════════════════════════════════════════════════════ */
.nav__logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
}

.logo-svg-wrap {
  display: block;
  height: 61px;
  width: auto;
  overflow: visible;
}

/* S entra do canto superior-esquerdo */
.logo-S {
  animation: logoSIn .7s var(--ease-out) .05s both;
}
@keyframes logoSIn {
  from { opacity: 0; transform: translate(-6px,-6px); }
  to   { opacity: 1; transform: translate(0,0); }
}

/* M entra do canto inferior-direito */
.logo-M {
  animation: logoMIn .7s var(--ease-out) .12s both;
}
@keyframes logoMIn {
  from { opacity: 0; transform: translate(6px,6px); }
  to   { opacity: 1; transform: translate(0,0); }
}

/* Slash + máscara sincronizados */
.logo-slash line,
.slash-mask-line {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: slashDraw .65s var(--ease-out) .50s both;
}
@keyframes slashDraw {
  to { stroke-dashoffset: 0; }
}

/* Hover */
.nav__logo:hover .logo-svg-wrap {
  transform: scale(1.02);
  transition: transform .4s var(--ease-out);
}
.nav__logo:hover .logo-slash line,
.nav__logo:hover .slash-mask-line {
  stroke-dashoffset: 0;
  animation: none;
}
.nav__logo:hover .logo-slash line {
  stroke-width: 5;
  transition: stroke-width .3s;
}

/* ── Subtítulo: borda direita alinhada com borda direita do SVG ──
   SVG renderiza 76px de largura (height=61 × viewBox 185/148).
   translateX(calc(76px - 100%)) move o texto para que sua borda DIREITA
   fique exatamente em x=76px — independente do comprimento do texto.
   Ex: texto de 220px → translateX(76-220) = -144px (move à esquerda)
*/
.nav__logo-sub {
  display: block;
  white-space: nowrap;
  font-size: 0.60rem;
  font-weight: 400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--muted);
  transform: translateX(calc(76px - 100%));
  opacity: 0;
  animation: subIn .5s var(--ease-out) .9s both;
  margin-top: -20px; /* Empurra o subtítulo 50px para baixo */
  margin-left: 220px; /* Empurra o subtítulo 20px para a direita */
}
@keyframes subIn {
  from { opacity: 0; transform: translateX(calc(76px - 100%)) translateY(3px); }
  to   { opacity: 1; transform: translateX(calc(76px - 100%)) translateY(0); }
}

/* ── Links ── */
.nav__links { display: flex; align-items: center; gap: 2.2rem; }

.nav__link {
  font-size: .68rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); position: relative; padding-bottom: 2px;
  transition: color .3s;
}
.nav__link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--green);
  transition: width .35s var(--ease-out);
}
.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

/* Link da página atual — dot acima */
.nav__link.is-active::before {
  content: '';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--sage);
}

.nav__cta {
  font-size: .64rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--green); border: 1px solid var(--green);
  padding: .5rem 1.15rem;
  position: relative; overflow: hidden;
  transition: color .35s var(--ease-out);
}
.nav__cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--green); transform: scaleY(0); transform-origin: bottom;
  transition: transform .35s var(--ease-out); z-index: 0;
}
.nav__cta:hover::before { transform: scaleY(1); }
.nav__cta:hover { color: var(--cream); }
.nav__cta span { position: relative; z-index: 1; }

/* ── Hamburger ── */
.nav__hamburger {
  display: none; flex-direction: column; gap: 5px; width: 26px; padding: 4px 0;
}
.nav__hamburger span {
  display: block; height: 1px; background: var(--ink);
  transform-origin: center; transition: transform .35s var(--ease-out), opacity .35s;
}
.nav__hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile drawer ── */
.nav__drawer {
  position: fixed; inset: 0;
  background: var(--ink); z-index: 800;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-out);
}
.nav__drawer.is-open { clip-path: inset(0 0 0% 0); }

/* Logo dentro do drawer (branca) */
.nav__drawer-logo {
  position: absolute; top: calc(var(--nav-h)/2); left: var(--gutter);
  transform: translateY(-50%);
  opacity: 0; transition: opacity .4s .2s;
}
.nav__drawer.is-open .nav__drawer-logo { opacity: 1; }

.nav__drawer-links { display: flex; flex-direction: column; gap: 1.6rem; }
.nav__drawer-link {
  font-family: var(--serif); font-size: clamp(2rem, 7vw, 3.6rem);
  font-weight: 300; color: var(--cream);
  opacity: 0; transform: translateX(-16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.nav__drawer.is-open .nav__drawer-link { opacity: 1; transform: none; }
.nav__drawer.is-open .nav__drawer-link:nth-child(1) { transition-delay: .10s; }
.nav__drawer.is-open .nav__drawer-link:nth-child(2) { transition-delay: .17s; }
.nav__drawer.is-open .nav__drawer-link:nth-child(3) { transition-delay: .24s; }
.nav__drawer.is-open .nav__drawer-link:nth-child(4) { transition-delay: .31s; }
.nav__drawer.is-open .nav__drawer-link:nth-child(5) { transition-delay: .38s; }
.nav__drawer-link:hover { color: var(--sage); }

.nav__drawer-footer {
  position: absolute; bottom: var(--gutter);
  left: var(--gutter); right: var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-end;
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }
}
@media (max-width: 480px) { .nav { padding: 0 1.25rem; } }