/* Continuous decorative motion, controlled by the shared animation button. */
.motion-enabled .illustrated-scene.is-played .sketch-plane{
  overflow:visible;
}
.motion-enabled .illustrated-scene.is-played .plane-body{
  transform-box:view-box;
  transform-origin:135px 43px;
  animation:live-plane-flight 7.8s cubic-bezier(.45,0,.55,1) infinite both;
}
.motion-enabled .illustrated-scene.is-played .flight-trail{
  animation:live-flight-trail 2.4s linear infinite;
}

#scope .journey .route-line{
  z-index:2;
}
.route-runner{
  fill:#7950df;
  stroke:#fff;
  stroke-width:2;
  stroke-linejoin:round;
  paint-order:stroke fill;
  filter:drop-shadow(0 1px 2px #7950df35);
}

/* The shared pause/offscreen state freezes the exact current flight position. */
.is-animation-paused [data-motion-scope] *,
[data-motion-scope].is-offscreen *{
  animation-play-state:paused!important;
}

@keyframes live-plane-flight{
  0%,100%{transform:translate(-18px,15px) rotate(-9deg)}
  22%{transform:translate(4px,-6px) rotate(3deg)}
  45%{transform:translate(24px,0) rotate(10deg)}
  68%{transform:translate(3px,17px) rotate(1deg)}
  84%{transform:translate(-20px,8px) rotate(-7deg)}
}
@keyframes live-flight-trail{
  0%{stroke-dashoffset:0;opacity:.65}
  50%{opacity:1}
  100%{stroke-dashoffset:-48;opacity:.65}
}

@media(prefers-reduced-motion:reduce){
  .motion-enabled .illustrated-scene.is-played .plane-body,
  .motion-enabled .illustrated-scene.is-played .flight-trail{
    animation:none!important;
    transform:none;
  }
  #scope .journey .route-runner{display:none}
}