/* ============ BABY — camadas 3D (Three.js) ============ */
/* Subtil e elegante: complementa o design, nunca o domina. */

/* campo de partículas fixo, por trás de todo o conteúdo */
.three-bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.2s ease}
.loaded .three-bg{opacity:1}

/* garantir que o conteúdo fica acima do campo de fundo (sem mexer no nav/menu,
   que já têm z-index próprios elevados) */
body > main,body > .footer{position:relative;z-index:1}

/* canvas do objeto 3D do hero */
.hero__canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
/* conteúdo do hero acima do objeto.
   .hero__label e .hero__scroll JÁ são position:absolute no style.css —
   NÃO lhes tocar no position (senão colapsam para o centro); só z-index. */
.hero__title,.hero__tagline{position:relative;z-index:2}
.hero__label,.hero__scroll{z-index:2}

@media(prefers-reduced-motion:reduce){
  .three-bg{display:none}
  .hero__canvas{display:none}
}