/* Estrutura da sequência de frames. CSS puro, sem dependência de Tailwind. */
.sfq {
  position: relative;
  width: 100%;
  /* altura = quanto de scroll a sequência consome, mais 100vh do palco preso.
     400vh é um bom ponto de partida: 300vh de curso útil. */
  height: 400vh;
  overflow: clip;              /* clip não cria contexto de scroll, ao contrário de hidden */
}

.sfq-palco {
  position: sticky;
  top: 0;
  height: 100svh;              /* svh evita o salto da barra de endereço no celular */
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

/* o primeiro frame fica visível já no HTML, então entra na conta do LCP.
   o script o esconde no instante em que o canvas desenha o primeiro quadro. */
.sfq-primeiro,
.sfq-canvas {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  /* quem desligou animação vê só o primeiro frame, parado */
  .sfq { height: 100svh; }
  .sfq-canvas { display: none; }
}