/* Menu mobile em camadas — porte do StaggeredMenu (React/GSAP) para o site.
   Só vale até 800px, que é onde o hambúrguer aparece. Acima disso o nav
   horizontal do desktop continua mandando e nada aqui é aplicado. */

@media(max-width:800px){

  /* o nav antigo vira só a fonte dos links; quem aparece é o painel */
  body.sm-ready .site-header nav#menu-principal{display:none!important}

  .sm-root{position:fixed;inset:0;z-index:110;pointer-events:none;overflow:hidden;
    visibility:hidden}
  .sm-root.is-live{visibility:visible}

  /* camadas que entram antes do painel */
  .sm-prelayers{position:absolute;top:0;right:0;bottom:0;width:100%;pointer-events:none;z-index:1}
  .sm-prelayer{position:absolute;inset:0;width:100%;height:100%;will-change:transform}

  .sm-panel{position:absolute;top:0;right:0;width:100%;height:100%;z-index:2;
    display:flex;flex-direction:column;padding:104px 24px 32px;
    background:var(--paper);overflow-y:auto;pointer-events:auto;
    -webkit-overflow-scrolling:touch}

  .sm-inner{flex:1;display:flex;flex-direction:column;gap:20px}

  .sm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .sm-itemWrap{position:relative;overflow:hidden;line-height:1}
  .sm-item{position:relative;display:block;text-decoration:none;color:var(--ink);
    font-family:var(--serif);font-weight:200;font-size:clamp(32px,8.5vw,46px);
    line-height:1.06;padding:11px 0;transition:color .25s}
  .sm-item:hover,.sm-item:focus-visible{color:var(--rust)}
  .sm-item:focus-visible{outline:2px solid var(--rust);outline-offset:4px;border-radius:4px}
  .sm-itemLabel{display:inline-block;will-change:transform;transform-origin:50% 100%}

  /* o item em destaque (Quero voar) ganha o vinho da marca */
  .sm-item.is-cta{color:var(--rust);font-style:italic}

  .sm-sep{height:1px;background:var(--taupe);margin:14px 0 2px;border:0}

  .sm-socials{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:11px}
  .sm-socials-title{margin:0;font-family:var(--sans);font-size:10px;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--rust)}
  .sm-socials-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
    align-items:center;gap:20px}
  .sm-socials-link{font-family:var(--sans);font-size:14px;font-weight:600;
    color:var(--ink);text-decoration:none;transition:color .3s,opacity .3s}
  .sm-socials-list:hover .sm-socials-link:not(:hover){opacity:.35}
  .sm-socials-list:focus-within .sm-socials-link:not(:focus-visible){opacity:.35}
  .sm-socials-link:hover,.sm-socials-link:focus-visible{color:var(--rust)}
  .sm-socials-link:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:3px}

  /* O botão continua o círculo de três traços do site — só garanto que ele
     fique acima do painel para dar para tocar e fechar. */
  body.sm-ready .site-header .menu-button{z-index:130!important}

  /* Hambúrguer → X: o padrão mais reconhecível que existe pra esse botão,
     em qualquer site, então continua sendo a escolha mais clara sobre
     "isso abre e fecha o menu". O que muda do original é só o acabamento —
     easing com uma pontinha de mola (o traço passa um pouco do ângulo final
     e volta) em vez do ease padrão meio sem graça, e o traço do meio encolhe
     na diagonal em vez de simplesmente sumir. */
  .menu-button span{
    width:16px;height:2px;
    border-radius:999px;
    transition:transform .38s cubic-bezier(.34,1.15,.64,1),opacity .22s ease,width .3s ease;
    transform-origin:center;
  }
  .site-header.open .menu-button span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-header.open .menu-button span:nth-child(2){width:0;opacity:0}
  .site-header.open .menu-button span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* sem JS o painel nunca aparece e o menu antigo segue valendo */
  .sm-root:not(.is-live){display:none}
}

/* acima de 800px o painel não existe */
@media(min-width:801px){.sm-root{display:none!important}}

@media(prefers-reduced-motion:reduce){
  .sm-itemLabel,.sm-panel,.sm-prelayer,.menu-button span{transition:none!important}
}