/*
  Menu no estilo bf.rocks (Blockchain Family), portado para este site.

  Diferenca pedida em relacao ao original: sem seletor de idioma.
  O original e Webflow e as animacoes sao interacoes IX2 dirigidas por
  webflow.js (687KB) + data-w-id. Aqui o comportamento foi reescrito em
  CSS/JS puro -- mesmos valores visuais, sem a dependencia.

  Valores vindos direto de blockchain-family.min.css:
    .nav              border-bottom 2px rgba(221,221,221,.2), padding 1rem
    .nav-contain      grid 1fr 1fr 1fr
    .nav-button       8.18rem, bg #ddd, radius 84px, padding .68rem
    .nav-burger       2.5rem, bg #ddd, radius 10px
    .menu_right       gap 1.875rem
    .menu-bg-opened   padding 6rem 1.25rem 1.25rem
                      (fundo trocado a pedido pelo do raipe: rgba(10,10,10,.72) + blur(24px))
    .nav-menu-link    #ddd, uppercase, weight 600, line-height 82%
    .nav_link-text    8.85vw (10.6vw abaixo de 991px), letter-spacing -.06em
    .nav-projects-img 3.9375rem x 3.75rem
    .noise            grain.gif, opacity .04, 290px

  Tokens deste site: --title-font, --body-font, --theme-color2.
*/

:root {
  --bf-light: #ddd;
  --bf-dark: #1b1e1c;
}

/* ============ barra fixa ============ */
/* nav sem fundo: so logo + CTA flutuando sobre o conteudo.
   backdrop-filter foi removido de proposito -- ele cria stacking context e
   quebraria o mix-blend-mode dos filhos. */
.bf-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  padding: 1rem 1.25rem;
  font-family: var(--body-font);
}

/* 2 colunas: logo na esquerda, CTA encostado na direita
   (era 3 colunas com o CTA no meio, quando ainda existia o hamburguer) */
.bf-nav__contain {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 16px;
  align-items: center;
}

.bf-nav__logo {
  display: flex;
  align-items: center;
  grid-column-gap: 0.68rem;
  justify-self: start;
  text-decoration: none;
}

.bf-nav__logo img {
  height: 26px;
  width: auto;
  display: block;
}

/* pill central "Get in touch" -- texto duplo que sobe no hover */
.bf-nav__cta {
  justify-self: end;
  width: 10.18rem;
  color: var(--bf-dark);
  background-color: var(--bf-light);
  border-radius: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bf-nav__cta:hover {
  background-color: var(--white);
  box-shadow: 0 0 0 4px rgba(221, 221, 221, 0.2);
}

/* font-size no .bf-swap para o em das medidas (height/translate) bater com o
   texto; senao o span de 16px estoura a caixa de 1.2em do pai. */
.bf-swap {
  position: relative;
  overflow: hidden;
  font-size: 1rem;
  height: 1.2em;
  line-height: 1.2em;
}

/* mesma fonte do "Available for freelance work": Manrope 16px, weight 700 */
.bf-swap span {
  display: block;
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============ noise (identico ao .noise do bf.rocks) ============ */
body::before {
  content: "";
  pointer-events: none;
  z-index: 2147483647;
  width: 100%;
  height: 100%;
  opacity: 0.04;
  mix-blend-mode: normal;
  background-image: url("../images/menu/grain.gif");
  background-position: 50%;
  background-repeat: repeat;
  background-size: 290px;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* o CTA era escondido abaixo de 991px porque o hamburguer assumia a navegacao.
   Sem hamburguer, escondê-lo deixaria o mobile sem nenhum link -- entao ele fica. */

@media (max-width: 575px) {
  .bf-nav { padding: 0.75rem 1rem; }
}

@media (max-width: 479px) {
  .bf-nav__cta {
    width: 8.5rem;
    padding: 0.8rem;
  }
  .bf-swap {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { background-image: none; }
}