/* Scroll changes the composition, never the document's scrolling behavior. */
.hero-stage{position:relative}
.motion-ready .hero-body{overflow:hidden}
.motion-ready .hero-art{
  transform:perspective(1400px)
    translate3d(calc(var(--portal-x,0px) + var(--pointer-x,0px)),calc(var(--portal-y,0px) + var(--pointer-y,0px)),0)
    rotateY(var(--portal-yaw,0deg)) rotate(var(--portal-turn,0deg)) scale(var(--portal-scale,1));
  transform-origin:55% 55%;
  transition:none;
}
.hero:after,.projects:after,.universe:after{
  clip-path:none;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:scaleY(var(--curve-rise,1));
  transform-origin:center bottom;
  pointer-events:none;
}
.projects,.universe{position:relative;overflow:clip}
.motion-ready .projects,.motion-ready .universe{padding-bottom:clamp(100px,14svh,150px)}
.projects:after,.universe:after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:clamp(22px,3vw,44px);
}
.motion-ready .projects:after,.motion-ready .universe:after{height:clamp(45px,10svh,110px)}
.projects:after{background:#181b1a}
.universe:after{background:var(--blue)}
.motion-line{display:block;width:max-content;clip-path:inset(-.15em -.08em -.23em -.08em)}
.motion-line-inner{display:block;transform-origin:left bottom}
.motion-ready .telegraph{transform-origin:55% 70%}
.motion-ready .power-output{transform-origin:left bottom}
.motion-ready .orbit{transform-origin:50% 50%}
.motion-ready .giant-wordmark{transform-origin:center bottom}
@media(min-width:761px){
  .motion-ready .hero-stage{height:172svh}
  .motion-ready .hero{position:sticky;top:0}
}
@media(max-width:760px){
  .motion-ready .projects,.motion-ready .universe{padding-bottom:90px}
  .motion-ready .projects:after,.motion-ready .universe:after{height:55px}
}
@media(prefers-reduced-motion:reduce){
  .motion-ready .hero-art,.motion-line-inner{transform:none!important}
  .hero:after,.projects:after,.universe:after{transform:none}
}