/* Animações da home. Arquivo separado para não misturar com o visual. */

/* letras e linhas ficam invisíveis (mas ocupando espaço: o card não pula) só depois
   que o terminal é armado, perto da tela; antes disso o código aparece inteiro */
.anim-armado .anim-letra,
.anim-armado .anim-resposta {
  visibility: hidden;
}

.anim-letra.anim-visivel,
.anim-resposta.anim-visivel {
  visibility: visible;
}

.anim-resposta.anim-visivel {
  animation: anim-surgir 0.25s ease-out;
}

/* largura zero: o cursor anda pelo texto sem empurrar as letras */
.anim-cursor {
  display: inline-block;
  position: relative;
  width: 0;
  height: 1em;
  vertical-align: text-bottom;
}

.anim-cursor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  width: 7px;
  height: 1.15em;
  background: #e8ecf3;
  opacity: 0.8;
}

/* só pisca quando está parado; digitando, fica aceso, como num terminal */
.anim-cursor.anim-parado::after {
  animation: anim-piscar 1s steps(1) infinite;
}

/* selo "Liberado" do card do BI: entra por último, com um leve crescimento */
.mock-seal-status {
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.mock-seal-status.anim-selo-oculto {
  opacity: 0;
  transform: scale(0.8);
}

/* largura fixa: a caixa não treme quando o número passa de 1 para 2 dígitos */
.mock-seal-score {
  min-width: 10ch;
  text-align: center;
}

/* ===== Linha do tempo 01-02-03 acendendo com a rolagem ===== */
.anim-luz-linha {
  position: absolute;
  top: -56px;
  bottom: -56px;
  left: 50%;
  width: 2px;
  background: #a3c1b0;
  box-shadow: 0 0 10px rgba(163, 193, 176, 0.6);
  transform: translateX(-50%) scaleY(var(--progresso, 0));
  transform-origin: top;
}

.product-row:first-child .anim-luz-linha { top: 50%; }
.product-row:last-child .anim-luz-linha { bottom: 50%; }

#produtos .num {
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

#produtos .num.anim-num-aceso {
  border-color: #a3c1b0;
  box-shadow: 0 0 0 4px rgba(163, 193, 176, 0.14), 0 0 16px rgba(163, 193, 176, 0.5);
}

/* ===== Cena da segurança: o CSV chega, é apagado e só o resultado fica ===== */
/* a linha e os números substituem os filetes e os números de cada passo */
.anim-com-linha {
  position: relative;
}

.security .anim-com-linha .point {
  border-top: none;
  padding-top: 0;
}

.anim-com-linha .point-num {
  display: none;
}

/* a cena ocupa uma linha inteira da grade, acima dos 3 passos */
.anim-cena {
  grid-column: 1 / -1;
  position: relative;
  height: 130px;
  margin-bottom: -10px;
}

/* as 3 paradas (0%, 50%, 100%) caem no início de cada coluna; 20px é o raio da estação */
.anim-trilho {
  position: absolute;
  bottom: 19px;
  left: 20px;
  width: calc(66.67% + 18.67px);
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.anim-estacao {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fundo-home);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--mono);
  font-size: 12px;
  transform: translate(-50%, -50%);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.anim-estacao-1 { left: 0; }
.anim-estacao-2 { left: 50%; }
.anim-estacao-3 { left: 100%; }

.anim-cena:not([data-etapa="0"]) .anim-estacao-1,
.anim-cena[data-etapa="3"] .anim-estacao-2,
.anim-cena[data-etapa="4"] .anim-estacao-2,
.anim-cena[data-etapa="5"] .anim-estacao-2,
.anim-cena[data-etapa="5"] .anim-estacao-3 {
  border-color: #cfe3d7;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(207, 227, 215, 0.14), 0 0 16px rgba(207, 227, 215, 0.5);
}

.anim-trilho-luz {
  position: absolute;
  inset: 0;
  background: #cfe3d7;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s ease-in-out;
}

.anim-cena[data-etapa="2"] .anim-trilho-luz,
.anim-cena[data-etapa="3"] .anim-trilho-luz { transform: scaleX(0.5); }
.anim-cena[data-etapa="4"] .anim-trilho-luz,
.anim-cena[data-etapa="5"] .anim-trilho-luz { transform: scaleX(1); }

/* o arquivo anda por cima da linha, centrado nas estações */
.anim-arquivo {
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 2;
  line-height: 0;
  color: #fff;
  opacity: 0;
  transform: translateX(-50%);
  transition: left 1s ease-in-out, top 1s ease-in-out, opacity 0.6s ease, filter 0.7s ease, transform 0.7s ease;
}

.anim-cena[data-etapa="1"] .anim-arquivo { opacity: 1; }
.anim-cena[data-etapa="2"] .anim-arquivo { opacity: 1; left: 50%; }

.anim-cena[data-etapa="3"] .anim-arquivo,
.anim-cena[data-etapa="4"] .anim-arquivo,
.anim-cena[data-etapa="5"] .anim-arquivo {
  left: 50%;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-50%) scale(1.5);
}

.anim-particulas {
  position: absolute;
  bottom: 58px;
  left: 50%;
  z-index: 2;
}

.anim-particulas i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #fff;
  opacity: 0;
}

.anim-cena[data-etapa="3"] .anim-particulas i,
.anim-cena[data-etapa="4"] .anim-particulas i,
.anim-cena[data-etapa="5"] .anim-particulas i {
  animation: anim-particula 0.85s ease-out forwards;
}

.anim-resultado {
  position: absolute;
  bottom: 34px;
  left: 100%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #cfe3d7;
  color: var(--fundo-home);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) scale(0.85);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.anim-cena[data-etapa="5"] .anim-resultado {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.security .point {
  transition: opacity 0.5s ease;
}

.security .point.anim-ponto-apagado {
  opacity: 0.4;
}

/* Celular: passos empilhados, então a linha fica vertical à esquerda */
@media (max-width: 860px) {
  .anim-com-linha {
    padding-bottom: 56px;
  }

  .security .anim-com-linha .point {
    padding-left: 56px;
    min-height: 40px;
  }

  .anim-cena {
    position: absolute;
    inset: 0;
    height: auto;
    margin: 0;
    pointer-events: none;
  }

  .anim-trilho {
    top: 20px;
    bottom: auto;
    left: 20px;
    width: 2px;
    height: var(--altura-trilho, 200px);
  }

  .anim-trilho-luz {
    transform: scaleY(0);
    transform-origin: top;
  }

  .anim-cena[data-etapa="2"] .anim-trilho-luz,
  .anim-cena[data-etapa="3"] .anim-trilho-luz { transform: scaleY(var(--fracao, 0.5)); }
  .anim-cena[data-etapa="4"] .anim-trilho-luz,
  .anim-cena[data-etapa="5"] .anim-trilho-luz { transform: scaleY(1); }

  .anim-estacao {
    left: 50%;
  }

  .anim-estacao-1 { top: 0; }
  .anim-estacao-2 { top: calc(var(--fracao, 0.5) * 100%); }
  .anim-estacao-3 { top: 100%; }

  /* não cabe entre as estações: o arquivo viaja por cima delas, da 01 até a 02 */
  .anim-arquivo {
    top: -16px;
    bottom: auto;
    width: 26px; /* a linha só tem 2px: sem isso o ícone encolhe junto */
    left: 50%;
  }

  .anim-arquivo svg {
    width: 26px;
    height: 31px;
  }

  .anim-cena[data-etapa="2"] .anim-arquivo,
  .anim-cena[data-etapa="3"] .anim-arquivo,
  .anim-cena[data-etapa="4"] .anim-arquivo,
  .anim-cena[data-etapa="5"] .anim-arquivo {
    left: 50%;
    top: calc(var(--fracao, 0.5) * 100% - 16px);
  }

  .anim-particulas {
    top: calc(var(--fracao, 0.5) * 100%);
    bottom: auto;
  }

  /* o resultado aparece logo abaixo do texto do passo 03 */
  .anim-resultado {
    top: calc(100% + var(--abaixo-do-ultimo, 60px));
    bottom: auto;
    left: 36px;
    transform: scale(0.85);
    transform-origin: left center;
  }

  .anim-cena[data-etapa="5"] .anim-resultado {
    transform: scale(1);
  }
}

/* ===== Borda dos cards brilhando perto do mouse ===== */
.anim-borda {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 1.5px;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(207, 227, 215, 0.95), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.anim-mouse-dentro .anim-borda {
  opacity: 1;
}

@keyframes anim-particula {
  0%   { opacity: 0.9; transform: translate(0, 0) scale(1); }
  100% { opacity: 0;   transform: translate(var(--x), var(--y)) scale(0.4); }
}

@keyframes anim-piscar {
  50% { opacity: 0; }
}

@keyframes anim-surgir {
  from { opacity: 0; }
  to   { opacity: 1; }
}