/* SGA Menu - abertura animada (v1.42). Desenho em web/js/sgamenu/abertura.js + bloco "abertura" do index.html
   (gerado por tools/gerar-abertura-sgamenu.py a partir do logotipo). Princípios em docs/MOTION-ABERTURA.md:
   começa na mesma cor da tela do sistema (laranja), um herói só (a tampa do prato), física (cai, achata e quica),
   escalonamento das letras e saída que entrega o app. Primeira abertura do dia = completa (~2 s); depois, curta (~1 s).
   Toque ou tecla pula. Quem desligou animações no aparelho vê só o logotipo e um esmaecer. */
.ab { display: none; }
html.ab-on .ab {
  --t0: .84s;               /* quando as letras começam (a tampa vem antes) */
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  background: linear-gradient(135deg, #fa8c02 0%, #f66300 55%, #e04d00 100%);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.ab-on.ab-curta .ab { --t0: 0s; }
html.ab-on body { overflow: hidden; }
.ab-svg { width: min(78vw, 400px); height: auto; overflow: visible; }
.ab-svg g, .ab-svg path, .ab-svg rect, .ab-svg circle { transform-box: fill-box; transform-origin: 50% 50%; }

/* Cena num quadro 1000 x 1000, tudo centrado em x = 500 (tools/gerar-abertura-sgamenu.py).
   O logotipo fica pequeno debaixo da tampa, em cima do prato; a tampa sai e ele cresce até o centro da tela. */

/* 1) prato com a tampa caem, achatam e quicam */
.ab-svg .ab-cloche { animation: ab-drop .56s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 100%; }
@keyframes ab-drop {
  0% { transform: translateY(-70%); opacity: 0; }
  20% { opacity: 1; }
  58% { transform: translateY(0) scale(1.08, .9); }
  78% { transform: translateY(-2%) scale(.97, 1.03); }
  100% { transform: none; }
}
/* 2) a tampa levanta (antecipação: desce um pouco antes) e sai pelo alto, girando */
.ab-svg .ab-lid { animation: ab-lift .55s cubic-bezier(.45, 0, .7, .3) .6s both; transform-origin: 0% 100%; }
@keyframes ab-lift {
  0% { transform: none; opacity: 1; }
  20% { transform: translateY(2%) rotate(2deg); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(35%, -210%) rotate(-28deg); opacity: 0; }
}
/* o prato sai por baixo logo que a tampa levanta, antes de o logotipo crescer por cima dele */
.ab-svg .ab-base { animation: ab-base .3s cubic-bezier(.5, 0, .75, 0) .86s both; }
@keyframes ab-base { to { transform: translateY(160%) scaleX(.3); opacity: 0; } }

/* 3) o logotipo aparece pequeno em cima do prato (55%, pé no prato) e cresce até o centro (mola) */
.ab-svg .ab-logo { animation: ab-grow .78s cubic-bezier(.34, 1.4, .64, 1) var(--t0) both; transform-origin: 50% 100%; }
@keyframes ab-grow {
  0% { opacity: 0; transform: translateY(-111px) scale(.55); }
  12% { opacity: 1; transform: translateY(-111px) scale(.55); }
  30% { opacity: 1; transform: translateY(-111px) scale(.55); }
  100% { opacity: 1; transform: none; }
}
/* peças do SGA e letras do Menu entram em sequência, por dentro do logotipo que cresce */
.ab-l { animation: ab-pop .46s cubic-bezier(.34, 1.56, .64, 1) both; }
.ab-l1 { animation-delay: calc(var(--t0) + .02s); }
.ab-l2 { animation-delay: calc(var(--t0) + .08s); }
.ab-l3 { animation-delay: calc(var(--t0) + .14s); }
@keyframes ab-pop { 0% { opacity: 0; transform: translateY(14%) scale(.8); } 50% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.ab-m { animation: ab-up .4s cubic-bezier(.22, 1, .36, 1) both; }
.ab-m1 { animation-delay: calc(var(--t0) + .22s); }
.ab-m2 { animation-delay: calc(var(--t0) + .27s); }
.ab-m3 { animation-delay: calc(var(--t0) + .32s); }
.ab-m4 { animation-delay: calc(var(--t0) + .37s); }
@keyframes ab-up { 0% { opacity: 0; transform: translateY(40%); } 100% { opacity: 1; transform: none; } }

/* versão curta (já abriu hoje): sem prato e tampa; o logotipo cresce de 85% */
html.ab-curta .ab-lid, html.ab-curta .ab-base { display: none; }
html.ab-curta .ab-svg .ab-cloche { animation: none; }
html.ab-curta .ab-svg .ab-logo { animation-name: ab-grow-curta; transform-origin: 50% 50%; }
@keyframes ab-grow-curta { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: none; } }

/* 5) saída: a tela laranja abre para o app */
html.ab-on .ab.saindo { animation: ab-out .34s cubic-bezier(.4, 0, 1, 1) forwards; pointer-events: none; }
@keyframes ab-out { to { opacity: 0; transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .ab-lid, .ab-base { display: none; }
  .ab-svg *, .ab-svg { animation: none !important; }
  html.ab-on .ab.saindo { animation-name: ab-fade; animation-duration: .2s; }
  @keyframes ab-fade { to { opacity: 0; } }
}