/* ============================================================
   HEAVY N' HIGH · SITE · v1
   Bloco 01 — MENU
   Fundo preto total. Painel claro entra por camadas.
   ============================================================ */

/* ---------- fontes ---------- */
@font-face { font-family:'Familjen'; src:url('../fonts/familjen-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Familjen'; src:url('../fonts/familjen-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Familjen'; src:url('../fonts/familjen-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Familjen'; src:url('../fonts/familjen-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Familjen'; src:url('../fonts/familjen-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Instrument'; src:url('../fonts/instrument-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Martian'; src:url('../fonts/martian-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Martian'; src:url('../fonts/martian-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

/* ---------- tokens ---------- */
:root{
  --black:#000000;
  --cream:#F1F1EE;
  --cream-dim:rgba(241,241,238,.55);
  --moss:#A8BE52;
  --cyan:#3FE0F0;

  --panel-bg:#F1F1EE;
  --panel-ink:#0A0A0A;
  --panel-ink-dim:rgba(10,10,10,.45);

  --sans:'Familjen', ui-sans-serif, system-ui, sans-serif;
  --serif:'Instrument', Georgia, serif;
  --mono:'Martian', ui-monospace,'SF Mono', monospace;

  --bar-h:88px;
  --pad-x:clamp(20px, 4vw, 56px);
  --ease-out:cubic-bezier(.23,1,.32,1);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ display:block; max-width:100%; }

.stage{ min-height:100svh; }

/* ============================================================
   MENU
   ============================================================ */
.menu{
  position:fixed; inset:0;
  z-index:100;
  pointer-events:none;
}

/* ---------- barra ---------- */
.menu__bar{
  position:absolute; top:0; left:0; right:0;
  height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  z-index:30;
  pointer-events:none;
}
.menu__bar > *{ pointer-events:auto; }

.menu__brand img{
  height:clamp(26px,2.4vw,34px); width:auto;
  transition:opacity .3s var(--ease-out);
}
.menu__brand:hover img{ opacity:.6; }

/* ---------- botão hambúrguer ---------- */
.menu__toggle{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  background:none; border:0; padding:8px 0; margin:0;
  color:var(--cream);
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.menu__toggle:focus-visible{ outline:1px solid var(--moss); outline-offset:8px; }

.menu__toggle-text{
  position:relative; display:block;
  height:11px; overflow:hidden;
  width:52px; text-align:right;
}
.menu__toggle-roll{ display:flex; flex-direction:column; will-change:transform; }
.menu__toggle-line{ display:block; height:11px; line-height:11px; white-space:nowrap; }

.menu__burger{
  position:relative; display:block;
  width:26px; height:12px; flex:0 0 26px;
}
.menu__burger-bar{
  position:absolute; left:0;
  width:100%; height:1.5px;
  background:currentColor;
  will-change:transform;
}
.menu__burger-bar:nth-child(1){ top:2px; }
.menu__burger-bar:nth-child(2){ top:9px; }

/* ---------- camadas de transição ---------- */
.menu__prelayers{
  position:absolute; top:0; right:0; bottom:0;
  width:50vw;
  z-index:10;
  pointer-events:none;
}
.menu__prelayer{
  position:absolute; inset:0;
  transform:translateX(100%);
}

/* ---------- painel ---------- */
.menu__panel{
  position:absolute; top:0; right:0;
  width:50vw; height:100%;
  background:var(--panel-bg);
  color:var(--panel-ink);
  z-index:20;
  transform:translateX(100%);
  display:flex; flex-direction:column;
  padding:calc(var(--bar-h) + clamp(24px,5vh,64px)) var(--pad-x) clamp(28px,5vh,56px);
  overflow-y:auto;
  overscroll-behavior:contain;
  pointer-events:auto;
}
.menu__panel-inner{
  flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:clamp(32px,6vh,72px);
  max-width:640px;
}

/* ---------- itens ---------- */
.menu__list{ display:flex; flex-direction:column; gap:clamp(2px,.6vh,10px); }
.menu__item-wrap{ position:relative; overflow:hidden; line-height:1; padding-bottom:.06em; }

.menu__item{
  position:relative; display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:clamp(30px,3.1vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-transform:uppercase;
  padding-right:1.2em;
  transition:color .3s var(--ease-out);
}
.menu__item::after{
  content:attr(data-num);
  position:absolute; top:.28em; right:.15em;
  font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.14em;
  color:var(--moss);
  opacity:var(--num-o,0);
  pointer-events:none;
}
.menu__label{ display:inline-block; will-change:transform; transform-origin:50% 100%; }
.menu__item:hover{ color:#3D4A17; }

/* sublinhado que corre no hover */
.menu__item::before{
  content:''; position:absolute; left:0; right:1.2em; bottom:.06em;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.menu__item:hover::before{ transform:scaleX(1); }

/* ---------- rodapé do painel ---------- */
.menu__foot{ display:flex; flex-direction:column; gap:12px; }
.menu__foot-title{
  margin:0;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--panel-ink-dim);
}
.menu__foot-list{ display:flex; flex-wrap:wrap; gap:8px 28px; }
.menu__foot-link{
  font-family:var(--sans); font-size:15px; font-weight:500;
  letter-spacing:-.01em;
  position:relative;
  transition:color .3s var(--ease-out), opacity .3s var(--ease-out);
}
.menu__foot-list:hover .menu__foot-link{ opacity:.35; }
.menu__foot-list:hover .menu__foot-link:hover{ opacity:1; color:#3D4A17; }

/* ---------- véu sobre o conteúdo ---------- */
.menu__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0; z-index:5;
  pointer-events:none;
}
.menu[data-open="true"] .menu__scrim{ pointer-events:auto; }

/* ============================================================
   TABLET E MOBILE · painel ocupa a tela inteira
   ============================================================ */
@media (max-width:1024px){
  .menu__panel,
  .menu__prelayers{ width:100vw; }
  .menu__panel-inner{ max-width:none; }
  .menu__item{ font-size:clamp(30px,7.2vw,54px); }
}

@media (max-width:600px){
  :root{ --bar-h:72px; }
  .menu__item{ font-size:clamp(28px,8.4vw,44px); }
  .menu__foot-list{ flex-direction:column; gap:6px; }
}