/* Carregamento inicial da loja (index.html), antes do React. Arquivo à parte: a CSP não aceita <style> inline. */
#carregando-inicial {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity 0.25s ease;
  /* Sem JavaScript o React nunca tira o carregamento: some sozinho e deixa o conteúdo gerado no servidor. */
  animation: ci-sumir 0s linear 10s forwards;
}
#carregando-inicial.saindo { opacity: 0; pointer-events: none; }
#carregando-inicial svg { width: 76px; height: 76px; }
#carregando-inicial .ci-anel { transform-origin: 32px 32px; animation: ci-girar 2.4s linear infinite; }
#carregando-inicial .ci-miolo { transform-origin: 32px 32px; animation: ci-pulso 1.2s ease-in-out infinite; }
@keyframes ci-girar { to { transform: rotate(360deg); } }
@keyframes ci-pulso { 50% { transform: scale(0.86); } }
@keyframes ci-sumir { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  #carregando-inicial .ci-anel, #carregando-inicial .ci-miolo { animation: none; }
}