/* ════════════════════════════════════════════════════════════
   "LET US TAKE YOU THERE" — the shared loading curtain.

   Quicksilver aircraft on a runway. Everything is drawn: no image to load
   before the thing whose job is to cover a load.

   Painted with literal values rather than theme tokens, deliberately — this
   renders before any stylesheet is guaranteed to have arrived, so it cannot
   depend on one having done so. It is the one place in the build where a raw
   hex is the correct choice.
   ════════════════════════════════════════════════════════════ */

.tsl {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 30%, #14110c 0%, #090806 62%, #050403 100%);
  opacity: 1;
  transition: opacity .55s ease, visibility .55s ease;
}
.tsl-out { opacity: 0; visibility: hidden; pointer-events: none; }

.tsl-in { text-align: center; padding: 0 24px; width: min(420px, 86vw); }

/* ── wordmark ─────────────────────────────────────────────── */
.tsl-mark { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.tsl-n {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 6vw, 36px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #F2EDE3;
}
.tsl-sa {
  font-family: Inter, -apple-system, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, .85);
}
.tsl-tag {
  margin: 0 0 26px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 3.4vw, 19px);
  color: rgba(242, 237, 227, .62);
}

/* ── the runway ───────────────────────────────────────────── */
.tsl-runway {
  position: relative;
  height: 3px;
  border-radius: 99px;
  background: rgba(242, 237, 227, .10);
  overflow: visible;
}

/* Centreline dashes — the thing that makes it read as a runway rather than a
   progress bar with a plane parked on it. */
.tsl-strip {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background-image: linear-gradient(90deg,
    rgba(242, 237, 227, .30) 0 10px, transparent 10px 24px);
  opacity: .5;
}

.tsl-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #9A7A30, #E8D08A);
  box-shadow: 0 0 14px rgba(232, 208, 138, .55);
  transition: width .35s cubic-bezier(.3, .8, .3, 1);
}

/* Quicksilver: a cool metallic gradient clipped to the aircraft itself. */
.tsl-plane {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -58%);
  transition: left .35s cubic-bezier(.3, .8, .3, 1);
  filter: drop-shadow(0 0 9px rgba(226, 232, 240, .55));
}
/* THE PLANE WAS FLYING BACKWARDS. Rudy spotted it, and the path really does
   point the wrong way: read the silhouette and the big wings sit at x=30..36
   with their tips swept toward HIGHER x, while the small tailplanes sit at
   x=52..56 -- so the tail is on the right and the nose is the point at x=2 on
   the left. The bar animates .tsl-plane's `left` from 0% to 100%, so it was
   travelling nose-last down its own runway.

   Mirrored on the SVG rather than on .tsl-plane, because that element already
   carries transform: translate(-50%, -58%) for its positioning and adding a
   scale there would have to preserve the order. */
.tsl-plane svg { display: block; transform: scaleX(-1); }
.tsl-plane path {
  fill: #E7ECF2;
}

@media (prefers-reduced-motion: reduce) {
  .tsl-fill, .tsl-plane { transition: none; }
  /* No crawl: hold a steady state rather than animating toward a number we
     do not actually know. */
  .tsl-fill { width: 42%; }
  .tsl-plane { left: 42%; }
}