function Hero(){
  const AM=window[window.AM_NS];
  const {BrandLock,Button}=AM;
  const [p,setP]=React.useState(0);
  const [m,setM]=React.useState({x:.5,y:.5});
  React.useEffect(()=>AMMotion.scroll((y,h)=>setP(Math.round(Math.min(1,y/h)*100)/100)),[]);
  React.useEffect(()=>{
    if(AMMotion.reduced||matchMedia('(hover:none)').matches) return;
    const on=e=>setM({x:e.clientX/window.innerWidth,y:e.clientY/window.innerHeight});
    window.addEventListener('mousemove',on,{passive:true});
    return ()=>window.removeEventListener('mousemove',on);
  },[]);
  const s=AMMotion.reduced?0:p, mx=(m.x-.5), my=(m.y-.5);
  const q=['E se aquilo','que você chama de realidade','fosse apenas a parte','que consegue perceber?'];
  return (
    <header className="am-hero" id="limiar">
      <div className="am-hero-watermark" aria-hidden="true"
        style={{transform:'translate3d('+(mx*-18)+'px,'+(s*-34+my*-12)+'px,0) scale('+(1+s*.05)+')'}}>
        <BrandLock variant="am-icon" height="min(64vh,600px)" assetBase="assets"/>
      </div>
      <div className="am-hero-cosmos" aria-hidden="true"
        style={{transform:'translate3d('+(mx*-10)+'px,'+(s*60+my*-8)+'px,0) scale('+(1.04+s*.05)+')'}}/>
      <div className="am-hero-grid" aria-hidden="true" style={{transform:'translate3d(0,'+(s*-60)+'px,0)'}}>
        <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMax slice">
          <g stroke="var(--am-gold-600)" strokeWidth=".7" fill="none" opacity=".5">
            <path d="M-200 900L720 240 1640 900"/><path d="M100 900L720 400 1340 900"/>
            <path d="M380 900L720 560 1060 900"/><path d="M0 760H1440M0 840H1440"/>
          </g>
        </svg>
      </div>
      <div className="am-hero-halo" aria-hidden="true"
        style={{transform:'translate3d('+(mx*30)+'px,'+(my*24)+'px,0)',opacity:.9-s*.6}}/>
      <div className="am-hero-dust" aria-hidden="true">
        {Array.from({length:14}).map((_,i)=>(
          <span key={i} style={{left:(7+i*6.6)+'%',top:(12+((i*37)%74))+'%',
            animationDelay:(i*1.7)+'s',animationDuration:(16+(i%5)*5)+'s'}}/>
        ))}
      </div>
      <div className="am-hero-copy">
        <h1 className="am-question">
          {q.map((line,i)=>(
            <span key={i} className="am-q-line" style={{animationDelay:(.5+i*.22)+'s'}}>
              {i===3?<em>{line}</em>:line}
            </span>
          ))}
        </h1>
        <div className="am-hero-actions">
          <Button variant="gold" href="#universos">Ver os universos</Button>
          <Button variant="ghost" href="#manifesto" icon={false}>O que é Arquitetura Mental</Button>
        </div>
      </div>
      <div className="am-hero-seam" aria-hidden="true"/>
    </header>
  );
}
Object.assign(window,{Hero});