/* Move only the shader; the text and dotted grid keep their exact position. */
.hero-start{isolation:isolate;overflow:hidden;background-image:none}
.hero-start::before,.hero-start::after{content:'';position:absolute;pointer-events:none}
.hero-start::before{
 inset:-4%;z-index:-2;
 background:url('/assets/media/start/hero-shader.webp') center/100% 100% no-repeat;
 animation:hero-shader-drift 16s ease-in-out infinite alternate paused;
}
.hero-start::after{
 inset:0;z-index:-1;
 background:url('/assets/media/start/raster-hero.webp') 270px top/auto 624px no-repeat;
}
.hero-start.is-ambient-visible::before{animation-play-state:running}
@keyframes hero-shader-drift{
 from{transform:translate(-.8%,.3%) scale(1)}
 to{transform:translate(.8%,-.3%) scale(1.035)}
}

/* Original artwork follows the mouse; individual lines gently fan apart. */
.footer-inner{background-image:none;isolation:isolate;overflow:hidden}
.footer-inner>:not(.footer-lines){position:relative;z-index:1}
.footer-lines{
 position:absolute;right:0;top:0;width:719px;height:506px;z-index:0;pointer-events:none;
 transform-origin:75% 45%;
 transform:translate(calc(var(--footer-x,0) * 22px),calc(var(--footer-y,0) * 14px)) rotate(calc(var(--footer-x,0) * 1.5deg));
}
.footer-lines path{
 fill:none;stroke:#f2490c;stroke-opacity:.5;stroke-width:1;stroke-miterlimit:10;
 transform-box:view-box;transform-origin:100% 0;
 transform:rotate(calc((var(--line-index,6) - 6) * var(--footer-x,0) * .35deg)) translateY(calc((var(--line-index,6) - 6) * var(--footer-y,0) * .65px));
}
@media(max-width:899px){
 .hero-start::after{display:none}
 .footer-lines{left:-139px;right:auto;top:414px;height:505px}
}
@media(prefers-reduced-motion:reduce){
 .hero-start::before{animation:none;transform:none}
 .footer-lines,.footer-lines path{transform:none}
}