/* Homepage motion: hero opening and the capabilities chain. Figures count up in home-motion.js. */

/* capabilities: steps start at the top, so titles line up whatever their length */
.links .link{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
.link .cap-ico{width:30px;height:30px;margin-bottom:.9rem;display:block;overflow:visible;}
.link .cap-ico path{fill:none;stroke:rgba(246,245,241,.5);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s;}
.link.active .cap-ico path,.link:hover .cap-ico path{stroke:var(--sand);}

@media (prefers-reduced-motion:no-preference){
  .hero .bg{animation:hm-drift 14s cubic-bezier(.2,.7,.2,1) both;}
  .hero .inner>*{animation:hm-rise 1.2s cubic-bezier(.2,.7,.2,1) both;}
  .hero .inner .label{animation-delay:.25s;}
  .hero .inner h1{animation-delay:.45s;}
  .hero .inner .sub{animation-delay:.8s;}
  .hero .meta,.hero .scrollcue{animation:hm-fade 1.4s 1.4s ease both;}

  /* icons draw themselves in, one link after another */
  .links .cap-ico path{stroke-dasharray:1;stroke-dashoffset:1;}
  .links.cap-drawn .cap-ico path{animation:cap-draw 1.1s cubic-bezier(.55,.1,.25,1) forwards;animation-delay:calc(var(--i) * .16s + var(--j) * .12s);}

  /* autoplay: the active link's top line fills, then the chain moves on */
  .links.cap-playing .link.active::before{width:0;transition:none;animation:cap-progress var(--cap-dur,5.5s) linear forwards;}
  .links.cap-playing.cap-paused .link.active::before{animation-play-state:paused;}

  /* the detail panel rises in when the link changes */
  .capability-panel.cap-in>div:first-child{animation:hm-rise .8s cubic-bezier(.2,.7,.2,1) both;}
  .capability-panel.cap-in .ld-meta>div{animation:hm-rise .7s cubic-bezier(.2,.7,.2,1) both;}
  .capability-panel.cap-in .ld-meta>div:nth-child(2){animation-delay:.08s;}
  .capability-panel.cap-in .ld-meta>div:nth-child(3){animation-delay:.16s;}
  .capability-panel.cap-in .ld-meta>div:nth-child(4){animation-delay:.24s;}
}
@keyframes hm-drift{from{transform:scale(1.12);}to{transform:scale(1.04);}}
@keyframes hm-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes hm-fade{from{opacity:0;}to{opacity:1;}}
@keyframes cap-draw{to{stroke-dashoffset:0;}}
@keyframes cap-progress{from{width:0;}to{width:100%;}}