/* Rotating headline phrase: the previous phrase fades away, the next one rises a little into place.
   No clipping box: a clip either cut the descenders or showed both phrases at once during a swap.
   The bottom padding lets the gradient (background-clip:text) reach the descenders of p, g and y. */
.rotator{display:inline-grid;vertical-align:bottom}
.rotator>span{grid-area:1/1;justify-self:start;white-space:nowrap;padding-bottom:.3em;margin-bottom:-.3em;opacity:0;transform:translateY(.3em);filter:blur(6px);transition:opacity .6s cubic-bezier(.22,1,.36,1) .3s,transform .9s cubic-bezier(.22,1,.36,1) .3s,filter .6s cubic-bezier(.22,1,.36,1) .3s}
.rotator>span.on{opacity:1;transform:none;filter:none}
.rotator>span.out{opacity:0;transform:translateY(-.2em);filter:blur(4px);transition-duration:.32s;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.rotator>span{transition:none}}