/* Ajustes finos de estilo. Carregado depois do CSS da página,
   então o que estiver aqui vence. */

/* ============================================================
   ABERTURA
   Tela cheia com a frase e um indicador de carregando.
   Some sozinha em 3,6s.
   Para trocar a frase, edite o "content" abaixo.
   O \A é a quebra de linha.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){

  body::before{
    content:"Se você recebeu isso,\A é porque você é especial pra gente.";
    white-space:pre-line;
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 28px;
    background:
      radial-gradient(70% 55% at 50% 46%, #12243A 0%, #070B11 62%, #05070A 100%);
    color:#EEF3F8;
    font-family:"Poppins",sans-serif;
    font-size:clamp(26px,4.4vw,54px);
    font-weight:400;
    line-height:1.2;
    letter-spacing:-.03em;
    animation:abertura 3.6s cubic-bezier(.2,.7,.2,1) forwards;
  }

  /* barra de carregando embaixo da frase */
  body::after{
    content:"";
    position:fixed;
    z-index:10000;
    left:50%;
    top:64%;
    height:3px;
    width:min(240px,58vw);
    border-radius:999px;
    transform:translateX(-50%);
    background:
      linear-gradient(90deg,#4E9BEA 0 50%, rgba(255,255,255,.12) 50% 100%);
    background-size:200% 100%;
    background-position:100% 0;
    animation:carregando 3.6s cubic-bezier(.35,0,.2,1) forwards;
  }

  @keyframes abertura{
    0%   {opacity:0; letter-spacing:.16em; filter:blur(6px)}
    16%  {opacity:1; letter-spacing:-.03em; filter:blur(0)}
    72%  {opacity:1; letter-spacing:-.03em; filter:blur(0)}
    100% {opacity:0; transform:scale(1.04); visibility:hidden}
  }

  @keyframes carregando{
    0%   {background-position:100% 0; opacity:0}
    14%  {opacity:1}
    80%  {background-position:0% 0; opacity:1}
    100% {background-position:0% 0; opacity:0; visibility:hidden}
  }
}

/* Alinhamento da setinha dentro dos botões.
   Dentro de flex o vertical-align não vale, então o ajuste
   é pelo translate. */
.btn-dark{gap:7px}
.btn-dark .ico{
  width:.9em;
  height:.9em;
  vertical-align:0;
  align-self:center;
  transform:translateY(-1px);
  stroke-width:2.2;
}

/* No botão de largura total, a seta sai do fluxo e vai pra
   direita. Assim o texto fica no centro de verdade, e não
   centralizado junto com o ícone. */
.enviar{position:relative}
.enviar .ico{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
}

/* Topo em 3 colunas: logo na esquerda, menu no centro real da
   página, botão na direita. */
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 0 6px}
nav .menu{justify-self:center}
nav > a.btn-dark{justify-self:end}

/* Logo grande sem engordar a barra do topo. */
.logo img{height:56px;transform:scale(1.9);transform-origin:left center}

/* trava de rolagem lateral que funciona no Safari do iPhone */
html,body{overflow-x:clip;max-width:100%}
body{position:relative}
img,svg,canvas,video{max-width:100%}

@media (max-width:820px){
  nav{grid-template-columns:1fr auto}
  .logo img{height:38px;transform:scale(1.6)}
}