/* Par do rolagem.js. A altura da seção (style="height:500vh") decide quanto
   a pessoa rola pra ver o vídeo inteiro: mais alto, mais lento. */

[data-rolagem] { position: relative; }

[data-rolagem] .palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

[data-rolagem] canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* O texto surge em vez de aparecer seco: pedido dele em 16/09, "aquelas
   animação de surgindo o texto". Onde cada etapa fica é do site. */
[data-rolagem] [data-de] {
  position: absolute;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}

[data-rolagem] [data-de].ativa {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-rolagem] [data-de] { transition: none; transform: none; }
}