/* ===========================================================
   NAVBAR — barra full-width minimalista
   Fold 1 (Hero): transparente, sem borda, só logo + links.
   Ao entrar na 2ª dobra ela "se transforma": ganha fundo de
   vidro escuro, um fio na base, encolhe um tico e revela o CTA.
   O estado transformado é a classe .is-scrolled (scripts inline
   no index alternam ela conforme o scroll).
   =========================================================== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  border-bottom:1px solid transparent;
  transition:background .45s ease, border-color .45s ease,
             backdrop-filter .45s ease;
}

.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  max-width:1680px;
  margin-inline:auto;
  padding:22px clamp(20px,5vw,64px);
  transition:padding .45s ease;
}

/* ---------- logo ---------- */
.nav__logo{
  font-size:16px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--cream);
  text-decoration:none;
  white-space:nowrap;
}
.nav__logo:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px;}

/* ---------- links ---------- */
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(20px,2.4vw,38px);
}
.nav__links a{
  font-size:14px;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--cream-50);
  text-decoration:none;
  transition:color .2s ease;
}
.nav__links a:hover{color:var(--cream);}
.nav__links a:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px;color:var(--cream);}

/* ---------- CTA (aparece só no estado transformado) ---------- */
.nav__cta{
  flex-shrink:0;
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--black);
  background:var(--cream);
  padding:9px 18px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;

  /* nasce escondido e deslizando de leve pra direita */
  opacity:0;
  transform:translateX(10px);
  pointer-events:none;
  transition:opacity .4s ease, transform .4s ease, background .2s ease;
}
.nav__cta:hover{background:var(--red-edge);color:var(--cream);}
.nav__cta:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* botão de menu — só no mobile */
.nav__menu{
  display:none;
  flex-shrink:0;
  width:40px;height:34px;
  border:1px solid var(--cream-30);
  border-radius:9px;
  background:transparent;
  color:var(--cream);
  align-items:center;justify-content:center;
  cursor:pointer;
}

/* -----------------------------------------------------------
   ÍCONE DO MENU — três pontos que viram X

   Antes isso era o caractere "•••" trocado por "×" no JavaScript.
   Glifo de fonte não centra: o × do Archivo tem métrica própria e
   sentava alto e à esquerda dentro do botão, e não havia
   line-height que resolvesse. Agora são três elementos posicionados
   por geometria, então o cruzamento cai no centro exato do botão
   sempre, em qualquer tamanho.
   ----------------------------------------------------------- */
.nav__menu__icon{
  position:relative;
  display:block;
  width:20px;height:20px;
}
.nav__menu__icon i{
  position:absolute;
  top:50%;left:50%;
  width:4px;height:4px;
  margin:-2px 0 0 -2px;      /* o ponto nasce centrado, e só então desloca */
  border-radius:999px;
  background:currentColor;
  transition:
    translate .5s var(--ease-in-cine),
    width .5s var(--ease-in-cine),
    rotate .5s var(--ease-in-cine),
    opacity .3s ease,
    scale .3s ease;
}
.nav__menu__icon i:nth-child(1){translate:-7px 0;}
.nav__menu__icon i:nth-child(3){translate:7px 0;}

/* Aberto: o ponto do meio some e os outros dois esticam e giram até
   formar o X. O translate volta a zero, então as duas barras cruzam
   exatamente no centro. */
.is-menu-open .nav__menu__icon i:nth-child(1){
  translate:0 0;width:19px;margin-left:-9.5px;rotate:45deg;
}
.is-menu-open .nav__menu__icon i:nth-child(2){opacity:0;scale:.2;}
.is-menu-open .nav__menu__icon i:nth-child(3){
  translate:0 0;width:19px;margin-left:-9.5px;rotate:-45deg;
}
.nav__menu:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* -----------------------------------------------------------
   ESTADO TRANSFORMADO — entrando na 2ª dobra
   ----------------------------------------------------------- */
.site-header.is-scrolled{
  background:linear-gradient(
    180deg,
    rgba(8,3,3,.82),
    rgba(3,1,1,.72)
  );
  border-bottom-color:var(--cream-10);
  backdrop-filter:blur(16px) saturate(120%) brightness(.85);
  -webkit-backdrop-filter:blur(16px) saturate(120%) brightness(.85);
}

/* a barra encolhe um tico — reforça a sensação de "compactou" */
.site-header.is-scrolled .nav{padding-top:14px;padding-bottom:14px;}

/* o CTA entra */
.site-header.is-scrolled .nav__cta{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* -----------------------------------------------------------
   MOBILE
   ----------------------------------------------------------- */
@media (max-width:767px){
  .nav__cta{display:none;}
  .nav__menu{display:flex;}

  .nav__links{
    position:fixed;
    z-index:1;
    inset:0;
    width:100vw;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:clamp(150px,19vh,190px) clamp(36px,7vw,54px) 52px;
    border:0;
    background:
      radial-gradient(circle at 100% 100%,rgba(224,31,46,.12),transparent 38%),
      #030101;
    box-shadow:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-18px) scale(.985);
    transform-origin:top center;
    transition:
      opacity .34s ease,
      transform .48s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .48s;
  }

  .nav__menu{
    width:56px;height:56px;border-radius:18px;
    background:rgba(250,247,243,.035);
    transition:border-color .25s ease,background .25s ease,transform .25s ease;
  }
  .nav__menu__icon{width:24px;height:24px;}
  .nav__menu__icon i{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;}
  .nav__menu__icon i:nth-child(1){translate:-8px 0;}
  .nav__menu__icon i:nth-child(3){translate:8px 0;}
  .is-menu-open .nav__menu__icon i:nth-child(1),
  .is-menu-open .nav__menu__icon i:nth-child(3){width:23px;margin-left:-11.5px;height:2px;margin-top:-1px;border-radius:2px;}
  .site-header.is-menu-open .nav__menu{
    border-color:rgba(224,31,46,.65);
    background:rgba(224,31,46,.12);
    transform:scale(1.04);
  }

  .site-header.is-menu-open{
    background:transparent;
    border-bottom-color:transparent;
  }
  .site-header.is-menu-open .nav__logo,
  .site-header.is-menu-open .nav__menu{position:relative;z-index:2;}
  .site-header.is-menu-open .nav__links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    transition-delay:0s;
  }
  /* Os links entram em cascata depois do painel, não junto com ele.
     Junto, o menu inteiro pisca de uma vez e some a sensação de que
     alguma coisa abriu. Cada link espera o anterior. */
  .nav__links a{
    opacity:0;
    translate:0 26px;
    transition:opacity .5s ease, translate .6s var(--ease-in-cine);
    transition-delay:0s;
  }
  .site-header.is-menu-open .nav__links a{
    display:block;
    padding:clamp(12px,2.2vh,20px) 0;border-bottom:0;
    border-radius:0;color:var(--cream);
    font-size:clamp(44px,12vw,64px);font-weight:700;
    letter-spacing:-.055em;line-height:.98;
    opacity:1;
    translate:0 0;
  }
  .site-header.is-menu-open .nav__links a:nth-child(1){transition-delay:.14s;}
  .site-header.is-menu-open .nav__links a:nth-child(2){transition-delay:.20s;}
  .site-header.is-menu-open .nav__links a:nth-child(3){transition-delay:.26s;}
  .site-header.is-menu-open .nav__links a:nth-child(4){transition-delay:.32s;}
  .site-header.is-menu-open .nav__links a:nth-child(5){transition-delay:.38s;}

  /* Fechando, todos saem juntos e rápido. Cascata na saída lê como
     travamento, porque a pessoa já decidiu ir embora. */
  .nav__links a{transition-duration:.22s;}
  .site-header.is-menu-open .nav__links a{transition-duration:.5s,.6s;}
  .site-header.is-menu-open .nav__links a::after{
    content:"";
  }
  .site-header.is-menu-open .nav__links a:hover{background:transparent;color:var(--red-edge);}
}

body.is-menu-visible{overflow:hidden;}

/* Transição entre rotas e âncoras: só fade + blur, sem wipe ou slide. */
.page-transition{
  position:fixed;z-index:9999;inset:0;pointer-events:none;
  background:rgba(3,1,1,.72);
  opacity:0;
  visibility:hidden;
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  transition:
    opacity .76s cubic-bezier(.16,1,.3,1),
    backdrop-filter .76s cubic-bezier(.16,1,.3,1),
    -webkit-backdrop-filter .76s cubic-bezier(.16,1,.3,1),
    visibility 0s linear .76s;
}
.page-transition.is-active{
  opacity:1;
  visibility:visible;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transition-duration:.62s,.62s,.62s,0s;
  transition-timing-function:cubic-bezier(.65,0,.35,1);
  transition-delay:0s;
}

/* Variante curta, pra âncora dentro da própria página.
   Trocar de página justifica cortina longa, porque ela está mascarando
   um carregamento de verdade. Pular pra uma seção não carrega nada, e
   com 620ms a pessoa sente que o clique travou. Aqui é quase um piscar,
   só o suficiente pra esconder o salto do scroll. */
.page-transition--quick.is-active{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition-duration:.26s,.26s,.26s,0s;
}
.page-transition--quick{
  transition-duration:.34s,.34s,.34s,0s;
  transition-delay:0s,0s,0s,.34s;
}

@media (prefers-reduced-motion:reduce){
  .site-header,.nav,.nav__cta{transition:none;}
  .page-transition{transition:none;}
}