/* ==========================================================================
   ESPERA DE ENTRADA — a mesma cara da tela de espera da V3 (src/paginas/v3/design-system/componentes/carregando.css):
   fundo do tema, o céu, o Bordo acenando e os três pontos. Vale para os momentos em que o app ainda não carregou:
     · o index.html, antes do React (#splash-inicial)
     · a espera enquanto uma parte do app baixa (src/paginas/v3/EsperaInicial.jsx)
   Sem frase: antes de o app carregar não existe tradução. O lugar dela fica reservado (.espera-v3-frase), para os
   pontos não pularem quando a espera da V3, com a frase, entrar por cima.
   O tema vem de html[data-tema], posto pelo index.html a partir da escolha guardada da pessoa (tb-app-tema).
   Fica em public/ porque o index.html carrega antes do build juntar o CSS do app.
   ========================================================================== */
.espera-v3 { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; background: #F5F5F5; user-select: none; -webkit-user-select: none; }
.espera-v3::before { content: ''; position: absolute; inset: 0; background: url('/v3/recursos/imagens/hero-ceu-transbordo-1600.webp') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 12%, transparent 84%); mask-image: linear-gradient(180deg, #000 0, #000 12%, transparent 84%); }
[data-tema="escuro"] .espera-v3 { background: #1B1B1B; }
[data-tema="escuro"] .espera-v3::before { background: linear-gradient(180deg, #101010 0%, rgba(16,16,16,0) 70%); }
.espera-v3-miolo { position: relative; display: grid; justify-items: center; gap: 16px; margin-top: -8vh; }
.espera-v3-miolo img { display: block; width: 156px; height: 156px; object-fit: contain; animation: espera-v3-flutua 3.6s ease-in-out infinite; }
.espera-v3-frase { display: block; height: calc(clamp(20px, 2.2vw, 27px) * 1.1); }
.espera-v3-pontos { display: inline-flex; align-items: center; gap: 5px; height: 12px; color: #fff; }
[data-tema="escuro"] .espera-v3-pontos { color: #F1F0EE; }
.espera-v3-pontos i { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: espera-v3-ponto 1.1s ease-in-out infinite; }
.espera-v3-pontos i:nth-child(2) { animation-delay: .14s; }
.espera-v3-pontos i:nth-child(3) { animation-delay: .28s; }
@keyframes espera-v3-ponto { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@keyframes espera-v3-flutua { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .espera-v3 *, .espera-v3 *::before { animation: none !important; } }