/* paper plane that flies down the page, section to section */
.sp-route { position: absolute; left: 0; top: 0; width: 100%; z-index: 30; overflow: visible; pointer-events: none; }
.sp-route__faint { stroke: var(--orange); stroke-opacity: .22; stroke-width: 2; stroke-dasharray: 1 12; stroke-linecap: round; }
.sp-route__done { stroke: var(--orange); stroke-opacity: .8; stroke-width: 2.6; stroke-dasharray: 1 12; stroke-linecap: round; }
.sp-trail { fill: var(--orange); }
.sp-plane { pointer-events: auto; cursor: pointer; outline: none; filter: drop-shadow(0 9px 9px rgba(214, 98, 10, .32)); -webkit-tap-highlight-color: transparent; }
.sp-plane__hit { fill: transparent; }
.sp-plane__halo { fill: rgba(247, 132, 30, .16); animation: spHalo 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.sp-plane:focus-visible .sp-plane__halo { fill: rgba(247, 132, 30, .35); }
@keyframes spHalo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.sp-tip { pointer-events: none; transition: opacity .25s; filter: drop-shadow(0 8px 16px rgba(15, 18, 24, .18)); }
.sp-tip rect { fill: #11141b; }
.sp-tip text { fill: #fff; font: 600 13px/1 Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; }
@media (max-width: 700px) {
  .sp-route__faint { stroke-opacity: .16; stroke-width: 1.6; }
  .sp-route__done { stroke-opacity: .6; stroke-width: 2; }
  .sp-tip text { font-size: 12px; }
}
@media print { .sp-route { display: none; } }
@media (prefers-reduced-motion: reduce) { .sp-plane__halo { animation: none; } }
/* perf: no filters on the moving plane / tip (they were re-rasterised every frame) */
.sp-plane, .sp-tip { filter: none; }
.sp-plane__halo { animation-duration: 3.2s; }

/* the plane bobbing used to be a JS setAttribute every frame (repainted the page-sized svg); now a CSS animation */
#spBob { transform-box: fill-box; transform-origin: center; animation: spBob 3.4s ease-in-out infinite; }
@keyframes spBob { 0%, 100% { transform: translateY(-3px) rotate(-2.6deg); } 50% { transform: translateY(3px) rotate(2.6deg); } }
@media (prefers-reduced-motion: reduce) { #spBob { animation: none; } }