.textfx { --textfx-duration: 1000ms; --textfx-ease: cubic-bezier(0.22, 1, 0.36, 1); --textfx-distance: 0.65em; --textfx-blur: 12px; --textfx-rotate: 72deg; --textfx-scale: 0.78; --textfx-skew: 9deg; } .textfx .textfx-visual { display: inline; white-space: pre-wrap; } .textfx .textfx-word { display: inline-block; white-space: nowrap; } .textfx .textfx-space { display: inline-block; width: var(--textfx-space-width, 0.28em); min-width: var(--textfx-space-width, 0.28em); } .textfx .textfx-unit { display: inline-block; opacity: 0; will-change: opacity, transform, filter, clip-path, letter-spacing; transition-property: opacity, transform, filter, clip-path, letter-spacing; transition-duration: var(--textfx-duration); transition-timing-function: var(--textfx-ease); transform-origin: center bottom; backface-visibility: hidden; }  .textfx-blur-up .textfx-unit { filter: blur(var(--textfx-blur)); transform: translateY(var(--textfx-distance)); } .textfx-blur-up.is-in-view .textfx-unit { opacity: 1; filter: blur(0); transform: translateY(0); }  .textfx-fade-up .textfx-unit { transform: translateY(var(--textfx-distance)); } .textfx-fade-up.is-in-view .textfx-unit { opacity: 1; transform: translateY(0); }  .textfx-mask-up { overflow: hidden; } .textfx-mask-up .textfx-unit { clip-path: inset(100% 0 0 0); transform: translateY(0.9em); } .textfx-mask-up.is-in-view .textfx-unit { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }  .textfx-slide-left .textfx-unit { transform: translateX(var(--textfx-distance)); } .textfx-slide-left.is-in-view .textfx-unit { opacity: 1; transform: translateX(0); }  .textfx-rotate-up { perspective: 900px; } .textfx-rotate-up .textfx-unit { transform: translateY(0.45em) rotateX(var(--textfx-rotate)); } .textfx-rotate-up.is-in-view .textfx-unit { opacity: 1; transform: translateY(0) rotateX(0deg); }  .textfx-scale-in .textfx-unit { filter: blur(6px); transform: scale(var(--textfx-scale)); } .textfx-scale-in.is-in-view .textfx-unit { opacity: 1; filter: blur(0); transform: scale(1); }  .textfx-skew-up .textfx-unit { transform: translateY(var(--textfx-distance)) skewY(var(--textfx-skew)); } .textfx-skew-up.is-in-view .textfx-unit { opacity: 1; transform: translateY(0) skewY(0deg); }  .textfx-tracking-in .textfx-unit { filter: blur(4px); letter-spacing: 0.16em; transform: translateY(0.12em); } .textfx-tracking-in.is-in-view .textfx-unit { opacity: 1; filter: blur(0); letter-spacing: 0; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .textfx .textfx-unit { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; letter-spacing: normal !important; transition: none !important; } }