/* Scroll-driven heading animation: words blur/slide in as the heading
   enters the viewport. Concept after 21st.dev "Text Blur Reveal". */
.hfx-w{
  display:inline-block;
  opacity:calc(.08 + .92 * var(--wp, 1));
  transform:perspective(700px) translateY(calc((1 - var(--wp, 1)) * .5em)) rotateX(calc((1 - var(--wp, 1)) * -70deg));
  transform-origin:50% 100%;
  filter:blur(calc((1 - var(--wp, 1)) * 9px));
  will-change:transform, opacity, filter;
}
@media (prefers-reduced-motion: reduce){
  .hfx-w{ opacity:1; transform:none; filter:none; will-change:auto; }
}