/* Sistema único de animação.
   Todo estado inicial é condicionado a .js-animar (posta por head.js antes da pintura).
   Sem JS, nada fica escondido. O disparo vem do animations.js adicionando .visivel.
   Anima exclusivamente transform e opacity. */

/* ---- Entrada padrão: sobe e aparece ---- */
.js-animar .animar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--transicao-padrao), transform var(--transicao-padrao);
}
.js-animar .animar.visivel {
  opacity: 1;
  transform: none;
}

/* ---- Máscara de linha: o texto sobe de dentro do corte ---- */
/* padding-bottom dá espaço pra descendente de j/p/g não cortar no overflow:hidden;
   margin-bottom negativo do mesmo tamanho cancela o espaço extra entre linhas. */
.mascara-linha { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.js-animar .mascara-linha > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--transicao-padrao);
}
/* O container da máscara não se move: quem se move são as linhas */
.js-animar .animar--mascara {
  opacity: 1;
  transform: none;
}
.js-animar .animar--mascara.visivel .mascara-linha > span { transform: none; }

/* Escalonamento: 90ms entre linhas, o olho recebe ordem de leitura */
.js-animar .animar--mascara .mascara-linha:nth-child(1) > span { transition-delay: calc(var(--passo-coreografia) * 0); }
.js-animar .animar--mascara .mascara-linha:nth-child(2) > span { transition-delay: calc(var(--passo-coreografia) * 1); }
.js-animar .animar--mascara .mascara-linha:nth-child(3) > span { transition-delay: calc(var(--passo-coreografia) * 2); }
.js-animar .animar--mascara .mascara-linha:nth-child(4) > span { transition-delay: calc(var(--passo-coreografia) * 3); }

/* ---- Régua que desenha ---- */
.js-animar .animar--regua {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao-padrao);
}
.js-animar .animar--regua.visivel { transform: none; }

/* ---- Atrasos de coreografia ---- */
.js-animar .delay-1 { transition-delay: calc(var(--passo-coreografia) * 1); }
.js-animar .delay-2 { transition-delay: calc(var(--passo-coreografia) * 2); }
.js-animar .delay-3 { transition-delay: calc(var(--passo-coreografia) * 3); }
.js-animar .delay-4 { transition-delay: calc(var(--passo-coreografia) * 4); }
.js-animar .delay-5 { transition-delay: calc(var(--passo-coreografia) * 5); }
.js-animar .delay-6 { transition-delay: calc(var(--passo-coreografia) * 6); }

/* ---- Pulso do centro de distribuição e das praças ---- */
/* Removido a pedido: a animação de onda lia como bolas-fantasma no hover.
   O feedback de interação agora é só a cor do ponto e o rótulo. */
.mapa__pulso { display: none; }

/* ---- Menu móvel ---- */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--altura-cabecalho) + var(--espaco-container)) var(--espaco-container) var(--espaco-container);
  background: var(--cor-fundo-escuro);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--transicao-media), transform var(--transicao-media), visibility var(--transicao-media);
}
.menu-movel.aberto {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu-movel a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cor-texto-sobre-escuro);
  border-bottom: 1px solid var(--cor-linha-escura);
}
.menu-movel .botao {
  margin-top: 1.5rem;
  align-self: flex-start;
  border-bottom: 0;
  font-size: var(--texto-apoio);
  color: var(--cor-tinta-sobre-destaque);
}

@keyframes hv-marquee {
  to { transform: translateX(-50%); }
}
.hv-marquee__trilha {
  animation: hv-marquee var(--hv-marquee-duracao) linear infinite;
}

@keyframes hv-modelo-loop {
  0% {
    opacity: 0;
    transform: translate3d(6%, 4%, 0) scale(0.96);
  }
  2% { opacity: 0; }
  5% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  8% { opacity: 1; }
  11% {
    opacity: 0;
    transform: translate3d(-4%, -2%, 0) scale(1.03);
  }
  100% {
    opacity: 0;
    transform: translate3d(-4%, -2%, 0) scale(1.03);
  }
}
.hv-modelos__slide {
  animation: hv-modelo-loop var(--hv-modelo-duracao) var(--ease-padrao) infinite both;
}
.hv-modelos__slide:nth-child(1) { animation-delay: -2s; }
.hv-modelos__slide:nth-child(2) { animation-delay: 2s; }
.hv-modelos__slide:nth-child(3) { animation-delay: 6s; }
.hv-modelos__slide:nth-child(4) { animation-delay: 10s; }
.hv-modelos__slide:nth-child(5) { animation-delay: 14s; }
.hv-modelos__slide:nth-child(6) { animation-delay: 18s; }
.hv-modelos__slide:nth-child(7) { animation-delay: 22s; }
.hv-modelos__slide:nth-child(8) { animation-delay: 26s; }
.hv-modelos__slide:nth-child(9) { animation-delay: 30s; }
.hv-modelos__slide:nth-child(10) { animation-delay: 34s; }
.hv-modelos__slide:nth-child(11) { animation-delay: 38s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-animar .animar,
  .js-animar .animar--mascara,
  .js-animar .animar--regua {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-animar .mascara-linha > span { transform: none !important; transition: none !important; }
  .mapa__brilho line { animation: none; opacity: 0.45; }
  .hero__palco { transform: none !important; }
  .cabecalho,
  .cabecalho__logo img,
  .cabecalho__logo .marca,
  .cabecalho__nav a,
  .menu-alternar {
    transition: none !important;
  }
  .menu-movel { transition: none !important; transform: none !important; }
  .hv-marquee__trilha { animation: none; }
  .frente .foto__img,
  .botao,
  .botao::before { transition: none; }
  .hv-modelos__slide { animation: none; opacity: 0; transform: none; }
  .hv-modelos__slide:first-child { opacity: 1; }
}