/* Abertura do sistema (index.html #splash): a bolinha da marca rola da direita revelando "bukme", a haste sobe e
   abraça a bolinha, o logo "respira". Cobre o carregamento; app.js (hideSplash) tira com um círculo que se fecha.
   Só CSS: a CSP não aceita script inline. */
.splash {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
  background: var(--bg); color: var(--text);
  /* Segurança: se o sistema nunca terminar de abrir, a abertura some sozinha */
  animation: spGone 0s linear 20s forwards;
}
.splash svg { stroke: none; }
.sp-logo { width: min(200px, 50vw); height: auto; overflow: visible; }
.sp-logo * { transform-box: fill-box; }
.sp-stem, .sp-l { fill: currentColor; }
.sp-disc { fill: var(--primary, #F0B400); }

.sp-pop { transform-origin: 50% 50%; animation: spPop .5s cubic-bezier(.34, 1.6, .64, 1) both, spSquash 1.4s ease-in-out .55s both; }
.sp-roll, .sp-wipe { animation: spRoll 1.05s cubic-bezier(.65, 0, .3, 1.12) .55s both; }
.sp-l { transform-origin: 50% 100%; animation: spLetter .5s cubic-bezier(.34, 1.6, .64, 1) calc(.7s + var(--r) * .16s) both; }
.sp-stem { transform-origin: 50% 100%; animation: spStem .55s cubic-bezier(.3, 0, .2, 1) 1.5s both; }
.sp-all { transform-origin: 50% 50%; animation: spPulse .5s ease 2s both; }

/* Linha de carregamento: só aparece se o sistema ainda não abriu depois da animação */
.sp-bar {
  position: absolute; left: 50%; top: calc(50% + 34px); width: 44px; height: 2px; margin-left: -22px; border-radius: 2px;
  overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); opacity: 0; animation: spFade .4s ease 2.5s both;
}
.sp-bar::after {
  content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--primary, #F0B400);
  animation: spLoad 1.1s ease-in-out infinite;
}

/* Saída: o logo encolhe e a tela se abre num círculo */
.splash.out { pointer-events: none; animation: spOut .7s cubic-bezier(.65, 0, .35, 1) .15s both; }
.splash.out .sp-logo { transition: transform .5s cubic-bezier(.5, 0, .75, 0), opacity .4s ease .1s; transform: scale(.9); opacity: 0; }
.splash.out .sp-bar { opacity: 0; animation: none; }

@keyframes spPop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes spRoll { from { transform: translateX(830px); } to { transform: translateX(0); } }
@keyframes spSquash {
  0% { transform: scale(1); } 20% { transform: scale(1.14, .9); } 62% { transform: scale(1.14, .9); }
  72% { transform: scale(.9, 1.1); } 82% { transform: scale(1.05, .96); } 100% { transform: scale(1); }
}
@keyframes spLetter { from { transform: scale(.4) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spStem { 0% { transform: scaleY(0); } 60% { transform: scaleY(1.08); } 80% { transform: scaleY(.97); } 100% { transform: scaleY(1); } }
@keyframes spPulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.04); } }
@keyframes spFade { to { opacity: 1; } }
@keyframes spLoad { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes spOut { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
@keyframes spGone { to { visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  .splash *, .splash.out { animation-duration: .01s !important; animation-delay: 0s !important; }
}