/* ============================================================
   UM LUGAR COMUNIDADE — SISTEMA CLARO — LP ESTRATÉGIA — motion.css
   Todo o movimento desta página. Estado visual é de componentes.css;
   aqui só transição, transform, keyframe. Tokens em base.css
   (--d-*, --ease-*, --stagger, cores, espaço).
   Espelha preview/assets/css/motion.css nas seções que as duas
   páginas compartilham — .rev, .linha, .px — pra que apresentação
   e LP se movam igual. Esta página não usa loader, comparador,
   abas, swatch, campo editável nem mote rotativo: essas seções do
   preview não têm classe correspondente aqui e não entram.
   Regra geral: no máximo um elemento em movimento por tela. Nunca
   "transition: all". Nunca anima top/left/width/height — só
   transform, opacity, translate, background-color, color e
   border-color.
   ============================================================ */

/* 1. REVELAÇÃO — .rev + data-rev="fade|sobe|mascara|escala" ---- */

.rev {
  opacity: 0;
  transition: opacity var(--d-cena) var(--ease-saida),
              transform var(--d-cena) var(--ease-saida);
  will-change: opacity, transform;
}

.rev[data-rev="fade"] { transform: none; } /* só opacidade */
.rev[data-rev="sobe"] { transform: translateY(var(--e-6)); }
/* mascara: o deslocamento real é do filho .linha__i (seção 2) — o
   próprio .rev fica em transform:none pra nunca disputar a
   propriedade transform com .px no mesmo elemento */
.rev[data-rev="mascara"] { transform: none; }
.rev[data-rev="escala"] { transform: scale(0.75); transform-origin: left center; }

.rev.rev--on { opacity: 1; transform: none; }

/* stagger — 8 regras explícitas; cobrem o .rev e, no tipo mascara,
   o filho .linha__i junto */
.rev[data-delay="1"], .rev[data-delay="1"] .linha__i { transition-delay: calc(var(--stagger) * 1); }
.rev[data-delay="2"], .rev[data-delay="2"] .linha__i { transition-delay: calc(var(--stagger) * 2); }
.rev[data-delay="3"], .rev[data-delay="3"] .linha__i { transition-delay: calc(var(--stagger) * 3); }
.rev[data-delay="4"], .rev[data-delay="4"] .linha__i { transition-delay: calc(var(--stagger) * 4); }
.rev[data-delay="5"], .rev[data-delay="5"] .linha__i { transition-delay: calc(var(--stagger) * 5); }
.rev[data-delay="6"], .rev[data-delay="6"] .linha__i { transition-delay: calc(var(--stagger) * 6); }
.rev[data-delay="7"], .rev[data-delay="7"] .linha__i { transition-delay: calc(var(--stagger) * 7); }
.rev[data-delay="8"], .rev[data-delay="8"] .linha__i { transition-delay: calc(var(--stagger) * 8); }

/* 2. REVELAÇÃO DE TEXTO POR LINHA — .linha / .linha__i --------- */

.linha { overflow: hidden; display: block; }

.linha__i {
  display: block;
  transform: translateY(110%);
  transition: transform var(--d-cena) var(--ease-saida);
  will-change: transform;
}

.rev.rev--on .linha__i { transform: translateY(0); }

/* 3. PARALLAX — .px + --px-y (escrito pelo JS a cada frame) ---- */

.px {
  /* translate isolado (CSS Transforms nível 2), não transform:
     translate3d — assim o parallax nunca disputa a propriedade
     transform com .rev no mesmo elemento e ainda compõe em GPU */
  translate: 0 var(--px-y, 0px) 0;
  will-change: translate;
}

/* 4. VAGA — placeholder de imagem ainda não produzida. Respiração
   muito sutil no fundo da moldura, só pra sinalizar "aguardando
   conteúdo" sem competir com a rolagem. Só opacidade, sem escala
   nem deslocamento — a moldura não pode parecer que vai se mexer.
   Todas as .vaga da página respiram no mesmo compasso: lê como um
   estado ambiente da página, não como vários elementos cada um se
   mexendo por conta própria. */
@keyframes vaga-respira {
  0%, 100% { opacity: 1; }
  50% { opacity: .86; }
}

.vaga {
  animation: vaga-respira 5s var(--ease-suave) infinite;
  will-change: opacity;
}

/* 5. MICRO-INTERAÇÕES — card, pergunta, passo, checklist, link da
   bio, navegação do carrossel e ponto de navegação lateral. Sempre
   var(--d-micro) ou var(--d-ui) com var(--ease-firme); transição só
   em transform, opacity, background-color, color, border-color. */

.card-item, .passo, .pergunta, .checklist__i {
  transition: transform var(--d-ui) var(--ease-firme),
              border-color var(--d-ui) var(--ease-firme);
}

.card-item:hover, .passo:hover,
.pergunta:hover, .checklist__i:hover { transform: translateY(-4px); }

/* o ícone de check acompanha o item com destaque de cor */
.checklist__i svg {
  transition: color var(--d-ui) var(--ease-firme);
}

.checklist__i:hover svg, .checklist__i:focus-within svg { color: var(--c-laranja); }

.link-bio {
  transition: transform var(--d-micro) var(--ease-firme),
              background-color var(--d-ui) var(--ease-firme),
              color var(--d-ui) var(--ease-firme),
              border-color var(--d-ui) var(--ease-firme);
}

.link-bio:hover, .link-bio:focus-visible { transform: translateY(-2px); }
.link-bio:active { transform: translateY(0) scale(0.97); }

.carrossel__b {
  transition: transform var(--d-micro) var(--ease-firme),
              background-color var(--d-ui) var(--ease-firme),
              border-color var(--d-ui) var(--ease-firme),
              opacity var(--d-ui) var(--ease-firme);
}

.carrossel__b:hover, .carrossel__b:focus-visible { transform: translateY(-2px); }
.carrossel__b:active { transform: translateY(0) scale(0.94); }
.carrossel__b:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

.nav-pontos__i {
  transition: transform var(--d-micro) var(--ease-firme),
              background-color var(--d-micro) var(--ease-firme),
              border-color var(--d-micro) var(--ease-firme),
              color var(--d-micro) var(--ease-firme);
}

.nav-pontos__i:hover, .nav-pontos__i:focus-visible { transform: scale(1.25); }
.nav-pontos__i[aria-current="true"] { transform: scale(1.1); }

/* 6. PREFERS-REDUCED-MOTION --------------------------------------
   desliga parallax e loop (respiração de .vaga). Duração e stagger
   já caem pra praticamente zero em base.css; aqui só o que precisa
   de mais que duração curta pra parar de fato. Nenhum elemento fica
   preso em opacidade 0 — nem .rev sem .rev--on, nem .vaga a meio
   ciclo de respiração. */

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

  .rev,
  .rev[data-rev="fade"],
  .rev[data-rev="sobe"],
  .rev[data-rev="mascara"],
  .rev[data-rev="escala"] {
    opacity: 1;
    transform: none;
    transition: opacity 1ms linear;
  }

  .linha__i { transform: none; transition: none; }
  .px { translate: none; }

  .vaga { animation: none; opacity: 1; }
}