/* Parallax Code: CSS base. Cole no <style> da página ou importe como arquivo. */

/* Evita rolagem lateral sem quebrar o position: sticky (overflow: hidden quebraria). */
html, body { overflow-x: clip; }

/* Cena: o container que segura as camadas. Esconde o que vaza das bordas.
   clip em vez de hidden: com hidden a cena vira área de rolagem interna e um link com âncora
   ou um foco de teclado pode "rolar" as camadas dentro dela, deslocando o fundo. */
[data-parallax-scene] {
  position: relative;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* Camada de fundo: ocupa a cena inteira. O JS estica top/bottom conforme a velocidade. */
.px-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}
.px-bg > img,
.px-bg > video,
.px-bg > picture,
.px-bg > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  display: block;
}

/* Camada da frente (assunto recortado em PNG/WebP transparente): acima do véu, abaixo do texto.
   Use .px-frente.por-cima para o assunto ficar na frente do título (efeito "título atrás da pessoa"). */
.px-bg.px-frente { z-index: 0; pointer-events: none; }
.px-bg.px-frente.por-cima { z-index: 3; }

/* Vídeo por cima da capa: aparece com fade só quando começa a tocar de verdade. */
.px-bg > video,
.px-bg > canvas { opacity: 0; transition: opacity .9s ease; }
.px-bg > video.is-playing,
.px-bg > canvas.is-playing { opacity: 1; }
.px-bg > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Véu para dar contraste ao texto sobre vídeo ou foto. */
.px-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Cena fixa: a seção é alta, o palco gruda na tela e os painéis de texto passam por cima. */
.px-sticky { position: relative; }
.px-sticky > .px-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.px-sticky > .px-paineis {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
}
.px-sticky .px-painel {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 16px;
}

/* Tudo que se move por parallax: só transform e opacity, que não pesam no navegador. */
[data-parallax],
[data-parallax-mouse] {
  will-change: transform;
  backface-visibility: hidden;
}

/* Revelação ao aparecer na tela (só esconde se o JS rodou, para nunca sumir conteúdo). */
.px-js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0s);
}
.px-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  [data-parallax],
  [data-parallax-mouse] { transform: none !important; translate: none !important; will-change: auto; }
  .px-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}