/* ============================================================
   MOTION — reveals on scroll, contador, hovers.
   Só transform/opacity. prefers-reduced-motion anula tudo.
   JS adiciona [data-reveal] e [data-revealed] aos alvos.
   ============================================================ */

/* Estado inicial dos elementos reveláveis (só quando JS está ativo).
   Duração mais longa para o reveal ser perceptível ao usuário. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 800ms var(--ease-out-expo),
    transform 800ms var(--ease-out-expo);
  will-change: transform, opacity;
}
.js [data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stagger por índice (itens de grid/lista) — mais espaçado, sequência visível. */
.js [data-reveal][style*="--reveal-i"] {
  transition-delay: calc(var(--reveal-i, 0) * 130ms);
}

/* ============================================================
   ENTRADAS DIFERENCIADAS POR SEÇÃO
   Cada seção tem um caráter de movimento próprio. Só sobrescreve o
   transform/filter inicial — o estado [data-revealed] (transform:none)
   continua valendo, então tudo assenta no lugar.
   ============================================================ */

/* NB: o escopo de seção usa :where() (especificidade 0) para que o estado
   final [data-revealed] { transform:none } continue vencendo e tudo assente. */

/* HERO — texto sobe suave, em cadência (na carga) */
.js :where(.hero__copy) [data-reveal] { transform: translateY(34px); }

/* NÚMEROS — sobem com zoom (escala dramática combina com os números gigantes) */
.js :where(#numeros) [data-reveal] { transform: translateY(32px) scale(0.9); }

/* MÍDIAS — cards "dados na mesa": caem com leve rotação que assenta */
.js :where(#midias) [data-reveal] { transform: translateY(46px) rotate(-2.5deg) scale(0.96); }

/* COBERTURA — cabeçalho/cidades com zoom; mapa entra em foco (blur → nítido) */
.js :where(#cobertura .section-head, #cobertura .coverage__cities)[data-reveal] {
  transform: translateY(26px) scale(0.96);
}
.js :where(#cobertura .coverage__map)[data-reveal] {
  transform: scale(1.04);
  filter: blur(12px);
  transition-property: opacity, transform, filter;
  transition-duration: 950ms;
}
.js :where(#cobertura .coverage__map)[data-revealed] { filter: blur(0); }

/* DIFERENCIAL — os 3 contrastes dão "pop" com overshoot (easing back) */
.js :where(#diferencial .contrast)[data-reveal] {
  transform: translateY(16px) scale(0.78);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-duration: 720ms;
}

/* SOBRE — entrada lateral (split): texto da esquerda, selo da direita */
.js :where(#sobre .sobre__text)[data-reveal] { transform: translateX(-48px); }
.js :where(#sobre .sobre__visual)[data-reveal] { transform: translateX(48px); }

/* MARCAS — fade discreto, deslocamento pequeno (logos não devem se mexer muito) */
.js :where(#marcas) [data-reveal] { transform: translateY(14px); }

/* CTA FINAL — zoom de aproximação, convidativo */
.js :where(#contato) [data-reveal] { transform: translateY(24px) scale(0.95); }

/* Imagem do hero entra como placa instalada (scale leve). */
.js .hero__visual img {
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 850ms var(--ease-out-expo),
    transform 850ms var(--ease-out-expo);
}
.js .hero__visual.is-in img {
  opacity: 1;
  transform: scale(1);
}

/* FAQ: anima abertura via grid-rows sem mexer em height real.
   Wrapper opcional aplicado por JS; o <details> nativo funciona sem isso. */
.js .faq__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-normal) var(--ease-out-expo);
}
.js .faq__item[open] .faq__a-wrap { grid-template-rows: 1fr; }
.js .faq__a-wrap > .faq__a { overflow: hidden; }

/* ============================================================
   prefers-reduced-motion: conteúdo visível, sem movimento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal][data-revealed],
  .js .hero__visual img,
  .js .hero__visual.is-in img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .js .faq__a-wrap { transition: none !important; }
}