/* TVX Holidays, the takeoff page. Tokens first, then the page's own classes.
   Nothing here restyles .sc-stage, .sc-copy or any [data-sc-*] selector. */

:root {
  --sc-canvas:      #0a0f1d;
  --sc-surface:     #141b30;
  --sc-ink:         #f8f6f0;
  --sc-ink-soft:    #b3bacc;
  --sc-accent:      #e65f2b;
  --sc-accent-ink:  #0a0f1d;
  --sc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --sc-shadow-color: 225 45% 3%;
  --sc-r-sm: 6px; --sc-r-md: 10px; --sc-r-lg: 16px;

  --sand: #d9b36c;
  --sand-soft: #f3e6c8;
  --terracotta-soft: #f28a5e;
  --sky-dusk-top: #101a3a;
  --sky-dusk-mid: #2b2650;
  --sky-dusk-horizon: #9a4a2c;
  --sky-night-top: #04070f;
  --sky-night-mid: #0a0f1d;
  --sky-night-horizon: #141b30;
}

/* Instrument Serif is a single-weight face; the engine's 500 would synthesise. Light on dark
   gets a touch more leading and tracking than the engine's tight defaults. */
.sc-display { font-weight: 400; letter-spacing: -0.012em; line-height: 1.0; }
.sc-display--xl { font-size: clamp(3.6rem, 2rem + 8vw, 9rem); }
.sc-lede { font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.sc-body { line-height: 1.62; }

body { font-variation-settings: "wdth" 100; }

/* ------------------------------------------------------------------ world -- */
.world {
  position: fixed; inset: 0; z-index: 0;
  overflow: clip;
  background: var(--sc-canvas);
  contain: strict;
}
.world__sky { position: absolute; inset: 0; }
.world__sky--dusk {
  background:
    radial-gradient(120% 70% at 78% 92%, rgba(230, 95, 43, 0.35) 0%, rgba(230, 95, 43, 0) 55%),
    linear-gradient(to bottom, var(--sky-dusk-top) 0%, var(--sky-dusk-mid) 48%, var(--sky-dusk-horizon) 100%);
}
.world__sky--night {
  opacity: 0;
  background: linear-gradient(to bottom, var(--sky-night-top) 0%, var(--sky-night-mid) 55%, var(--sky-night-horizon) 100%);
  will-change: opacity;
}
.world__stars {
  position: absolute; inset: -10% 0 30% 0; opacity: 0; will-change: opacity;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1px 1px at 27% 41%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 38% 9%, #f3e6c8 60%, transparent 62%),
    radial-gradient(1px 1px at 51% 30%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 63% 14%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1px 1px at 72% 36%, #f3e6c8 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 84% 22%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1px 1px at 91% 45%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1px 1px at 6% 52%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 45% 55%, #f3e6c8 60%, transparent 62%),
    radial-gradient(1px 1px at 58% 47%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1px 1px at 19% 66%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 77% 60%, #f8f6f0 60%, transparent 62%),
    radial-gradient(1px 1px at 33% 76%, #f3e6c8 60%, transparent 62%),
    radial-gradient(1px 1px at 96% 70%, #f8f6f0 60%, transparent 62%);
}
/* The runway plate is a full frame; it carries dusk on its own and drops away through the peak. */
.world__runway {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.world__runway img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
/* The plane cutout, seen from behind, already airborne when the world takes over from the clip. Its
   box is centred on mid-frame and page.js offsets it; a fixed width and max-width: none so a phone
   never shrinks it to the viewport. */
.world__plane {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(420px, 54vw, 920px);
  transform-origin: 50% 50%; opacity: 0;
  will-change: transform, opacity;
}
.world__plane img { width: 100%; height: auto; max-width: none; }
/* Cloud plates carry real alpha (cut from their own luminance), so they composite normally. The
   vertical mask fades each plate's box edges, so no hard band ever shows where a box begins. */
.world__cloud {
  position: absolute; left: -15%; width: 130%; opacity: 0; overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.world__cloud img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; max-width: none; }
.world__cloud--far  { bottom: 26%; height: 52vh; }
.world__cloud--mid  { bottom: 4%;  height: 60vh; }
.world__cloud--near { bottom: -22%; height: 70vh; }
/* The panorama rises 34vh into frame, so its top edge crosses the sky on the way up: fade that edge
   (the plate's own night sky into the CSS one) so the rise reads as the city emerging, not a card sliding. */
.world__arrival {
  position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 34vh, 0) scale(1.06);
  transform-origin: 50% 80%;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%);
}
.world__arrival img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.world__haze {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity;
  background: radial-gradient(90% 70% at 50% 100%, rgba(248, 246, 240, 0.16), transparent 60%);
}

/* -------------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark {
  font-family: var(--sc-font-text); font-variation-settings: "wdth" 88; font-weight: 600;
  font-size: var(--sc-t-sm); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
}
.bar__cta { text-decoration: none; }

/* -------------------------------------------------------------------- cta -- */
.cta, .bar__cta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.9rem; padding: 0 1.15rem; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover, .bar__cta:hover { background: var(--terracotta-soft); }
.cta:active, .bar__cta:active { transform: translateY(1px); }
.bar__cta { height: 2.5rem; padding: 0 0.9rem; }

/* ------------------------------------------------------------------- main -- */
main { position: relative; z-index: 1; }
.stage--clear { background: transparent; }

/* hero: the clip fills the stage; the copy sits in the lower left over the engine's corner scrim */
.stage--hero { background: var(--sc-canvas); }
/* A second density where the copy sits: the clip's wet runway and fuselage pass right under the
   headline, and the corner scrim alone measured under 3:1 on the phone crop. Sibling of the copy. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top right,
    rgba(10, 15, 29, 0.7) 0%, rgba(10, 15, 29, 0.42) 26%, rgba(10, 15, 29, 0.12) 46%, rgba(10, 15, 29, 0) 62%);
}
.hero__copy { display: grid; gap: var(--sc-4); max-width: 46rem; }
/* Sized against the viewport height as well as its width: three lines that fit under the bar on a
   short wide window, not five lines that run off the top. */
.hero__title { max-width: 16ch; font-size: clamp(2.6rem, min(5vw, 8.6vh), 6rem); }
.hero__lede { max-width: 38ch; color: var(--sc-ink); }
.hero__copy .cta { justify-self: start; }

/* liftoff: the peak. One centred line over the falling runway. */
.liftoff__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%, rgba(10, 15, 29, 0.62) 0%, rgba(10, 15, 29, 0.3) 45%, rgba(10, 15, 29, 0) 75%);
}
/* Above mid-frame: the plane climbs to the vanishing point just under it. */
.liftoff__copy { top: 31%; max-width: min(60rem, 90vw); display: grid; gap: var(--sc-4); justify-items: center; }
.liftoff__lede { color: var(--sc-ink); text-align: center; }

/* the rail */
.stage--rail { display: flex; align-items: center; }
.rail {
  align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-inline: var(--sc-gutter) 8vw;
}
.rail__lead { flex: 0 0 auto; width: clamp(18rem, 30vw, 28rem); display: grid; gap: var(--sc-4); padding-right: 2vw; }
.rail__note { flex: 0 0 auto; width: clamp(16rem, 26vw, 24rem); }
.plan { flex: 0 0 auto; width: clamp(17rem, 23vw, 21rem); }
.plan__card {
  display: grid; gap: var(--sc-3);
  padding: var(--sc-5);
  background: color-mix(in oklab, var(--sc-surface) 92%, transparent);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3), var(--sc-edge);
  backdrop-filter: blur(6px);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.plan__card:hover { border-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); }
.plan.is-picked .plan__card { border-color: var(--sc-accent); }
.plan__nights { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sand); letter-spacing: 0.04em; }
.plan__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.02; letter-spacing: -0.01em; }
.plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sc-1); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.plan__list li { padding-left: 0.9rem; position: relative; }
.plan__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--sc-accent); }
.plan__price { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.plan__pick {
  justify-self: start; margin-top: var(--sc-2);
  height: 2.4rem; padding: 0 0.9rem; border-radius: var(--sc-r-sm);
  border: 1px solid var(--sc-hairline-strong); background: transparent; color: var(--sc-ink);
  font-weight: 500; font-size: var(--sc-t-sm); cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
.plan__pick:hover { border-color: var(--sc-ink); }
.plan__pick:active { transform: scale(0.97); }
.plan__pick[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
/* Items settle in sequence as the rail is pulled. The first stays present; the floor keeps a
   not-yet-settled card reading as arriving, not as failed. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .plan { opacity: clamp(0.55, 0.55 + (var(--sc-p, 0) * 3.2 - var(--i) * 0.45) * 1.4, 1); }
  .plan[style*="--i:1"] { opacity: 1; }
}

/* places: full-bleed figures, alternating anchor, labels as facts */
.places { padding-block: calc(var(--sc-section) * 0.8) calc(var(--sc-section) * 0.4); display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.places__head { padding-inline: var(--sc-gutter); max-width: var(--sc-maxw); margin-inline: auto; width: 100%; }
.place { margin: 0; position: relative; width: min(100%, 58rem); }
.place--lead { margin-right: auto; padding-left: 0; }
.place--trail { margin-left: auto; }
.place img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 0; }
.place figcaption {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--sc-5);
  max-width: 44rem; padding: var(--sc-3) var(--sc-4);
  background: color-mix(in oklab, var(--sc-canvas) 82%, transparent);
  border-left: 1px solid var(--sc-accent);
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink);
}
.place--trail figcaption { left: auto; right: var(--sc-gutter); text-align: right; border-left: 0; border-right: 1px solid var(--sc-accent); }

/* the argument */
.stage--argument { display: grid; place-items: center; }
.argument__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 55%, rgba(10, 15, 29, 0.8) 0%, rgba(10, 15, 29, 0.42) 50%, rgba(10, 15, 29, 0) 80%);
}
.argument { position: relative; z-index: var(--sc-z-copy); width: min(56rem, calc(100vw - 2 * var(--sc-gutter))); display: grid; }
.argument__line { grid-area: 1 / 1; max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.9rem); line-height: 1.06; }

/* landing */
.stage--land { display: block; }
.land__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right,
    rgba(10, 15, 29, 0.94) 0%, rgba(10, 15, 29, 0.7) 30%, rgba(10, 15, 29, 0.28) 52%, rgba(10, 15, 29, 0) 72%);
}
.land__copy { display: grid; gap: var(--sc-4); max-width: 40rem; bottom: clamp(9rem, 22vh, 14rem); }
.land__copy .cta { justify-self: start; }
.foot {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--sc-5); z-index: var(--sc-z-copy);
  display: grid; gap: var(--sc-1); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.foot p { margin: 0; }
.foot__mark { font-family: var(--sc-font-text); font-variation-settings: "wdth" 88; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink); }
.foot__links { display: flex; gap: var(--sc-4); }

/* ------------------------------------------------------------------- pass -- */
/* The pass owns the right-hand column on wide screens: one reserve, --pass-col (the pass plus a gutter
   either side), that every act's readable content stops short of. Copy blocks cap their width against it,
   the photographs and the argument sit inside it, the rail's track ends before it and fades out under it
   so cards never slide beneath the pass, and the footer stops at it. lab/overlap.mjs checks all of this. */
:root { --pass-w: 18rem; }
@media (min-width: 861px) {
  :root { --pass-col: calc(var(--pass-w) + 2 * var(--sc-gutter)); }
  .hero__copy { max-width: min(46rem, calc(100vw - var(--sc-gutter) - var(--pass-col))); }
  /* The peak line stays centred while it fits; when the column would clip it (laptops), its centre
     slides left just enough for its box to end at the column. */
  .liftoff__copy {
    max-width: min(60rem, calc(100vw - var(--sc-gutter) - var(--pass-col)));
    left: min(50%, calc(100vw - var(--pass-col) - min(30rem, (100vw - var(--sc-gutter) - var(--pass-col)) / 2)));
  }
  /* The track ends a fade-width past the column, so the trailing note rests fully clear of the fade. */
  .rail { padding-right: calc(var(--pass-col) + 5rem); }
  .stage--rail {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--pass-col) - 4rem), transparent calc(100% - var(--pass-col) + 1rem));
    mask-image: linear-gradient(to right, #000 calc(100% - var(--pass-col) - 4rem), transparent calc(100% - var(--pass-col) + 1rem));
  }
  .places { padding-right: var(--pass-col); }
  .stage--argument { padding-right: var(--pass-col); }
  .argument { width: min(56rem, calc(100vw - var(--sc-gutter) - var(--pass-col))); }
  .land__copy { max-width: min(40rem, calc(100vw - var(--sc-gutter) - var(--pass-col))); }
  .foot { right: var(--pass-col); }
}

.pass {
  position: fixed; right: var(--sc-gutter); bottom: var(--sc-5); z-index: calc(var(--sc-z-chrome) + 1);
  width: var(--pass-w);
  font-family: var(--sc-font-text);
  color: #10151d;
}
.pass__toggle { display: none; }
.pass__body {
  position: relative;
  background: var(--sand-soft);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3);
  padding: var(--sc-4) var(--sc-5) var(--sc-5);
  overflow: hidden;
}
.pass__body::before, .pass__body::after {
  content: ""; position: absolute; top: 58%; width: 14px; height: 14px; border-radius: 50%; background: var(--sc-canvas);
}
.pass__body::before { left: -7px; }
.pass__body::after { right: -7px; }
.pass__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-3); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #4b5563; }
.pass__brand { font-weight: 600; color: #10151d; }
.pass__route { display: flex; align-items: baseline; gap: var(--sc-3); margin-top: var(--sc-3); font-family: var(--sc-font-display); font-size: 2.6rem; line-height: 1; letter-spacing: -0.01em; }
.pass__to { font-family: var(--sc-font-text); font-size: 0.8rem; color: #4b5563; letter-spacing: 0.08em; text-transform: uppercase; }
.pass__fields { display: grid; gap: 0.35rem; margin: var(--sc-4) 0 0; padding-top: var(--sc-3); border-top: 1px dashed rgba(16, 21, 29, 0.35); }
.pass__field { display: grid; grid-template-columns: 6.2rem 1fr; gap: var(--sc-2); align-items: baseline; font-size: 0.8rem; line-height: 1.4; }
.pass__field dt { margin: 0; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #4b5563; }
.pass__field dd { margin: 0; color: #4b5563; font-style: italic; transition: color var(--sc-d-base) var(--sc-ease-out); }
.pass__field.is-printed dd { color: #10151d; font-style: normal; font-weight: 500; }
.pass__stamp {
  position: absolute; right: 1.2rem; top: 1.6rem; padding: 0.15rem 0.5rem;
  border: 2px solid var(--sc-accent); border-radius: 4px; color: var(--sc-accent);
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(-9deg) scale(0.95); opacity: 0;
  transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out);
}
.pass[data-stage="land"] .pass__stamp { opacity: 1; transform: rotate(-9deg) scale(1); }
.pass__cta { display: none; margin-top: var(--sc-4); width: 100%; }
.pass[data-stage="land"] .pass__cta { display: inline-flex; }
.pass__barcode {
  height: 26px; margin-top: var(--sc-4); opacity: 0.85;
  background: repeating-linear-gradient(90deg, #10151d 0 2px, transparent 2px 4px, #10151d 4px 5px, transparent 5px 9px, #10151d 9px 12px, transparent 12px 14px);
}

/* ----------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .hero__title { font-size: var(--sc-t-2xl); max-width: 12ch; }
  .hero__lede { max-width: 30ch; }
  /* The copy spans the width here, so the density is a band, not a corner. */
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(10, 15, 29, 0.94) 0%, rgba(10, 15, 29, 0.8) 30%, rgba(10, 15, 29, 0.42) 56%, rgba(10, 15, 29, 0) 76%);
  }
  .sc-display--xl { font-size: clamp(3rem, 2rem + 7vw, 5rem); }
  /* Phone art direction: a smaller plane, higher, clear of the copy band. */
  .world__plane { width: 86vw; }
  .world__cloud--far { bottom: 32%; height: 40vh; }
  .world__cloud--mid { bottom: 12%; height: 48vh; }
  .world__cloud--near { bottom: -10%; height: 54vh; }
  /* The engine re-anchors every .sc-copy to the gutters here; the centred line must not keep its -50% shift. */
  .liftoff__copy { left: var(--sc-gutter); right: var(--sc-gutter); top: 34%; translate: 0 -50%; max-width: none; }
  .rail { padding-inline: var(--sc-gutter) 6vw; }
  .rail__lead { width: 70vw; }
  .plan { width: 76vw; }
  .rail__note { width: 60vw; }
  /* Small figures carry their label below the image, not over it. */
  .place figcaption, .place--trail figcaption { position: static; max-width: none; margin-top: var(--sc-2); text-align: left; border-left: 1px solid var(--sc-accent); border-right: 0; background: transparent; padding-left: var(--sc-3); }
  .places { gap: clamp(2rem, 6vw, 4rem); }
  .argument__line { max-width: 18ch; }
  .land__copy { bottom: clamp(11rem, 30vh, 16rem); }
  .foot { bottom: 4.6rem; }

  .pass { right: 0; bottom: 0; left: 0; width: auto; }
  .pass__toggle {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-3); width: 100%;
    padding: 0.7rem var(--sc-gutter); border: 0; border-radius: var(--sc-r-md) var(--sc-r-md) 0 0;
    background: var(--sand-soft); color: #10151d; box-shadow: var(--sc-e3); cursor: pointer; text-align: left;
  }
  .pass__toggle-label { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #4b5563; }
  .pass__toggle-line { font-size: 0.85rem; font-weight: 500; }
  .pass__body { display: none; border-radius: 0; box-shadow: none; padding-inline: var(--sc-gutter); }
  .pass[data-open="true"] .pass__body { display: block; }
  .pass__body::before, .pass__body::after { display: none; }
}
@media (max-width: 480px) {
  .bar__cta { display: none; }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .world__runway, .world__plane, .world__cloud, .world__stars, .world__arrival { transform: none !important; }
  .world__cloud { opacity: 0 !important; }
  /* The still composition: the runway plate with the plane already climbing, no position changes. */
  .world__plane { opacity: 1 !important; width: clamp(280px, 34vw, 560px); top: 46%; }
  .world__arrival { transition: opacity 220ms var(--sc-ease-out); }
  .world.is-landed .world__arrival { opacity: 1 !important; }
  .world.is-landed .world__runway, .world.is-landed .world__plane { opacity: 0 !important; }
  .plan { opacity: 1; }
}