/* ==========================================================================
   MOVIMENTO - entrada por scroll e coreografia
   Só transform e opacity são animados. Irmãos nunca entram com a mesma
   duração, a mesma distância e o mesmo easing.
   ========================================================================== */

.anima {
  opacity: 0;
}

.anima.esta-visivel {
  opacity: 1;
  transform: none;
}

/* --- Texto de apoio, rótulo e bloco de ação ------------------------------- */

[data-anima="subir"] {
  transform: translateY(16px);
  transition:
    opacity var(--t-media) var(--curva-saida),
    transform var(--t-media) var(--curva-saida);
}

/* Elementos de apoio seguem o título da própria seção com defasagem curta. */
[data-anima="subir"]:nth-of-type(2) { transition-delay: 80ms; }
[data-anima="subir"]:nth-of-type(3) { transition-delay: 140ms; }

/* --- Títulos -------------------------------------------------------------- */

[data-anima="titulo"] {
  transform: translateY(26px);
  transition:
    opacity var(--t-longa) var(--curva-suave),
    transform var(--t-longa) var(--curva-suave);
}

/* O H1 abre por máscara: cada linha sobe de dentro do próprio recorte. */
.inicio__titulo .linha__interna {
  transform: translateY(105%);
  transition: transform 900ms var(--curva-saida);
}

.inicio__titulo.esta-visivel .linha__interna { transform: translateY(0); }

.inicio__titulo.esta-visivel .linha:nth-child(2) .linha__interna {
  transition-duration: 1020ms;
  transition-delay: 110ms;
}

/* Com a máscara em ação, o título não precisa deslizar como bloco. */
.inicio__titulo { transform: none; }

/* --- Figuras -------------------------------------------------------------- */

[data-anima="figura"] {
  transform: translateY(34px) scale(0.985);
  transition:
    opacity 820ms var(--curva-suave),
    transform 820ms var(--curva-suave);
}

/* --- Cultos ----------------------------------------------------------------
   Aqui a entrada não move nada na vertical. Dois blocos irmãos subindo de
   alturas diferentes ficam visivelmente desalinhados durante toda a animação,
   e é a tela parada que o olho julga. O que varia entre eles é o tempo: um
   revela antes do outro, com curva e duração próprias.
--------------------------------------------------------------------------- */

.culto {
  transform: none;
  transition: opacity 560ms var(--curva-saida);
}

.culto:nth-child(2) {
  transition-duration: 720ms;
  transition-delay: 140ms;
  transition-timing-function: var(--curva-suave);
}

/* --- Eventos ---------------------------------------------------------------
   Mesma decisão dos cultos: as artes ficam paradas no lugar e só acendem, uma
   depois da outra. A defasagem continua, sem custo de alinhamento.
--------------------------------------------------------------------------- */

.evento {
  transform: none;
  transition: opacity 560ms var(--curva-saida);
}

.evento:nth-child(2) {
  transition-duration: 680ms;
  transition-delay: 110ms;
  transition-timing-function: var(--curva-suave);
}

.evento:nth-child(3) {
  transition-duration: 820ms;
  transition-delay: 220ms;
  transition-timing-function: var(--curva-suave);
}

/* --- Vídeos ----------------------------------------------------------------
   Seis cartões em duas fileiras. A defasagem cresce com a coluna e a segunda
   fileira parte de mais longe, para as duas não chegarem como um bloco só.
--------------------------------------------------------------------------- */

.video {
  transform: translateY(24px);
  transition:
    opacity 540ms var(--curva-saida),
    transform 540ms var(--curva-saida);
}

.video:nth-child(2) { transition-delay: 70ms; transition-duration: 600ms; }
.video:nth-child(3) { transition-delay: 140ms; transition-duration: 660ms; }

.video:nth-child(4) {
  transform: translateY(34px);
  transition-delay: 90ms;
  transition-duration: 700ms;
  transition-timing-function: var(--curva-suave);
}

.video:nth-child(5) {
  transform: translateY(38px);
  transition-delay: 160ms;
  transition-duration: 760ms;
  transition-timing-function: var(--curva-suave);
}

.video:nth-child(6) {
  transform: translateY(42px);
  transition-delay: 230ms;
  transition-duration: 820ms;
  transition-timing-function: var(--curva-suave);
}

/* --- Contas da contribuição ------------------------------------------------ */

.conta {
  transform: translateY(24px);
  transition:
    opacity 580ms var(--curva-saida),
    transform 580ms var(--curva-saida);
}

.conta:nth-child(2) {
  transform: translateY(38px);
  transition-duration: 720ms;
  transition-delay: 120ms;
  transition-timing-function: var(--curva-suave);
}

/* --- Movimento reduzido ---------------------------------------------------
   Nada se move e nada fica escondido. A hierarquia continua de pé sem a
   animação, que é o teste de que ela nunca foi o conteúdo.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  .anima,
  .anima.esta-visivel,
  .inicio__titulo .linha__interna {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .regua__fita,
  .ao-vivo__ponto { animation: none; }

  .botao,
  .elo,
  .ao-vivo,
  .evento--elo img,
  .evento__acao::after,
  .video__capa img,
  .video__play,
  .navegacao,
  .navegacao__lista a::after,
  .alternador__traco,
  .alternador__traco::before,
  .alternador__traco::after {
    transition-duration: 1ms;
  }

  .botao:hover { transform: none; }
}