@keyframes riseIn{to{opacity:1;transform:translateY(0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* hero entrance */
.hero-quote span{display:block;opacity:0;transform:translateY(16px);animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero-quote span:nth-child(1){animation-delay:.05s}
.hero-quote span:nth-child(2){animation-delay:.16s}
.hero-quote span:nth-child(3){animation-delay:.27s}
.hero-quote span:nth-child(4){animation-delay:.38s}
.hero-intro{opacity:0;animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.5s}
.hero-actions{opacity:0;animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:.62s}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* progress bar fill */
.progress{transition:transform .1s linear}

/* diagram arrow bob */
.diagram-arrow{animation:bob 2.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .hero-quote span,.hero-intro,.hero-actions{animation:none;opacity:1;transform:none}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .diagram-arrow{animation:none}
}