/* Reset básico */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

body {
  font-family: 'Chelsea Market', 'Comic Sans MS', cursive;
  background: linear-gradient(135deg, #f4831f 0%, #d5690c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container principal */
#splash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  transition: opacity 0.6s ease;
}

.splash-body.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Logo */
.logo-splash {
  width: min(280px, 70vw);
  height: auto;
  margin-bottom: 0;
}

/* Tagline */
.tagline-splash {
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  font-size: clamp(18px, 4vw, 28px);
  letter-spacing: 1px;
  margin: 0;
}

/* Chave "ganhando cor" — funciona como a barra de carregamento.
   Começa cinza/sem cor e vai ficando colorida ao longo de 5 segundos
   (o mesmo tempo que o splash.js espera antes de trocar de página). */
.chave-carregando-wrap {
  width: min(200px, 60vw);
}

/* ⏱️ É AQUI que você controla quantos segundos a chave demora pra
   ganhar cor — troca o "6s" abaixo por qualquer número que quiser */
.chave-carregando{
  width: 100%;
  height: auto;
  opacity: 0;
  filter: grayscale(100%) brightness(0.8) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
  animation: ganhandoCor 2s ease-in-out forwards;
}

@keyframes ganhandoCor{
  0%   { opacity: 0; filter: grayscale(100%) brightness(0.8) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)); }
  100% { opacity: 1; filter: grayscale(0%) brightness(1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)); }
}

/* Responsivo */
@media (max-width: 480px) {
  .splash-body {
    gap: 28px;
    padding: 16px;
  }

  .logo-splash {
    width: min(220px, 70vw);
  }

  .tagline-splash {
    margin: 0 8px;
  }

  .chave-carregando-wrap {
    width: min(160px, 55vw);
  }
}

@media (max-width: 360px) {
  .splash-body {
    gap: 20px;
    padding: 12px;
  }

  .logo-splash {
    width: min(180px, 70vw);
  }

  .chave-carregando-wrap {
    width: min(130px, 50vw);
  }
}

/* ---------- 7 COLUNAS ARCO-ÍRIS (efeito de transição, caindo de cima) ---------- */
.barras-arcoiris{
  position:absolute; inset:0; z-index:1;
  overflow:hidden; pointer-events:none;
}
.barra-cor{
  position:absolute; top:0; width:14.2858%; height:100%;
  transform: translateY(-100%);
  animation: cairDeCima 0.7s ease-in forwards;
  animation-play-state:paused;
}
.barra-cor.correndo{ animation-play-state:running; }

/* Mantém as SUAS cores (os tons de laranja/amarelo que você já escolheu)
   — só adicionei o "left" de cada uma, pra ficarem lado a lado como colunas */
.cor-1{ left:0%; }
.cor-2{ left:14.2858%; }
.cor-3{ left:28.5716%; }
.cor-4{ left:42.8574%; }
.cor-5{ left:57.1432%; }
.cor-6{ left:71.429%; }
.cor-7{ left:85.7148%; }

/* as 7 cores do arco-íris, uma de cada vez (o "animation-delay" é o
   espacinho de tempo entre uma barra e a próxima) */
.cor-1{ background:#c26b08ea; animation-delay:0.00s; } /* vermelho */
.cor-2{ background:#fb8c00; animation-delay:0.16s; } /* laranja */
.cor-3{ background:#fdd835; animation-delay:0.32s; } /* amarelo */
.cor-4{ background:#eca815; animation-delay:0.48s; } /* verde */
.cor-5{ background:#d67f0e; animation-delay:0.64s; } /* azul */
.cor-6{ background:#bd5011; animation-delay:0.80s; } /* anil */
.cor-7{ background:#a77711; animation-delay:0.96s; } /* violeta */

@keyframes cairDeCima{
  from{ transform:translateY(-100%); }
  to{ transform:translateY(0%); }
}