/* CompilaFX — estilos de suporte às interações/animações 3D. */

/* Rolagem suave para âncoras (#) em toda a página */
html { scroll-behavior: smooth; }

.fx-reveal {
  opacity: 0;
  transform: translateY(28px) rotateX(6deg);
  transform-origin: bottom center;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.fx-reveal.fx-in {
  opacity: 1;
  transform: none;
  /* Solta a camada de composição depois que a animação termina — manter
     will-change ligado para sempre em dezenas de elementos é uma das
     causas de lag em páginas com muitos cards/nós revelados. */
  will-change: auto;
}

.fx-tilt {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Revelar ao rolar (elementos com classe .revelar) ---------- */
.revelar {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.revelar.ativo { opacity: 1; transform: translateY(0); }

.revelar.esq   { transform: translateX(-80px); }
.revelar.dir   { transform: translateX(80px); }
.revelar.zoom  { transform: scale(0.85); }
.revelar.ativo.esq,
.revelar.ativo.dir { transform: translateX(0); }
.revelar.ativo.zoom { transform: scale(1); }

/* ---------- Seção com efeito sticky (scroll-jacking) ---------- */
.secao-sticky { height: 300vh; position: relative; }
.secao-sticky .conteudo {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .revelar, [data-parallax] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .revelar.esq, .revelar.dir { transform: translateY(40px); } /* lateral vira vertical no celular */
}