/*
 * Motion — Instituto Comute
 * Só dois padrões (DESIGN.md § Motion): revelação por scroll + tipografia
 * cinética do hero, cada um rodando uma vez, nunca contínuo. Respeita
 * prefers-reduced-motion sem exceção.
 */

/*
 * .cc-reveal por si só é sempre visível (fallback sem JS = conteúdo normal).
 * Só quando o JS roda e adiciona .cc-pending o elemento fica oculto até
 * entrar no viewport (ver motion.js) — nunca o inverso.
 */
.cc-reveal.cc-pending {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.cc-reveal.cc-pending.cc-in {
  opacity: 1;
  transform: translateY(0);
}

/* Tipografia cinética do hero — cada .cc-hero-line revela seu conteúdo uma vez, na carga */
.cc-hero-line {
  display: block;
  overflow: hidden;
}

.cc-hero-line > span {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  animation: cc-hero-reveal 0.9s cubic-bezier(0.22, 0.9, 0.24, 1) forwards;
}

.cc-hero-line:nth-child(1) > span { animation-delay: 0.05s; }
.cc-hero-line:nth-child(2) > span { animation-delay: 0.2s; }
.cc-hero-line:nth-child(3) > span { animation-delay: 0.35s; }

@keyframes cc-hero-reveal {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Guard — desativa toda animação/transição pra quem pede menos movimento.
   O conteúdo já está no HTML (ver motion.js) — nada fica escondido. */
@media (prefers-reduced-motion: reduce) {
  .cc-reveal,
  .cc-hero-line > span {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }
}