/* inicio.css
   Tela de login animada, passagem do login para o sistema e tela de boas-vindas.
   Regra das animacoes: o estado normal de cada peca ja e o estado final; a animacao so
   mostra o caminho ate ele. Assim, com "Reduzir animacoes", tudo aparece parado e certo. */

.inicio {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--e6) + var(--seguro-topo)) var(--e4) calc(var(--e5) + var(--seguro-baixo));
  overflow: hidden;
  background: var(--fundo);
}

/* Aba escondida: para tudo */
.inicio-pausado,
.inicio-pausado * {
  animation-play-state: paused !important;
}

/* ---------- Fundo: manchas, estrelinhas ---------- */
.inicio-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mancha {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.16;
  background: var(--degrade);
  animation: mancha-move 18s ease-in-out infinite alternate;
}

.mancha-1 { top: -180px; left: -160px; }
.mancha-2 { right: -200px; bottom: -220px; animation-delay: -9s; }
.mancha-3 { top: 35%; left: 55%; width: 360px; height: 360px; opacity: 0.08; animation-duration: 24s; animation-delay: -4s; }

@keyframes mancha-move {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, 40px) scale(1.15); }
}

.estrelinha {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  animation: estrelinha-pisca 7s ease-in-out infinite;
}

.estrelinha-1 { top: 12%; left: 14%; animation-delay: 1.8s; }
.estrelinha-2 { top: 22%; right: 16%; width: 10px; height: 10px; animation-delay: 3.4s; animation-duration: 9s; }
.estrelinha-3 { top: 64%; left: 9%; width: 18px; height: 18px; animation-delay: 5.1s; }
.estrelinha-4 { bottom: 14%; right: 12%; animation-delay: 2.6s; animation-duration: 8s; }
.estrelinha-5 { top: 8%; left: 52%; width: 10px; height: 10px; animation-delay: 6.2s; animation-duration: 10s; }
.estrelinha-6 { bottom: 26%; left: 26%; width: 12px; height: 12px; animation-delay: 4.3s; animation-duration: 11s; }
.estrelinha-7 { top: 42%; right: 6%; width: 12px; height: 12px; animation-delay: 7.5s; animation-duration: 9s; }
.estrelinha-8 { bottom: 7%; left: 60%; width: 10px; height: 10px; animation-delay: 8.4s; animation-duration: 12s; }

@keyframes estrelinha-pisca {
  0%, 70%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
  80% { opacity: 0.35; transform: scale(1) rotate(45deg); }
  90% { opacity: 0.12; transform: scale(0.85) rotate(80deg); }
}

/* ---------- Cartao central ---------- */
.inicio-cartao {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e4);
}

/* Palco: a logo com os arcos girando em volta */
.inicio-palco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 82vw;
  margin-bottom: var(--e2);
}

.inicio-arcos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
  animation: aparecer 1.2s ease 0.6s backwards;
}

.arco {
  fill: none;
  stroke: var(--laranja);
  stroke-width: 1.5;
  stroke-linecap: round;
  transform-origin: 300px 300px;
}

.arco-1 { opacity: 0.18; stroke-dasharray: 28 72; animation: arco-gira 40s linear infinite; }
.arco-2 { opacity: 0.10; stroke-dasharray: 18 32; animation: arco-gira 64s linear infinite reverse; }
.arco-3 { opacity: 0.14; stroke-dasharray: 40 60; stroke-width: 1; animation: arco-gira 52s linear infinite; }

@keyframes arco-gira {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Logo animada ---------- */
.logo-animada {
  position: relative;
  width: 100%;
  aspect-ratio: 1459 / 998;
}

.logo-animada-svg,
.logo-animada-img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* A logo "respira": brilho suave a cada poucos segundos, depois da entrada */
.logo-animada-pronta {
  animation: logo-respira 5s ease-in-out 2s infinite;
}

@keyframes logo-respira {
  0%, 60%, 100% { filter: drop-shadow(0 0 0 rgba(254, 117, 2, 0)); }
  80% { filter: drop-shadow(0 0 14px rgba(254, 117, 2, 0.35)); }
}

/* C e J: primeiro o contorno se desenha, depois o degrade preenche */
.logo-traco {
  stroke: #FE7502;
  stroke-width: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  fill-opacity: 1;
  animation: traco-desenha 900ms cubic-bezier(0.4, 0, 0.2, 1) backwards, traco-preenche 450ms ease 550ms backwards;
}

.logo-traco-2 { animation-delay: 80ms, 630ms; }
.logo-traco-3 { animation-delay: 160ms, 710ms; }

@keyframes traco-desenha {
  from { stroke-dashoffset: 1; stroke-width: 10; }
  to { stroke-dashoffset: 0; stroke-width: 10; }
}

@keyframes traco-preenche {
  from { fill-opacity: 0; stroke-width: 10; }
  to { fill-opacity: 1; stroke-width: 0; }
}

/* Estrela: aparece com brilho e leve giro */
.logo-estrela {
  transform-box: fill-box;
  transform-origin: center;
  animation: estrela-aparece 650ms cubic-bezier(0.34, 1.56, 0.64, 1) 750ms backwards;
}

@keyframes estrela-aparece {
  from { opacity: 0; transform: scale(0.2) rotate(-120deg); filter: brightness(1.6); }
  70% { opacity: 1; filter: brightness(1.3); }
  to { opacity: 1; transform: scale(1) rotate(0deg); filter: brightness(1); }
}

/* Escrita CEJOTA EVENTOS sobe por ultimo */
.logo-escrita {
  animation: escrita-sobe 500ms ease 950ms backwards;
}

@keyframes escrita-sobe {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Frase, botao e mensagens ---------- */
.inicio-frase {
  margin: 0;
  font-size: 17px;
  color: var(--texto-suave);
  animation: subir 500ms ease 1100ms backwards;
}

.inicio-mensagem {
  animation: subir 400ms ease 1150ms backwards;
}

.inicio-botao {
  animation: subir 500ms ease 1250ms backwards;
}

.inicio-voltar {
  animation: subir 500ms ease 1350ms backwards;
}

/* Redesenho sem repetir a entrada (ex.: aviso de sem internet) */
.inicio-sem-entrada .logo-traco,
.inicio-sem-entrada .logo-estrela,
.inicio-sem-entrada .logo-escrita,
.inicio-sem-entrada .inicio-frase,
.inicio-sem-entrada .inicio-botao,
.inicio-sem-entrada .inicio-arcos {
  animation-name: none;
}

.inicio-sem-entrada .inicio-mensagem {
  animation-delay: 0ms;
}

.inicio-instalar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--raio);
  background: var(--fundo-bloco);
  font-size: 14px;
  color: var(--texto-suave);
  animation: subir 500ms ease 1400ms backwards;
}

.inicio-instalar p {
  margin: 0;
}

.conexao {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

/* ---------- Rodape ---------- */
.inicio-rodape {
  position: relative;
  z-index: 1;
  margin-top: var(--e6);
  font-size: 13px;
  color: var(--texto-fraco);
  text-align: center;
}

.inicio-rodape-login {
  animation: aparecer 600ms ease 1400ms backwards;
}

.inicio-rodape a {
  color: var(--texto-suave);
  text-decoration: none;
}

.inicio-rodape a:hover {
  text-decoration: underline;
}

.inicio-rodape .separador {
  margin: 0 var(--e2);
}

.inicio-rodape a,
.inicio-rodape span {
  white-space: nowrap;
}

/* ---------- Passagem do login para o sistema ---------- */
.entrada-cobertura {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e4);
  background: rgba(255, 255, 255, 1);
  pointer-events: none;
}

.entrada-logo {
  width: 300px;
  max-width: 82vw;
  height: auto;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.entrada-escondida {
  visibility: hidden;
}

/* ---------- Boas-vindas (primeiro acesso sem evento) ---------- */
.boas-vindas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e4);
  max-width: 560px;
  margin: var(--e6) auto 0;
  text-align: center;
}

.boas-vindas-ilustracao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  margin-bottom: var(--e2);
}

.boas-vindas-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 147, 3, 0.22) 0%, rgba(254, 117, 2, 0.08) 55%, rgba(254, 117, 2, 0) 72%);
  animation: halo-pulsa 4s ease-in-out infinite;
}

.boas-vindas-estrela {
  position: relative;
  width: 76px;
  height: 76px;
  animation: estrela-aparece 700ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards, estrela-respira 3s ease-in-out 900ms infinite;
}

@keyframes halo-pulsa {
  0%, 100% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.06); opacity: 1; }
}

.boas-vindas-titulo {
  margin: 0;
  font-size: 26px;
  animation: subir 500ms ease 200ms backwards;
}

.boas-vindas-texto {
  margin: 0;
  font-size: 17px;
  color: var(--texto-suave);
  animation: subir 500ms ease 300ms backwards;
}

.boas-vindas-criar {
  margin-top: var(--e2);
  animation: subir 500ms ease 400ms backwards;
}

.boas-vindas-convite {
  width: 100%;
  margin-top: var(--e3);
  padding: var(--e4) var(--e5);
  border: 1px dashed var(--laranja-borda);
  border-radius: var(--raio);
  background: var(--laranja-suave);
  animation: subir 500ms ease 500ms backwards;
}

.boas-vindas-convite p {
  margin: 0 0 var(--e2);
  font-size: 14px;
  color: var(--texto-suave);
}

.boas-vindas-email {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
}

.boas-vindas-email strong {
  font-size: 16px;
  color: var(--texto);
  word-break: break-all;
  user-select: all;
}

.pecas-voltar {
  display: flex;
  margin: var(--e6) auto 0;
}

@media (max-width: 767px) {
  .boas-vindas {
    margin-top: var(--e4);
  }
  .boas-vindas-titulo {
    font-size: 22px;
  }
  .boas-vindas-criar {
    width: 100%;
  }
  .mancha {
    width: 380px;
    height: 380px;
  }
}

/* ---------- Reduzir animacoes: tudo parado, no estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  .inicio *,
  .boas-vindas * {
    animation: none !important;
  }
  .estrelinha {
    opacity: 0.2;
  }
}