/*
  Fluxo horizontal por scroll.

  Dentro de um acto, o scroll anda da esquerda para a direita; entre actos,
  cai na vertical. O movimento é aplicado por docs/fluxo.js, que só corre em
  ecrãs de 1024px para cima e sem «reduzir movimento» ligado.

  A degradação é UM caminho só: a mesma regra serve o ecrã pequeno e o
  movimento reduzido. Dois caminhos seriam dois caminhos para testar.
*/

.acto {
  position: relative;
  /* a altura real é posta por fluxo.js, em função do número de cenas */
  perspective: 1200px;
  /* O track é uma fila de cenas com 100vw cada — sem isto, o documento fica
     com 3x a largura da janela e aparece uma barra de scroll horizontal a
     sério. O movimento é por transform; o transbordo tem de ficar contido. */
  overflow: hidden;
}

.acto-track {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  transform-style: preserve-3d;
  /* sem transição CSS: a suavidade vem da interpolação em fluxo.js, que não
     compete com o scroll nem acumula atraso ao inverter o sentido */
}

.cena {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, 7vw, 120px);
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.cena-conteudo { max-width: 780px; width: 100%; }

/* Profundidade: o que está à frente move-se mais, o fundo fica para trás.
   É paralaxe sem calcular nada por elemento — o browser faz a conta. */
.camada-frente { transform: translateZ(60px); }
.camada-meio   { transform: translateZ(20px); }
.camada-fundo  { transform: translateZ(-80px); opacity: .55; }

/* Indicador de progresso: sem ele, o scroll horizontal desorienta. */
.acto-progresso {
  position: absolute;
  left: clamp(24px, 7vw, 120px);
  right: clamp(24px, 7vw, 120px);
  bottom: 42px;
  height: 2px;
  background: rgba(255, 255, 255, .09);
  border-radius: 2px;
  overflow: hidden;
}
.acto-progresso-barra {
  height: 100%;
  background: var(--accent, #10f5a0);
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 2px;
}

.acto-legenda {
  position: absolute;
  left: clamp(24px, 7vw, 120px);
  bottom: 54px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2, #6a7f96);
}

/* ── Degradação ────────────────────────────────────────────────────────────
   Um só caminho para ecrã pequeno e para movimento reduzido: os actos passam
   a colunas verticais normais, com o mesmo conteúdo e a mesma ordem. */
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .acto { height: auto !important; perspective: none; }
  .acto-track {
    position: static;
    height: auto;
    display: block;
    transform: none !important;
    will-change: auto;
  }
  .cena {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 64px clamp(20px, 6vw, 40px);
  }
  .camada-frente,
  .camada-meio,
  .camada-fundo { transform: none; opacity: 1; }
  .acto-progresso,
  .acto-legenda { display: none; }
}

/* Movimento reduzido: também anula reveals e transições do resto do site. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}