/* TBF motion layer, release 1 (6 Nov 2026): every page is a flight. The logo's plane takes off from the first T in the
   header and lands on the last T in the footer; a small plane follows the menu; the search card gets a runway marker
   under the trip type, a boarding-pass Search button and airport codes that turn over. js/tbf-motion.js drives it.
   Decoration only: with animations switched off nothing here moves, and nothing is hidden. */

/* the logos: while one animates, a drawing of it (same shapes, same place) lies over the image, cross-faded in and out */
svg.tbm-live { overflow: visible; }
svg.tbm-live .tbm-trail { fill: none; stroke: #8ea2b7; stroke-width: 1.1; stroke-linecap: round; opacity: 0; }
svg.tbm-live .tbm-jet path, svg.tbm-live .tbm-jet ellipse { fill: #14243a; }
svg.tbm-live .tbm-jet .tbm-gear { fill: #536176; }
svg.tbm-live .tbm-lamp { fill: #f0a020; opacity: 0; }

/* menu: a small plane flies to the link you point at and leaves a contrail that fades */
.tbm-navwrap { position: relative; }
.tbm-navplane { position: absolute; left: 0; bottom: -14px; width: 14px; height: 13px; pointer-events: none; opacity: 0; }
.tbm-navtrail { position: absolute; left: 0; bottom: -8px; height: 2px; width: 0; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(142, 162, 183, 0), #8ea2b7 50%, rgba(142, 162, 183, 0)); }

/* search card: a strip of runway under the chosen trip type */
.tbf-journey .se5-tabs__track { position: relative; }
.tbf-journey .tbm-runway { position: absolute; left: 0; bottom: 3px; width: 0; height: 4px; border-radius: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #ffffff 0 6px, transparent 6px 12px) 0 50% / 100% 1px no-repeat, #14243a; }

/* the Search button as a boarding pass: a perforated stub with a plane that takes off when you press */
.tbf-journey .se5-cta { position: relative; }
.tbf-journey .se5-cta .se5-cta__icon { position: static; align-self: stretch; display: flex !important; align-items: center;
  width: 36px !important; margin: -14px 0; padding-left: 14px; border-left: 2px dashed rgba(255, 255, 255, .6);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath fill='%23fff' d='M42 20C41 18.6 39 18 36 18L27 18 19 4 15.5 4 20 18 9 18 5.5 12.5 3 12.5 4.8 18.5 4 20 4.8 21.5 3 27.5 5.5 27.5 9 22 20 22 15.5 36 19 36 27 22 36 22C39 22 41 21.4 42 20Z'/%3E%3C/svg%3E") calc(50% + 7px + var(--tbm-px, 0px)) calc(50% + var(--tbm-py, 0px)) / 20px 18px no-repeat !important; }
.tbf-journey .se5-cta .se5-cta__icon i { visibility: hidden; }
.tbf-journey .se5-cta .se5-cta__icon::before, .tbf-journey .se5-cta .se5-cta__icon::after { content: ""; position: absolute;
  width: 12px; height: 12px; margin-left: -21px; border-radius: 50%; background: #ffffff; }
.tbf-journey .se5-cta .se5-cta__icon::before { top: -6px; }
.tbf-journey .se5-cta .se5-cta__icon::after { bottom: -6px; }
.tbf-journey .se5-cta .se5-cta__text { position: relative; }
.tbf-journey .se5-cta .se5-cta__text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .8); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.tbf-journey .se5-cta:hover .se5-cta__text::after, .tbf-journey .se5-cta:focus-visible .se5-cta__text::after { transform: scaleX(1); }

/* airport codes turn over like departure-board tiles when they change */
.tbm-flap { display: inline-block; perspective: 300px; }
.tbm-flap > span { display: inline-block; transform-origin: 50% 55%; backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tbf-journey .se5-cta .se5-cta__text::after { transition: none; }
  .tbm-navplane, .tbm-navtrail, .tbf-journey .tbm-runway { display: none; }
}