/**
 * ROO3 | Efeitos de rolagem — folha do motor (lab/efeitos/efeitos.css)
 *
 * Só a mecânica dos efeitos. Cor, tipografia e layout são da página, para esta
 * folha entrar em qualquer projeto sem brigar com o design dele.
 *
 * O PONTO MAIS IMPORTANTE DESTE ARQUIVO É O QUE ELE **NÃO** FAZ:
 * não existe aqui nenhuma regra que esconda conteúdo por padrão. Nada de
 * `.revelar { opacity: 0 }`. Quem esconde é o JS (`.ef-oculto`), e só no que ele
 * confirmou estar abaixo da dobra. Assim, script que não carrega, erro de rede
 * ou aba aberta em segundo plano deixam a página PARADA, nunca em branco.
 */

/* ── entrada (revelar, escalonar, palavras) ─────────────────────────────────
   A classe .ef-oculto é aplicada pelo JS. A .ef-dentro devolve ao natural. */
.ef-oculto {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .72s cubic-bezier(.22,.61,.36,1),
              transform .72s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.ef-oculto.ef-dentro { opacity: 1; transform: none; }

/* direções alternativas, escolhidas por data-ef-de no HTML */
[data-ef-de="cima"]     > .ef-oculto, .ef-oculto[data-ef-de="cima"]     { transform: translateY(-22px); }
[data-ef-de="esquerda"] > .ef-oculto, .ef-oculto[data-ef-de="esquerda"] { transform: translateX(-28px); }
[data-ef-de="direita"]  > .ef-oculto, .ef-oculto[data-ef-de="direita"]  { transform: translateX(28px); }
[data-ef-de="escala"]   > .ef-oculto, .ef-oculto[data-ef-de="escala"]   { transform: scale(.93); }
[data-ef-de="borrado"]  > .ef-oculto, .ef-oculto[data-ef-de="borrado"]  { filter: blur(9px); transform: none; }
[data-ef-de="borrado"]  > .ef-oculto.ef-dentro,
.ef-oculto[data-ef-de="borrado"].ef-dentro { filter: none; }

/* ── palavras ──────────────────────────────────────────────────────────────
   Cada palavra vira duas camadas: a de fora recorta, a de dentro sobe. Sem o
   overflow o texto vazaria por cima da linha anterior. */
.ef-palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;     /* espaço para descidas de g, p e q não serem cortadas */
  margin-bottom: -.08em;
}
.ef-palavra > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .82s cubic-bezier(.22,.61,.36,1), opacity .82s;
}
.ef-palavra > span.ef-oculto { opacity: 1; }             /* aqui quem esconde é o recorte */
.ef-palavra > span.ef-dentro { transform: none; }

/* ── parallax e zoom ───────────────────────────────────────────────────────
   O JS escreve transform. Aqui só a promessa à GPU e o recorte do pai. */
[data-ef="parallax"], [data-ef="zoom"] { will-change: transform; }
.ef-recorte { overflow: hidden; }                        /* pai de zoom/parallax */

/* ── cortina ───────────────────────────────────────────────────────────────
   Sem JS o clip-path nunca é escrito e a imagem aparece inteira, que é o
   comportamento correto de fallback. */
[data-ef="cortina"] { will-change: clip-path; }

/* ── horizontal ────────────────────────────────────────────────────────────
   A ALTURA da seção define o curso da faixa: 300vh de altura dá três telas de
   rolagem para a faixa atravessar. Quem controla é o CSS da página. */
[data-ef="horizontal"] { position: relative; }
[data-ef="horizontal"] > .ef-preso {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; overflow: hidden;
}
[data-ef-faixa] { display: flex; gap: 22px; will-change: transform; }
[data-ef-faixa] > * { flex: none; }

/* ── letreiro ──────────────────────────────────────────────────────────────
   user-select desligado porque o conteúdo é duplicado pelo JS: selecionar
   copiaria tudo duas vezes. */
[data-ef="letreiro"] { overflow: hidden; }
[data-ef="letreiro"] [data-ef-faixa] { user-select: none; }

/* ── pilha ─────────────────────────────────────────────────────────────────
   O grude é do CSS; a escala e o escurecimento são do JS. O `top` escalonado
   por índice é o que deixa a borda de cada carta anterior aparecendo. */
[data-ef="pilha"] { display: grid; gap: 0; }
[data-ef-carta] {
  position: sticky;
  top: 12vh;
  transform-origin: 50% 0%;
  will-change: transform, filter;
}

/* ── progresso ─────────────────────────────────────────────────────────────
   Nasce em scaleX(0) e é a ÚNICA coisa desta folha que começa invisível. Pode:
   é indicador, não conteúdo. Sem JS fica uma linha zerada, que não atrapalha. */
[data-ef="progresso"] {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 9999; will-change: transform;
}

/* ── traçado ───────────────────────────────────────────────────────────────
   Sem JS o strokeDasharray não é escrito e o desenho aparece completo. */
[data-ef="tracado"] path, [data-ef="tracado"] line,
[data-ef="tracado"] polyline, [data-ef="tracado"] circle, [data-ef="tracado"] rect {
  will-change: stroke-dashoffset;
}

/* ── movimento reduzido ────────────────────────────────────────────────────
   Não basta zerar a transição: o JS também não monta os efeitos contínuos
   nesse modo. Aqui é o cinto, para o caso de a classe já ter sido aplicada
   antes de a preferência mudar (acontece ao trocar no sistema com a aba
   aberta). */
@media (prefers-reduced-motion: reduce) {
  .ef-oculto, .ef-palavra > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  [data-ef="parallax"], [data-ef="zoom"], [data-ef-faixa], [data-ef-carta] {
    transform: none !important;
    filter: none !important;
  }
  [data-ef="cortina"] { clip-path: none !important; }
}