function Transicao(){
  const AM=window[window.AM_NS];
  const {PullQuote}=AM;
  const ref=React.useRef(null);
  const [p,setP]=React.useState(.5);
  React.useEffect(()=>AMMotion.scroll(()=>{
    if(!ref.current)return;const r=ref.current.getBoundingClientRect();
    setP(Math.round(Math.min(1,Math.max(0,1-(r.top+r.height/2)/window.innerHeight))*80)/80);
  }),[]);
  const s=AMMotion.reduced?.5:p;
  const steps=9;
  return (
    <section className="am-transition" ref={ref} aria-label="Passagem arquitetônica">
      <div className="am-transition-veil"/>
      <div className="am-transition-copy">
        <div className="am-inner" data-am-reveal>
          <PullQuote size="md" rule={true}>Toda arquitetura pede uma escada.</PullQuote>
          <p className="am-transition-sub">Toda escada pede uma pessoa.</p>
        </div>
      </div>
      <div className="am-stair-col">
        <div className="am-stair" style={{transform:'translate3d(0,'+((s-.5)*-90).toFixed(1)+'px,0)'}} aria-hidden="true">
          <span className="am-stair-light" style={{opacity:.6+s*.4}}/>
          {Array.from({length:steps}).map((_,i)=>{
            const k=i/(steps-1);
            const w=80-k*54;
            return (
              <span key={i} className="am-stair-step" style={{
                bottom:(4+k*48)+'%',
                left:(50-w/2)+'%',
                width:w+'%',
                opacity:(.28+k*.60)*(0.55+s*.45),
                transform:'translate3d(0,'+((s-.5)*(6+i*3)).toFixed(1)+'px,0)'}}/>
            );
          })}
          <span className="am-stair-door" style={{opacity:(0.35+s*0.65)}}/>
          <span className="am-stair-rail am-stair-rail-l"/>
          <span className="am-stair-rail am-stair-rail-r"/>
        </div>
      </div>
    </section>
  );
}
Object.assign(window,{Transicao});