/* Tela de abertura neutra: aparece antes de tudo, para não mostrar as cores padrão enquanto a loja carrega */
#splash { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .45s ease, visibility .45s; }
#splash.saindo { opacity: 0; visibility: hidden; }
#splash .sp-logo { position: relative; width: 120px; height: 120px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; margin: 14px; }
#splash .sp-marca { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; animation: sp-entra .7s cubic-bezier(.2,.9,.3,1.2) both; }
/* Cópia da logo cadastrada na Loja Nike, disponível no primeiro quadro antes do Firebase. */
#splash .sp-marca { background: center / cover no-repeat; background-image: var(--sp-imagem, url("data:image/jpeg;base64,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")); }
/* anel girando em volta da logo; cinza até a loja carregar, depois na cor principal cadastrada */
#splash .sp-logo::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--sp-cor, #9ca3af); border-right-color: var(--sp-cor, #9ca3af); animation: sp-gira 1s linear infinite; }
#splash .sp-logo::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 4px solid var(--sp-cor, #9ca3af); opacity: .15; animation: sp-pulso 1.6s ease-in-out infinite; }
#splash.pronto .sp-logo { --sp-cor: var(--primaria); }
@keyframes sp-gira { to { transform: rotate(360deg); } }
@keyframes sp-pulso { 0%, 100% { transform: scale(1); opacity: .15; } 50% { transform: scale(1.08); opacity: .3; } }
@keyframes sp-entra { from { transform: scale(.55); } to { transform: scale(1); } }
@keyframes sp-nome { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #splash * { animation-duration: .01s !important; } }