/* hero3d: styles for js/fx/hero3d.js */
/* The canvas sits above the photo and below the .hero:before gradient (z-index 1), so the text keeps its contrast. */
.hero .hero3d{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 2s ease}
.hero .hero3d.on{opacity:1}
/* The photo steps back a little while the constellation is on, so the area behind the text gets no brighter. */
.hero.h3d .hero-bg{opacity:.2;transition:opacity 2s ease}
@media(prefers-reduced-motion:reduce){.hero .hero3d,.hero.h3d .hero-bg{transition:none}}