/* Efeitos do site público (padrão FGD), versão só CSS: para páginas que não carregam script.
   Mesmos atributos data-* do fgd-efeitos.js. Sem suporte a animação por rolagem, a página fica parada e completa;
   quem pede menos movimento não recebe nenhum efeito. */

.efeito-progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--efeito-destaque, currentColor);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .efeito-progresso {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Abertura: título e depois texto e botões do topo. */
  [data-hero-titulo] {
    animation: efeito-sobe 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  }
  [data-hero-item] {
    animation: efeito-sobe 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  }
  [data-hero-item] ~ [data-hero-item] {
    animation-delay: 0.5s;
  }

  @supports (animation-timeline: view()) {
    /* Títulos de seção e grupos entram conforme chegam na tela. */
    [data-titulo],
    [data-cascata] > * {
      animation: efeito-sobe linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    [data-cascata] > :nth-child(2) { animation-range: entry 8% entry 78%; }
    [data-cascata] > :nth-child(3) { animation-range: entry 16% entry 86%; }
    [data-cascata] > :nth-child(n + 4) { animation-range: entry 24% entry 94%; }

    /* Barra de leitura no cabeçalho. */
    .efeito-progresso {
      animation: efeito-barra linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes efeito-sobe {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes efeito-barra {
  to {
    transform: scaleX(1);
  }
}