/* Tela cheia, acima de tudo, bloqueando interações por trás */
.kcfp-splash{
  position: fixed;
  inset: 0;
  background: #7c3AED; /* roxo do PWA */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 1;
  pointer-events: auto;
}

.kcfp-splash-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Logo sem quadrado e sem brilho */
.kcfp-splash-logo{
  width: 220px;
  height: auto;
  display: block;
  /* Efeito de surgimento: levinho (escala+fade) */
  animation: kcfpLogoIn 1600ms ease-out forwards;
  transform-origin: 50% 50%;
}

/* Frase opcional */
.kcfp-splash-welcome{
  margin: 0;
  font: 600 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #ffffff;
  opacity: 0.85;
}

/* Overlay desaparece no fim (fade-out curto) — o JS remove o elemento em ~5s */
.kcfp-splash.kcfp-hide{
  animation: kcfpSplashOut 350ms ease-in forwards;
}

/* Enquanto o splash está ativo, desabilita tudo por trás */
body.kcfp-splash-lock > *:not(#kcfp-splash){
  pointer-events: none !important;
  -webkit-user-select: none;
  user-select: none;
}
html.kcfp-splash-no-scroll,
body.kcfp-splash-no-scroll{
  overflow: hidden !important;
}

/* Keyframes */
@keyframes kcfpLogoIn{
  0%   { opacity: 0; transform: scale(.92); filter: blur(2px); }
  60%  { opacity: 1; transform: scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0); }
}

@keyframes kcfpSplashOut{
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}