/* Only the existing ship: a forward flyby with both ends outside the screen. */
#hero .hero__el-three {
  --ship-run: clamp(64px, calc(26vw - 253px), 132px);
  pointer-events: none;
  transform-origin: 0% 0%;
  will-change: transform, opacity;
  animation: tugan-ship-flight 10.5s linear infinite both;
}
#hero .hero__el-three img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 8px rgba(79, 209, 255, .18));
}
#hero .hero__el-three::before,
#hero .hero__el-three::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 42%;
  height: 10%;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(220, 252, 255, .95), rgba(91, 220, 255, .75) 18%, rgba(91, 182, 255, .25) 48%, rgba(91, 182, 255, 0) 100%);
  filter: blur(1.5px);
  animation: tugan-ship-thrust 10.5s linear infinite both;
  animation-play-state: inherit;
}
#hero .hero__el-three::before { left: 80%; top: 79%; }
#hero .hero__el-three::after { left: 95%; top: 57%; width: 35%; height: 8%; }
/* The image's nose points upper-left. X and Y always move together along that heading. */
@keyframes tugan-ship-flight {
  0% { opacity: 1; transform: translate3d(70vw, 30.1vw, 0) scale(.52); animation-timing-function: cubic-bezier(.32, .72, .5, .95); }
  40% { opacity: 1; transform: translate3d(calc(var(--ship-run) * .2), calc(var(--ship-run) * .086), 0) scale(1); }
  55% { opacity: 1; transform: translate3d(calc(var(--ship-run) * -.1), calc(var(--ship-run) * -.043), 0) scale(1.06); animation-timing-function: cubic-bezier(.45, .06, .7, .65); }
  97% { opacity: 1; transform: translate3d(-55vw, -23.65vw, 0) scale(.58); }
  100% { opacity: 0; transform: translate3d(-55vw, -23.65vw, 0) scale(.58); }
}
@keyframes tugan-ship-thrust {
  0%, 100% { opacity: .78; transform: rotate(24deg) scaleX(1.05); }
  20% { opacity: .88; transform: rotate(24deg) scaleX(1.18); }
  60% { opacity: .85; transform: rotate(24deg) scaleX(1.14); }
}