/* Keep the real word in the heading and its layout steady during the entrance. */
.hero-magnetic-word{position:relative;display:inline-block;white-space:nowrap}
.hero-magnetic-word.is-joining .hero-word-text{opacity:0}
.hero-word-letters{position:absolute;inset:0;pointer-events:none;user-select:none}
.hero-word-letter{position:absolute;display:block;transform-origin:50% 65%;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){
  .hero-magnetic-word.is-joining .hero-word-text{opacity:1}
  .hero-word-letters{display:none}
}