/* Optional figure animation.

   Every template links this file. To switch the animation off for good,
   delete the one line in index.html that loads it:

       <link rel="stylesheet" href="../shared/animate.css">

   Nothing else depends on it. The figure is drawn correctly without it.

   The animation is deliberately slow and small: the chaser flies the planned
   approach, holds at the docking port, fades, and repeats. The corridor, the
   keep-out zone and the target never move. Readers who have asked their system
   for reduced motion see the static figure. */

@media (prefers-reduced-motion: no-preference) {

  svg .traj {
    animation: fp-flow 1.8s linear infinite;
  }

  svg .chaser,
  svg .chaser-label {
    animation: fp-approach 13s linear infinite,
               fp-appear 13s linear infinite;
  }

}

/* Dashes drift towards the target. The 10 unit shift is one dash period,
   so the loop is seamless. */
@keyframes fp-flow {
  to {
    stroke-dashoffset: -10;
  }
}

/* Waypoints sampled along the trajectory curve, as offsets from the drawn
   start position. The final hold and the reset both happen while opacity
   is zero, so there is no visible snap. */
@keyframes fp-approach {
  0% {
    transform: translate(0, 0);
  }
  17% {
    transform: translate(46px, -7px);
  }
  34% {
    transform: translate(99px, -17px);
  }
  51% {
    transform: translate(156px, -32px);
  }
  68%, 90% {
    transform: translate(217px, -49px);
  }
  90.01%, 100% {
    transform: translate(0, 0);
  }
}

@keyframes fp-appear {
  0%, 3% {
    opacity: 0;
  }
  8%, 82% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
  }
}