/* reader distortion, shared with the blog overlay: ~1.5x the prototype's amplitude/speed so level 1 is visibly alive; amplitude/speed follow --i (1..5), --r varies each letter */
.w { white-space: nowrap; }
.l { display: inline-block; --r: 1; }
.m-rotate     { animation: m-rotate linear infinite calc(1.7s * var(--r) * 3 / var(--i)); }
.m-flipH      { animation: m-flipH linear infinite calc(1.9s * var(--r) * 3 / var(--i)); }
.m-flipV      { animation: m-flipV linear infinite calc(2.2s * var(--r) * 3 / var(--i)); }
.m-colorShift { animation: m-colorShift linear infinite calc(2.8s * var(--r) * 3 / var(--i)); }
.m-wave       { animation: m-wave ease-in-out infinite calc(1.3s * var(--r)); }
.m-jitter     { animation: m-jitter linear infinite calc(.28s * var(--r)); }
.m-skew       { animation: m-skew ease-in-out infinite calc(1.7s * var(--r)); }
.m-scalePulse { animation: m-scalePulse ease-in-out infinite calc(1.5s * var(--r)); }
.m-blurPulse  { animation: m-blurPulse ease-in-out infinite calc(1.9s * var(--r)); }
.m-fade       { animation: m-fade ease-in-out infinite calc(1.2s * var(--r)); }
@keyframes m-rotate { to { transform: rotate(360deg); } }
@keyframes m-flipH { to { transform: rotateY(360deg); } }
@keyframes m-flipV { to { transform: rotateX(360deg); } }
/* the prototype's hue-rotate is invisible on near-black ink, so cycle the colour itself */
@keyframes m-colorShift { 0%, 100% { color: #5B5BF0; } 25% { color: #e0467a; } 50% { color: #13a37a; } 75% { color: #e0901a; } }
@keyframes m-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--i) * -7.5px)); } }
@keyframes m-jitter {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(calc(var(--i) * 1.65px), calc(var(--i) * -1.65px)); }
  40% { transform: translate(calc(var(--i) * -1.65px), calc(var(--i) * 1.5px)); }
  60% { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * 1.65px)); }
  80% { transform: translate(calc(var(--i) * -1.5px), calc(var(--i) * -1.5px)); }
}
@keyframes m-skew { 0%, 100% { transform: skewX(calc(var(--i) * -6.75deg)); } 50% { transform: skewX(calc(var(--i) * 6.75deg)); } }
@keyframes m-scalePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + var(--i) * .105)); } }
@keyframes m-blurPulse { 0%, 100% { filter: blur(0); } 50% { filter: blur(calc(var(--i) * .7px)); } }
@keyframes m-fade { 0%, 100% { opacity: 1; } 50% { opacity: calc(1 - var(--i) * .135); } }
@media (prefers-reduced-motion: reduce) {
  .l { animation: none !important; }
  .m-rotate { transform: rotate(calc(var(--i) * 45deg)); }
  .m-flipH { transform: scaleX(-1); }
  .m-flipV { transform: scaleY(-1); }
  .m-colorShift { color: #e0467a; }
  .m-wave { transform: translateY(calc(var(--i) * -4.5px)); }
  .m-jitter { transform: translate(calc(var(--i) * 1.5px), calc(var(--i) * -1.5px)); }
  .m-skew { transform: skewX(calc(var(--i) * -6.75deg)); }
  .m-scalePulse { transform: scale(calc(1 + var(--i) * .105)); }
  .m-blurPulse { filter: blur(calc(var(--i) * .45px)); }
  .m-fade { opacity: calc(1 - var(--i) * .135); }
}