/* ============================================================
   Splash screen do aplicativo (PWA)
   Aparece so em modo standalone. O JS remove o elemento
   do DOM quando o site esta aberto no navegador comum.
   ============================================================ */

.pwa-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--sp-text, #fff);
  transition: opacity var(--sp-fade, 420ms) ease, transform var(--sp-fade, 420ms) ease;
}

.pwa-splash.is-active {
  display: flex;
}

.pwa-splash.is-hiding {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* Trava o scroll enquanto a splash esta na tela */
html.pwa-splash-lock,
html.pwa-splash-lock body {
  overflow: hidden;
}

.pwa-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  animation: spEnter 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes spEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Logo ──────────────────────────────────────────────────── */
.pwa-splash-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pwa-splash-logo {
  position: relative;
  z-index: 2;
  width: var(--sp-logo, 96px);
  height: var(--sp-logo, 96px);
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.28));
}

.pwa-splash-logo--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  font-size: calc(var(--sp-logo, 96px) * 0.44);
  font-weight: 800;
  line-height: 1;
  color: var(--sp-text, #fff);
}

/* ── Textos ────────────────────────────────────────────────── */
.pwa-splash-title {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sp-text, #fff);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.pwa-splash-sub {
  font-size: 0.85rem;
  opacity: 0.82;
  margin-top: -0.6rem;
  color: var(--sp-text, #fff);
}

.pwa-splash-fx {
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══ EFEITO 1: logo pulsando ═══════════════════════════════ */
.pwa-splash--pulse .pwa-splash-logo {
  animation: spPulse 1.6s ease-in-out infinite;
}

@keyframes spPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.09); opacity: 0.85; }
}

/* ══ EFEITO 2: circulo girando ═════════════════════════════ */
.pwa-splash-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--sp-accent, #fff);
  animation: spSpin 0.75s linear infinite;
}

@keyframes spSpin {
  to { transform: rotate(360deg); }
}

/* ══ EFEITO 3: anel em volta do logo ═══════════════════════ */
.pwa-splash-ring {
  position: absolute;
  z-index: 1;
  width: calc(var(--sp-logo, 96px) + 26px);
  height: calc(var(--sp-logo, 96px) + 26px);
  border-radius: 50%;
  border: 2px solid var(--sp-accent, #fff);
  opacity: 0;
  animation: spRing 2s cubic-bezier(0.2, 0.7, 0.4, 1) infinite;
}

.pwa-splash-ring--2 {
  animation-delay: 1s;
}

@keyframes spRing {
  0%   { opacity: 0.6; transform: scale(0.82); }
  70%  { opacity: 0.1; }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* ══ EFEITO 4: barras saltando ═════════════════════════════ */
.pwa-splash-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
}

.pwa-splash-bars i {
  width: 4px;
  height: 100%;
  border-radius: 3px;
  background: var(--sp-accent, #fff);
  animation: spBars 1s ease-in-out infinite;
}

.pwa-splash-bars i:nth-child(2) { animation-delay: 0.1s; }
.pwa-splash-bars i:nth-child(3) { animation-delay: 0.2s; }
.pwa-splash-bars i:nth-child(4) { animation-delay: 0.3s; }
.pwa-splash-bars i:nth-child(5) { animation-delay: 0.4s; }

@keyframes spBars {
  0%, 100% { transform: scaleY(0.32); opacity: 0.55; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ══ EFEITO 5: tres pontos ═════════════════════════════════ */
.pwa-splash-dots {
  display: flex;
  gap: 7px;
}

.pwa-splash-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-accent, #fff);
  animation: spDots 1.2s ease-in-out infinite;
}

.pwa-splash-dots i:nth-child(2) { animation-delay: 0.16s; }
.pwa-splash-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes spDots {
  0%, 70%, 100% { transform: translateY(0) scale(0.85); opacity: 0.5; }
  35%           { transform: translateY(-8px) scale(1); opacity: 1; }
}

/* ══ EFEITO 6: barra de progresso ══════════════════════════ */
.pwa-splash-progress {
  display: block;
  width: 140px;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}

.pwa-splash-progress i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 99px;
  background: var(--sp-accent, #fff);
  animation: spProgress 1.3s ease-in-out infinite;
}

@keyframes spProgress {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(255%); }
}

/* ══ EFEITO 7: ondas concentricas ══════════════════════════ */
.pwa-splash-wave {
  position: absolute;
  z-index: 1;
  width: var(--sp-logo, 96px);
  height: var(--sp-logo, 96px);
  border-radius: 50%;
  background: var(--sp-accent, #fff);
  opacity: 0;
  animation: spWave 2.4s ease-out infinite;
}

.pwa-splash-wave--2 { animation-delay: 0.8s; }
.pwa-splash-wave--3 { animation-delay: 1.6s; }

@keyframes spWave {
  0%   { opacity: 0.34; transform: scale(0.9); }
  100% { opacity: 0;    transform: scale(2.5); }
}

/* ── Acessibilidade ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pwa-splash-inner,
  .pwa-splash--pulse .pwa-splash-logo,
  .pwa-splash-spinner,
  .pwa-splash-ring,
  .pwa-splash-bars i,
  .pwa-splash-dots i,
  .pwa-splash-progress i,
  .pwa-splash-wave {
    animation: none !important;
  }
  .pwa-splash-spinner {
    border-top-color: rgba(255, 255, 255, 0.5);
  }
}

/* Telas baixas: reduz o logo para tudo caber */
@media (max-height: 520px) {
  .pwa-splash-logo,
  .pwa-splash-logo--letter {
    width: calc(var(--sp-logo, 96px) * 0.7);
    height: calc(var(--sp-logo, 96px) * 0.7);
  }
  .pwa-splash-inner { gap: 0.8rem; }
  .pwa-splash-title { font-size: 1rem; }
}