/* Airplane orbit layer. Loaded after site.css. */
.sky-flight-layer {
  --plane-x-px: 0px;
  --plane-y-px: 0px;
  --plane-angle: 0deg;
  --plane-scale: 1;
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
}

.sky-flight-layer[data-depth="back"] { z-index: 1; }
.sky-flight-layer[data-depth="front"] { z-index: 4; }

.flight-trails {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
}

.sky-flight-layer[data-active="true"] .flight-trails { opacity: 1; }

.flight-trail,
.flight-writing {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.flight-trail-far { stroke-width: 3px; opacity: .13; }
.flight-trail-near { stroke-width: 4px; opacity: .38; }
.flight-writing { stroke-width: 5px; opacity: .68; }

.sky-flight-layer .airplane-flight {
  left: var(--plane-x-px);
  top: var(--plane-y-px);
  transform: translate(-50%, -50%) rotate(var(--plane-angle)) scale(var(--plane-scale));
  transform-origin: center;
  will-change: left, top, transform;
}

/* Keep the untouched page readable while images and the local font settle. */
.js .hero:not(.intro-ready) {
  --flight-progress: 1;
  --flight-reveal: 1;
  --reveal-right: 0%;
}

.js .hero:not(.intro-ready) .hero-cloud {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sky-flight-layer { display: none !important; }
}