/* Menu do celular: a animação de abrir e fechar. Quem troca a classe `menu-aberto` no
   cabeçalho é o menu.js; o painel começa com `hidden` para a página sem JS não mostrar o
   menu aberto. Saída mais curta que a entrada (220ms, o SAIDA_MS do menu.js): quem fecha
   já decidiu e não quer esperar. */

/* O cabeçalho no topo da página é transparente; com o menu aberto ele fica sólido, senão
   a faixa de cima mostra a página por trás e o painel parece solto. */
header[data-cabecalho].menu-aberto.menu-aberto{background:#07111F; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:#16253A}
/* SEM backdrop-filter no cabeçalho enquanto o menu está aberto: o painel tem o dele, e um
   backdrop-filter dentro de outro não enxerga a página — o painel ficava transparente e o
   texto de baixo aparecia através dele. Acontecia já antes, toda vez que o menu era aberto
   com a página rolada (o .rolado liga o blur). A classe repetida ganha do .rolado, que vem
   depois, num <style> da própria página. */

/* Escurece a página abaixo do painel: mostra que ela está atrás e que tocar ali fecha. */
[data-se="menuOpen"]{position:relative}
[data-se="menuOpen"]::after{content:""; position:absolute; left:0; right:0; top:0; height:100vh; z-index:-1; background:rgba(2,6,12,.6); opacity:0; transition:opacity 200ms ease; pointer-events:none}
header.menu-aberto [data-se="menuOpen"]::after{opacity:1; transition-duration:260ms}

[data-se="menuOpen"] > nav{
  /* Opaco: a 97% os blocos claros da página ainda apareciam como manchas atrás dos itens. */
  background:#07111F !important;
  opacity:0; transform:translateY(-10px);
  transition:opacity 200ms cubic-bezier(.4,0,1,1), transform 200ms cubic-bezier(.4,0,1,1);
  /* Painel alto (o do produto tem sete itens) não pode passar do fim da tela sem rolar. */
  max-height:calc(100svh - 78px); overflow-y:auto; overscroll-behavior:contain;
}
header.menu-aberto [data-se="menuOpen"] > nav{
  opacity:1; transform:none;
  transition:opacity 260ms cubic-bezier(.23,1,.32,1), transform 320ms cubic-bezier(.23,1,.32,1);
}

/* Os itens chegam um atrás do outro, rápido: 30ms entre eles, para o menu inteiro estar
   de pé em menos de um terço de segundo. Na saída, todos juntos. */
[data-se="menuOpen"] > nav > a{opacity:0; transform:translateY(-6px); transition:opacity 150ms ease, transform 150ms ease}
header.menu-aberto [data-se="menuOpen"] > nav > a{opacity:1; transform:none; transition:opacity 280ms cubic-bezier(.23,1,.32,1), transform 280ms cubic-bezier(.23,1,.32,1)}
header.menu-aberto [data-se="menuOpen"] > nav > a:nth-child(2){transition-delay:30ms}
header.menu-aberto [data-se="menuOpen"] > nav > a:nth-child(3){transition-delay:60ms}
header.menu-aberto [data-se="menuOpen"] > nav > a:nth-child(4){transition-delay:90ms}
header.menu-aberto [data-se="menuOpen"] > nav > a:nth-child(5){transition-delay:120ms}
header.menu-aberto [data-se="menuOpen"] > nav > a:nth-child(6){transition-delay:150ms}
header.menu-aberto [data-se="menuOpen"] > nav > a:nth-child(n+7){transition-delay:180ms}

/* Os três traços viram X. O `!important` vence o width que está no atributo style de
   cada traço; 6.6px = o gap de 5px + a espessura de 1.6px. */
[data-acao="toggleMenu"] > span{transition:transform 260ms cubic-bezier(.23,1,.32,1), opacity 160ms ease, width 260ms cubic-bezier(.23,1,.32,1)}
[data-acao="toggleMenu"][aria-expanded="true"] > span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
[data-acao="toggleMenu"][aria-expanded="true"] > span:nth-child(2){opacity:0; transform:scaleX(.4)}
[data-acao="toggleMenu"][aria-expanded="true"] > span:nth-child(3){width:18px !important; transform:translateY(-6.6px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  [data-se="menuOpen"] > nav, [data-se="menuOpen"] > nav > a{transform:none !important}
  header.menu-aberto [data-se="menuOpen"] > nav > a{transition-delay:0s !important}
}

/* Trava a rolagem da página enquanto o menu está aberto (o menu.js liga a classe). */
html.menu-travado, html.menu-travado body{overflow:hidden}
/* A barra de ação do rodapé repetiria o botão que está no próprio menu, por baixo do
   escurecido. Desce enquanto o menu está aberto. */
html.menu-travado .bt-barra{transform:translateY(110%) !important}

/* Tablet e janela estreita de computador: o menu de celular aparece até 920/1270px, e
   esticado na largura toda vira uma lista de 1000px com um botão do mesmo tamanho. Ali
   ele vira um cartão sob o X, como um menu suspenso, com a página escurecida em volta. */
@media (min-width:640px){
  [data-se="menuOpen"] > nav{box-sizing:border-box; width:min(400px, calc(100% - 32px)); margin:10px clamp(20px,4vw,40px) 0 auto; border:1px solid #1B2C44 !important; border-radius:16px; box-shadow:0 24px 60px -20px rgba(0,0,0,.7); padding:10px 22px 20px !important}
}