/* ============================================================================
   SPLASH SCREEN PERSONALIZADO - WP COMMANDER v3.0
   Sistema profissional de partículas visuais com efeitos modernos
   ============================================================================ */

/* Import da fonte Roboto para preservar formato original dos nomes */
/* Fontes em design-tokens.css */

#pwa-splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b0d10;
  display: none;
  /* Oculto por padrão - será mostrado via JS apenas se necessário */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  font-family: var(--font-heading);
  overflow: hidden;
}

#pwa-splash-screen.show {
  display: flex;
}

/* Esconder splash quando não deve ser mostrado */
#pwa-splash-screen.hide-immediately {
  display: none !important;
}

#pwa-splash-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

#pwa-splash-screen .splash-content {
  text-align: center;
  animation: fadeInUp 0.45s ease-out;
  will-change: transform, opacity;
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  width: min(420px, calc(100% - 48px));
  max-width: 420px;
  padding: 28px 24px 22px;
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 0%,
      var(--primary-glow-06) 0%,
      transparent 55%
    ),
    var(--card);
  border: var(--shell-border);
  border-radius: var(--section-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#pwa-splash-screen .splash-logo {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 8px var(--black-50);
}

#pwa-splash-screen .splash-logo .highlight-yellow {
  color: var(--primary-light);
}

#pwa-splash-screen .splash-logo .highlight-white {
  color: var(--text-primary);
}

#pwa-splash-screen .splash-rule {
  position: relative;
  width: 42%;
  max-width: 140px;
  height: 2px;
  flex-shrink: 0;
  background: var(--white-08);
  border-radius: 1px;
  overflow: hidden;
}

#pwa-splash-screen .splash-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 1px;
  transform: translateX(-50%);
  animation: splash-rule-fill 5s linear forwards;
}

.splash-countdown-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.splash-countdown-time {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--primary-light);
}

#pwa-splash-screen .splash-message {
  margin: 0;
  max-width: 100%;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--chip-text);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--input-radius);
  animation: fadeInUp 0.45s ease-out 0.12s both;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#pwa-splash-screen .splash-country-flag {
  display: inline-flex;
  flex: 0 0 auto;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--white-08);
}

#pwa-splash-screen .splash-country-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

#pwa-splash-screen .splash-message .splash-message-text {
  min-width: 0;
}

#pwa-splash-screen .splash-message .splash-commander-highlight {
  color: var(--primary-light);
  font-weight: 700;
}

#pwa-splash-screen .splash-version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(16px, var(--wpc-safe-bottom));
  z-index: 20;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}

#pwa-splash-screen .splash-version-prefix {
  margin-right: 0.35em;
}

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #pwa-splash-screen .splash-message,
  #pwa-splash-screen .splash-content,
  #pwa-splash-screen .splash-logo {
    animation: none;
  }

  #pwa-splash-screen .splash-rule::after {
    animation: none;
    width: 100%;
  }

  .particle {
    animation: none !important;
  }
}

/* ============================================================================
   SISTEMA DE PARTÍCULAS VISUAIS PROFISSIONAIS v3.0
   ============================================================================ */

.splash-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.55;
}

.particle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  font-size: 2.5rem;
  line-height: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.particle.ember {
  --ember-ax: 12px;
  font-size: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #ffd89a 0%,
    #e8892a 55%,
    transparent 72%
  );
  box-shadow: 0 0 5px 1px rgba(255, 120, 40, 0.35);
  filter: none;
}

/* Esconder todo o conteúdo enquanto splash está ativo */
html.splash-active,
body.splash-active,
html.splash-boot,
body.splash-boot {
  overflow: hidden;
  position: relative;
  /* Esconder background durante splash */
  background: #0b0d10 !important;
  background-image: none !important;
}

html.splash-boot site-background,
html.splash-active site-background,
html.splash-boot bottom-navigation,
html.splash-active bottom-navigation,
html.splash-boot .menu-hamburger,
html.splash-active .menu-hamburger {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Esconder também o background do html/body até o conteúdo estar pronto */
html.splash-active,
body.splash-active {
  background-attachment: fixed;
}

html.splash-active .container,
body.splash-active .container {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: none;
}

/* Esconder conteúdo por padrão até o script decidir */
html:not(.splash-initialized) .container,
body:not(.splash-initialized) .container {
  opacity: 0;
  visibility: hidden;
}

/* Overlay para garantir que tudo está coberto enquanto splash está ativo */
html.splash-active::after,
body.splash-active::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b0d10;
  z-index: 99997;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* Quando splash desaparece, restaurar background e mostrar conteúdo */
html:not(.splash-active),
body:not(.splash-active) {
  /* Background será restaurado pelo CSS original - sem transição para aparecer instantaneamente */
  transition: none;
}

html:not(.splash-active) .container,
body:not(.splash-active) .container {
  opacity: 1;
  visibility: visible;
  transition: none;
}

html:not(.splash-active)::after,
body:not(.splash-active)::after {
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
  display: none;
}

@keyframes ember-rise {
  0% {
    transform: translate3d(0, 110vh, 0);
    opacity: 0;
  }
  18% {
    opacity: 0.7;
  }
  100% {
    transform: translate3d(var(--ember-ax), 52vh, 0);
    opacity: 0;
  }
}

/* ============================================================================
   ANIMAÇÕES PROFISSIONAIS - DISTRIBUIÇÃO COMPLETA DA TELA
   ============================================================================ */

/* Animação 1: Float Smooth - Flutuação suave vertical elegante */
@keyframes float-up {
  0% {
    transform: translate(var(--x-offset), 120vh) scale(0) rotate(0deg);
    opacity: 0;
  }

  5% {
    opacity: 0.9;
    transform: translate(var(--x-offset), 110vh) scale(1) rotate(45deg);
  }

  50% {
    opacity: 1;
    transform: translate(calc(var(--x-offset) + 10px), 50vh) scale(1.05)
      rotate(180deg);
  }

  95% {
    opacity: 0.9;
  }

  100% {
    transform: translate(var(--x-offset), -20vh) scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Animação 2: Diagonal Flow - Fluxo diagonal suave */
@keyframes sway-fall {
  0% {
    transform: translate(calc(var(--base-x) - 10vw), -20vh) scale(0)
      rotate(0deg);
    opacity: 0;
  }

  5% {
    opacity: 0.95;
    transform: translate(var(--base-x), 0vh) scale(1) rotate(60deg);
  }

  25% {
    transform: translate(calc(var(--base-x) + 20vw), 30vh) scale(1.08)
      rotate(120deg);
  }

  50% {
    transform: translate(calc(var(--base-x) + 10vw), 60vh) scale(1)
      rotate(240deg);
  }

  75% {
    transform: translate(calc(var(--base-x) + 25vw), 90vh) scale(1.05)
      rotate(300deg);
  }

  95% {
    opacity: 0.95;
  }

  100% {
    transform: translate(calc(var(--base-x) + 40vw), 120vh) scale(0)
      rotate(360deg);
    opacity: 0;
  }
}

/* Animação 3: Gentle Drift - Deriva suave totalizada */
@keyframes soft-fall {
  0% {
    transform: translate(var(--drift-x), -20vh) scale(0.3) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 0.8;
    transform: translate(var(--drift-x), 8vh) scale(1) rotate(45deg);
  }

  30% {
    transform: translate(calc(var(--drift-x) + 18px), 32vh) scale(1.04)
      rotate(135deg);
  }

  55% {
    transform: translate(calc(var(--drift-x) - 18px), 58vh) scale(1)
      rotate(225deg);
  }

  80% {
    transform: translate(calc(var(--drift-x) + 12px), 85vh) scale(0.95)
      rotate(315deg);
  }

  92% {
    opacity: 0.8;
  }

  100% {
    transform: translate(var(--drift-x), 115vh) scale(0.3) rotate(360deg);
    opacity: 0;
  }
}

/* Animação 4: Side Sweep - Varredura lateral completa */
@keyframes hop-move {
  0% {
    transform: translate(-25vw, var(--sweep-y)) scale(0.4) rotate(0deg);
    opacity: 0;
  }

  5% {
    opacity: 0.85;
    transform: translate(-5vw, calc(var(--sweep-y) - 8vh)) scale(1)
      rotate(30deg);
  }

  20% {
    transform: translate(15vw, var(--sweep-y)) scale(1.1) rotate(90deg);
  }

  40% {
    transform: translate(40vw, calc(var(--sweep-y) + 5vh)) scale(1)
      rotate(180deg);
  }

  60% {
    transform: translate(65vw, calc(var(--sweep-y) - 3vh)) scale(1.08)
      rotate(270deg);
  }

  80% {
    transform: translate(90vw, var(--sweep-y)) scale(1) rotate(330deg);
  }

  95% {
    opacity: 0.85;
  }

  100% {
    transform: translate(125vw, calc(var(--sweep-y) - 10vh)) scale(0.4)
      rotate(360deg);
    opacity: 0;
  }
}

/* Animação 5: Fast Streak - Rastro rápido profissional */
@keyframes tactical-fly {
  0% {
    transform: translate(-35vw, var(--streak-y)) scale(0.7, 0.3)
      rotate(-3deg);
    opacity: 0;
    filter: blur(0px);
  }

  2% {
    opacity: 1;
    filter: blur(0.5px);
  }

  50% {
    transform: translate(50vw, calc(var(--streak-y) - 8vh))
      scale(1.1, 0.4) rotate(1deg);
    filter: blur(0.5px);
  }

  98% {
    opacity: 1;
    filter: blur(0.5px);
  }

  100% {
    transform: translate(135vw, calc(var(--streak-y) + 5vh))
      scale(0.7, 0.3) rotate(3deg);
    opacity: 0;
    filter: blur(0px);
  }
}

/* Animação 6: Floating Dance - Dança flutuante profissional */
@keyframes spooky-move {
  0% {
    transform: translate(var(--dance-x), -20vh) scale(0.5) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 0.7;
  }

  18% {
    transform: translate(calc(var(--dance-x) - 35px), 18vh) scale(1.15)
      rotate(90deg);
  }

  35% {
    transform: translate(calc(var(--dance-x) + 35px), 38vh) scale(0.9)
      rotate(180deg);
  }

  52% {
    transform: translate(calc(var(--dance-x) - 25px), 58vh) scale(1.2)
      rotate(270deg);
  }

  70% {
    transform: translate(calc(var(--dance-x) + 30px), 78vh) scale(0.95)
      rotate(360deg);
  }

  85% {
    transform: translate(calc(var(--dance-x) - 15px), 95vh) scale(1.1)
      rotate(450deg);
  }

  92% {
    opacity: 0.7;
  }

  100% {
    transform: translate(var(--dance-x), 120vh) scale(0.5) rotate(540deg);
    opacity: 0;
  }
}

/* Animação 7: Digital Rain - Chuva digital moderna */
@keyframes matrix-fall {
  0% {
    transform: translate(var(--rain-x), -12vh) scaleY(0.5) scaleX(1);
    opacity: 0;
    filter: brightness(0.8) saturate(1.2);
  }

  4% {
    opacity: 1;
    transform: translate(var(--rain-x), 0vh) scaleY(1.8) scaleX(0.9);
    filter: brightness(1.5) saturate(1.5);
  }

  50% {
    opacity: 1;
    filter: brightness(1.2) saturate(1.3);
  }

  96% {
    opacity: 1;
    filter: brightness(1.5) saturate(1.5);
  }

  100% {
    transform: translate(var(--rain-x), 112vh) scaleY(0.5) scaleX(1);
    opacity: 0;
    filter: brightness(0.8) saturate(1.2);
  }
}

/* Animação 8: Confetti Burst - Explosão de confete profissional */
@keyframes confetti-fall {
  0% {
    transform: translate(var(--burst-x), -18vh) scale(0) rotate(0deg);
    opacity: 0;
  }

  6% {
    opacity: 1;
    transform: translate(var(--burst-x), 3vh) scale(1.4) rotate(180deg);
  }

  22% {
    transform: translate(calc(var(--burst-x) + 45px), 25vh) scale(1)
      rotate(360deg);
  }

  45% {
    transform: translate(calc(var(--burst-x) - 35px), 50vh) scale(1.15)
      rotate(540deg);
  }

  68% {
    transform: translate(calc(var(--burst-x) + 40px), 75vh) scale(0.9)
      rotate(720deg);
  }

  88% {
    transform: translate(calc(var(--burst-x) - 20px), 98vh) scale(1.05)
      rotate(860deg);
  }

  94% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--burst-x), 118vh) scale(0) rotate(900deg);
    opacity: 0;
  }
}

/* ============================================================================
   ANIMAÇÕES DO LOGO E UI
   ============================================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes splash-rule-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@media (max-width: 380px) {
  #pwa-splash-screen .splash-content {
    width: min(420px, calc(100% - 32px));
    padding: 22px 16px 18px;
    gap: 12px;
  }

  #pwa-splash-screen .splash-logo {
    font-size: 1.7rem;
  }

  #pwa-splash-screen .splash-message {
    font-size: 0.75rem;
    padding: 7px 10px;
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .particle {
    will-change: transform, opacity;
    filter: none !important;
    font-size: 2rem;
  }
}