/* Follow logo motion: the three figures step in rear to front, the word follows letter by letter,
   then a slow walking wave passes through the figures every few seconds. */
.follow-logo{position:relative;display:inline-block;line-height:0;vertical-align:middle}
.follow-logo .fl-base{display:block}
.follow-logo .fl-layer{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;pointer-events:none;opacity:0}
.follow-logo.fl-wait .fl-base,.follow-logo.fl-ready .fl-base{opacity:0}
.follow-logo.fl-ready .fl-layer{opacity:1}

/* entrance */
.follow-logo.fl-play .fl-rear{animation:fl-step .9s cubic-bezier(.2,.8,.2,1) both}
.follow-logo.fl-play .fl-mid{animation:fl-step .9s cubic-bezier(.2,.8,.2,1) .32s both}
.follow-logo.fl-play .fl-front{animation:fl-step-front 1s cubic-bezier(.2,.8,.2,1) .64s both}
.follow-logo.fl-play .fl-l{animation:fl-letter .7s cubic-bezier(.2,.8,.2,1) both}
.follow-logo.fl-play .fl-l1{animation-delay:1.05s}.follow-logo.fl-play .fl-l2{animation-delay:1.13s}
.follow-logo.fl-play .fl-l3{animation-delay:1.21s}.follow-logo.fl-play .fl-l4{animation-delay:1.29s}
.follow-logo.fl-play .fl-l5{animation-delay:1.37s}.follow-logo.fl-play .fl-l6{animation-delay:1.45s}

/* walking wave, repeats */
.follow-logo.fl-walk .fl-rear{animation:fl-wave 7s ease-in-out infinite}
.follow-logo.fl-walk .fl-mid{animation:fl-wave 7s ease-in-out .28s infinite}
.follow-logo.fl-walk .fl-front{animation:fl-lead 7s ease-in-out .56s infinite}

@keyframes fl-step{from{opacity:0;transform:translateX(-7%);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes fl-step-front{0%{opacity:0;transform:translateX(-7%);filter:blur(3px)}70%{opacity:1;transform:translateX(.8%);filter:none}100%{opacity:1;transform:none}}
@keyframes fl-letter{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
@keyframes fl-wave{0%,22%,100%{opacity:1;transform:none}8%{opacity:.4;transform:translateX(1.4%)}}
@keyframes fl-lead{0%,24%,100%{transform:none;filter:none}10%{transform:translateX(1.1%);filter:drop-shadow(0 0 6px rgba(120,190,220,.55))}}

.follow-logo:hover .fl-layer{will-change:transform,opacity}

@media(prefers-reduced-motion:reduce){
  .follow-logo .fl-layer{animation:none!important}
}
