/* ==========================================================================
   Mayia Atende — abertura de marca
   Mesma linguagem do TVI: o sinal cresce em risco, TRAVA, abre com overshoot.
   Depois disso o gesto é só desta marca: dentro do balão aparecem os três
   pontos do "digitando", saltando em sequência como no WhatsApp — e é
   digitando que eles viram as duas linhas de mensagem da marca.

   Só transform e opacity. Nada de filter, blur ou animação de layout.
   Uma variável manda no tempo inteiro: --ab-dur.

   Linha do tempo (fração de --ab-dur):
     0–18%   risco cresce
     18–26%  TRAVA
     26–38%  abre em altura, passa do ponto e volta
     32–40%  o bico salta
     36–76%  três pontos digitando (3 ciclos)
     76–82%  os pontos somem
     78–92%  as linhas de mensagem entram por varredura
     80–100% o nome entra
   ========================================================================== */

.at-ab {
  --ab-dur: 2000ms;
  --ab-saida: 380ms;
  --ab-larg: 190px;
  --marca: #22DD00;
  --fundo: #0B0E11;
  --apoio: #7C877F;
  --cap: 0.69;

  display: inline-flex;
  align-items: center;
  gap: .2em;
  font-size: calc(var(--ab-larg) * 0.30);
  line-height: 1;
}

.at-ab__simb {
  width: calc(1em * var(--cap) * 1.5);
  height: calc(1em * var(--cap) * 1.304);
  position: relative;
  top: calc(1em * var(--cap) * 0.304);
  flex: 0 0 auto;
}
.at-ab__simb svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* sem isto, transform-origin em SVG usa o sistema de coordenadas do desenho
   inteiro e a peça sai voando */
.at-ab g, .at-ab rect, .at-ab path, .at-ab circle { transform-box: fill-box; }

/* ---- 1 a 3: risco, trava, abre ---- */
.at-ab__corpo {
  transform-origin: center center;
  animation: at-corpo var(--ab-dur) cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes at-corpo {
  0%   { transform: scaleX(0) scaleY(.07); }
  18%  { transform: scaleX(1) scaleY(.07); }
  26%  { transform: scaleX(1) scaleY(.07); }   /* a batida */
  38%  { transform: scaleX(1) scaleY(1.06); }  /* passa do ponto */
  46%  { transform: scaleX(1) scaleY(1); }
  100% { transform: scaleX(1) scaleY(1); }
}

.at-ab__bico {
  transform-origin: right top;
  animation: at-bico calc(var(--ab-dur) * .12) cubic-bezier(.2, 1.6, .4, 1) both;
  animation-delay: calc(var(--ab-dur) * .32);
}
@keyframes at-bico {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ---- 4: os três pontos do "digitando" ---- */
/* dois tempos convivendo no mesmo elemento sem brigar:
   at-digita mexe só no transform, at-pontos mexe só na opacidade */
.at-ab__d1, .at-ab__d2, .at-ab__d3 {
  transform-origin: center center;
  animation:
    at-digita calc(var(--ab-dur) * .13) ease-in-out 3 both,
    at-pontos var(--ab-dur) linear both;
}
.at-ab__d1 { animation-delay: calc(var(--ab-dur) * .37), 0ms; }
.at-ab__d2 { animation-delay: calc(var(--ab-dur) * .41), 0ms; }
.at-ab__d3 { animation-delay: calc(var(--ab-dur) * .45), 0ms; }

@keyframes at-digita {
  0%, 100% { transform: translateY(0)     scale(1); }
  30%      { transform: translateY(-22%)  scale(1.16); }
  60%      { transform: translateY(0)     scale(1); }
}
@keyframes at-pontos {
  0%, 35%   { opacity: 0; }
  38%, 74%  { opacity: 1; }
  82%, 100% { opacity: 0; }
}

/* ---- 5: os pontos viram as linhas de mensagem ---- */
.at-ab__l1, .at-ab__l2 {
  transform-origin: left center;
  animation: at-linha calc(var(--ab-dur) * .14) cubic-bezier(.2, .7, .2, 1) both;
}
.at-ab__l1 { animation-delay: calc(var(--ab-dur) * .78); }
.at-ab__l2 { animation-delay: calc(var(--ab-dur) * .84); }
@keyframes at-linha {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- 6: o nome ---- */
.at-ab__nome { display: inline-block; }
.at-ab__nome b, .at-ab__nome i {
  font-family: "Saira", system-ui, sans-serif;
  font-style: normal;
  display: block;
}
.at-ab__nome b {
  color: var(--apoio); font-weight: 600; letter-spacing: .34em;
  font-size: .26em; line-height: 1.2; margin-bottom: .14em;
}
.at-ab__nome i {
  color: var(--marca); font-weight: 800; letter-spacing: .01em;
  font-size: 1em; line-height: var(--cap);
}
.at-ab__nome b, .at-ab__nome i {
  animation: at-nome calc(var(--ab-dur) * .18) cubic-bezier(.2, .7, .2, 1) both;
}
.at-ab__nome b { animation-delay: calc(var(--ab-dur) * .80); }
.at-ab__nome i { animation-delay: calc(var(--ab-dur) * .84); }
@keyframes at-nome {
  from { opacity: 0; transform: translateX(-.14em); }
  to   { opacity: 1; transform: translateX(0); }
}




/* ==========================================================================
   A cortina: cobre a tela inteira desde o primeiro quadro, segura a marca
   enquanto ela se monta e sai sozinha. Mora no HTML, nao no JS — se o app.js
   nao chegar, o CSS ainda assim tira a cortina do caminho.

     0-2000ms   a marca se monta (--ab-dur)
     2000-2280  respiro
     2280-2700  a cortina se abre: a marca recua e some junto
   ========================================================================== */
.at-cortina {
  --ab-espera: 2280ms;
  --ab-saida: 420ms;
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #0B0E11;
  animation: at-cortina-sai var(--ab-saida) cubic-bezier(.4, 0, 1, 1) both;
  animation-delay: var(--ab-espera);
}
@keyframes at-cortina-sai {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* O simbolo comeca centralizado sozinho e so depois abre espaco para o nome:
   o deslocamento e metade da largura do simbolo mais metade do vao (.2em),
   porque translateX em % conta a largura do proprio lockup. */
.at-cortina .at-ab {
  animation:
    at-lockup var(--ab-dur) cubic-bezier(.2, .7, .2, 1) both,
    at-cortina-marca var(--ab-saida) cubic-bezier(.4, 0, 1, 1) var(--ab-espera) both;
}
@keyframes at-lockup {
  0%, 74%   { transform: translateX(calc(50% - .62em)); }
  94%, 100% { transform: translateX(0); }
}

/* a marca recua um tico enquanto a cortina abre: o painel vem para a frente */
@keyframes at-cortina-marca {
  from { transform: scale(1); }
  to   { transform: scale(.94); }
}

/* aba que ja viu a vinheta nesta sessao: a cortina nem existe */
html.sem-vinheta .at-cortina { display: none; }

/* quem pediu menos movimento recebe um fade e pronto */
@media (prefers-reduced-motion: reduce) {
  .at-ab__corpo, .at-ab__bico, .at-ab__l1, .at-ab__l2,
  .at-ab__nome b, .at-ab__nome i {
    animation: at-fade 260ms ease both;
  }
  .at-ab__d1, .at-ab__d2, .at-ab__d3 { animation: none; opacity: 0; }
  @keyframes at-fade { from { opacity: 0; } to { opacity: 1; } }
}