/* Camadas visuais de Three.js + microinterações auxiliares */
.hero > .pem-three-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.82;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 38%,#000 58%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 38%,#000 58%,#000 100%);
}
.hero-grid,.scroll-cue{position:relative;z-index:2}
@media(max-width:900px){
  .hero > .pem-three-layer{
    opacity:.48;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 44%,#000 72%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.2) 44%,#000 72%,#000 100%);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero > .pem-three-layer{display:none!important}
}