/* =====================================================================
   Bey, the search screen  (.bjb-bey, drawn by js/bj-bey.js)
   ---------------------------------------------------------------------
   Bey, the site's pilot bird, cut out of the designer's picture
   (img/bey/bey-pilot.webp, transparent), floats in the open on the page
   background over a soft shadow that shrinks as he rises, faint wisps of
   air drifting past behind him; under him the message, the route in
   words, a thin orange progress line and a line that changes every two
   seconds. Shown wherever a flight search makes the traveller wait: the
   /flights landing page as an overlay the moment Search is pressed, the
   results page from its first paint and on every search (2026-10-16).
   Colours are written out, not var()s: the landing page does not load
   bj-booking.css. Boxed versions (a panel, two skies, a night map) were
   all turned down that day - no box. All motion stops under
   prefers-reduced-motion.
   ===================================================================== */
.bjb-bey { max-width: 640px; margin: 0 auto; padding: 12px 0 24px; text-align: center; font-family: inherit; }
/* inside a grid of cards (the hotel recommendations popup) the block takes
   the whole row, not the first cell */
.bjb-bey { grid-column: 1 / -1; }

/* the open air: Bey over a soft shadow, wisps behind him */
.bjb-bey__air { position: relative; height: 236px; max-width: 560px; margin: 0 auto 4px; }
.bjb-bey__wisp {
  position: absolute; left: -40%; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(23, 35, 62, 0) 0%, rgba(23, 35, 62, .045) 50%, rgba(23, 35, 62, 0) 100%);
  animation: bjbBeyWisp var(--t, 18s) linear infinite; animation-delay: var(--d, 0s);
}
.bjb-bey__wisp--a { top: 20%; width: 220px; --t: 15s; }
.bjb-bey__wisp--b { top: 54%; width: 150px; --t: 21s; --d: -9s; }
.bjb-bey__wisp--c { top: 82%; width: 260px; --t: 26s; --d: -17s; }
@keyframes bjbBeyWisp { from { left: -40%; } to { left: 110%; } }
.bjb-bey__shadow {
  position: absolute; left: 50%; bottom: 4px; width: 250px; height: 22px; margin-left: -125px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 35, 62, .16) 0%, rgba(23, 35, 62, 0) 70%);
  animation: bjbBeyShadow 5.5s ease-in-out 1.1s infinite;
}
@keyframes bjbBeyShadow {
  0%, 100% { transform: scaleX(1); opacity: .9; }
  30% { transform: scaleX(.84); opacity: .55; }
  65% { transform: scaleX(1.04); opacity: 1; }
}

/* Bey: glides in once, then rides the air */
.bjb-bey__flyer {
  position: absolute; left: 50%; top: 10px; width: 380px; margin-left: -190px;
  animation: bjbBeyEnter 1.1s cubic-bezier(.2, .8, .2, 1) both, bjbBeyFly 5.5s ease-in-out 1.1s infinite;
}
/* the picture never taller than the air it floats in, whatever its shape
   (a cached older picture, a new one) - so it cannot run into the words */
.bjb-bey__img { display: block; width: 100%; height: auto; max-height: 226px; object-fit: contain; object-position: center bottom; }
@keyframes bjbBeyEnter { from { transform: translate(-30%, 12%) scale(.88); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bjbBeyFly {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(5px, -10px) rotate(-2deg); }
  65% { transform: translate(-3px, 5px) rotate(1.2deg); }
}

/* the words under Bey */
/* text-transform and letter-spacing reset: the landing page capitalises every h3 */
.bjb-bey__msg { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: #17233e; }
.bjb-bey__dots { display: inline-block; margin-left: 2px; }
.bjb-bey__dots i {
  display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; vertical-align: 2px;
  background: #f5761a; animation: bjbBeyDot 1.2s ease-in-out infinite;
}
.bjb-bey__dots i:nth-child(2) { animation-delay: .2s; }
.bjb-bey__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bjbBeyDot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.bjb-bey__route { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #56607a; }
.bjb-bey__sub { margin: 0 auto 14px; max-width: 460px; font-size: 13.5px; line-height: 1.5; color: #56607a; }
.bjb-bey__route b { font-weight: 600; color: #17233e; }
.bjb-bey__route i, .bjb-bey__route svg { margin: 0 4px; font-size: 12px; color: #f5761a; }
.bjb-bey__sep { margin: 0 8px; color: #b9c0cf; }
.bjb-bey__bar { display: block; width: 220px; height: 3px; margin: 0 auto 12px; border-radius: 999px; background: #e8ebf2; overflow: hidden; }
.bjb-bey__bar i {
  display: block; width: 40%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #f5761a 0%, #dd660f 100%);
  animation: bjbBeyBar 1.6s ease-in-out infinite;
}
@keyframes bjbBeyBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.bjb-bey__tip { min-height: 20px; margin: 0; font-size: 13.5px; color: #56607a; }
.bjb-bey__tip.is-in { animation: bjbBeyTip .4s ease-out; }
@keyframes bjbBeyTip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bjb-bey__slow { margin: 8px auto 0; max-width: 520px; font-size: 12.5px; color: #56607a; }
.bjb-bey__slow[hidden] { display: none; }

/* the landing page: Bey over the whole page while the results page loads */
.bjb-bey-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(247, 246, 243, .96); animation: bjbBeyVeil .35s ease-out both;
}
.bjb-bey-overlay .bjb-bey { width: 100%; }
@keyframes bjbBeyVeil { from { opacity: 0; } to { opacity: 1; } }
.bjb-bey-overlay.is-leaving { animation: bjbBeyVeilOut .4s ease-in both; pointer-events: none; }
@keyframes bjbBeyVeilOut { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 575px) {
  .bjb-bey { padding: 8px 0 16px; }
  .bjb-bey__air { height: 184px; }
  .bjb-bey__img { max-height: 176px; }
  .bjb-bey__flyer { width: 290px; margin-left: -145px; top: 8px; }
  .bjb-bey__shadow { width: 190px; margin-left: -95px; height: 18px; }
  .bjb-bey__msg { font-size: 16.5px; }
  .bjb-bey__route { font-size: 12.5px; }
  .bjb-bey__sep { margin: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .bjb-bey__flyer, .bjb-bey__wisp, .bjb-bey__shadow, .bjb-bey__dots i, .bjb-bey__bar i, .bjb-bey__tip, .bjb-bey-overlay { animation: none !important; }
}

/* ---- the hotels scene: Bey showing a hotel search on his laptop
   (img/bey/bey-hotel.webp, 2026-10-16, her fourth picture - "ye use karo,
   baaki remove kar do") ----
   Standing, the laptop held out with the search screen on it; nothing
   drawn behind him. He walks in once from the left and then stands, a
   small breath in him; the shadow keeps still. */
.bjb-bey--hotels .bjb-bey__flyer {
  width: 300px; margin-left: -150px; top: 2px;
  animation: bjbBeyWalkIn 1.1s cubic-bezier(.2, .8, .2, 1) both, bjbBeySit 4.5s ease-in-out 1.1s infinite;
}
.bjb-bey--hotels .bjb-bey__shadow { width: 230px; margin-left: -115px; animation: none; opacity: .85; }
@keyframes bjbBeyWalkIn { from { transform: translateX(-18%) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bjbBeySit { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---- compact: Bey small beside the words, for a strip inside a page
   (the rate re-check at a hotel checkout) rather than a screen of his own ---- */
.bjb-bey--compact {
  display: flex; align-items: center; gap: 18px; max-width: none; padding: 6px 0 4px; text-align: left;
}
.bjb-bey--compact .bjb-bey__air { flex: 0 0 150px; width: 150px; height: 118px; margin: 0; }
.bjb-bey--compact .bjb-bey__img { max-height: 112px; }
.bjb-bey--compact .bjb-bey__wisp { display: none; }
.bjb-bey--compact .bjb-bey__flyer { width: 150px; margin-left: -75px; top: 2px; }
.bjb-bey--compact.bjb-bey--hotels .bjb-bey__flyer { width: 146px; margin-left: -73px; top: 2px; }
.bjb-bey--compact .bjb-bey__shadow { width: 110px; margin-left: -55px; height: 12px; bottom: 2px; }
.bjb-bey--compact .bjb-bey__words { flex: 1 1 auto; min-width: 0; }
.bjb-bey--compact .bjb-bey__msg { font-size: 16px; margin-bottom: 4px; }
.bjb-bey--compact .bjb-bey__sub { margin: 0 0 10px; max-width: none; font-size: 13px; }
.bjb-bey--compact .bjb-bey__bar { margin: 0 0 8px; }
.bjb-bey--compact .bjb-bey__tip { font-size: 12.5px; }

@media (max-width: 575px) {
  .bjb-bey--hotels .bjb-bey__flyer { width: 230px; margin-left: -115px; top: 4px; }
  .bjb-bey--hotels .bjb-bey__shadow { width: 170px; margin-left: -85px; }
  .bjb-bey--compact { gap: 12px; }
  .bjb-bey--compact .bjb-bey__air { flex-basis: 110px; width: 110px; height: 90px; }
  .bjb-bey--compact .bjb-bey__img { max-height: 86px; }
  .bjb-bey--compact .bjb-bey__flyer { width: 110px; margin-left: -55px; }
  .bjb-bey--compact.bjb-bey--hotels .bjb-bey__flyer { width: 104px; margin-left: -52px; }
  .bjb-bey--compact .bjb-bey__msg { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bjb-bey--hotels .bjb-bey__flyer { animation: none !important; }
}

/* ---- the holidays scene: Bey with a map, sunglasses and camera by a
   signpost and a sticker-covered suitcase (img/bey/bey-holiday.webp,
   2026-10-16, her eleventh picture - two went before it) ----
   Taller than wide, so the height cap on the picture decides his size. He steps in once from the left and
   then stands, a small breath in him; the shadow keeps still. */
.bjb-bey--holidays .bjb-bey__flyer {
  width: 240px; margin-left: -120px; top: 0;
  animation: bjbBeyWalkIn 1.1s cubic-bezier(.2, .8, .2, 1) both, bjbBeySit 4.5s ease-in-out 1.1s infinite;
}
.bjb-bey--holidays .bjb-bey__shadow { width: 190px; margin-left: -95px; animation: none; opacity: .85; }
.bjb-bey--compact.bjb-bey--holidays .bjb-bey__flyer { width: 112px; margin-left: -56px; top: 2px; }
@media (max-width: 575px) {
  .bjb-bey--holidays .bjb-bey__flyer { width: 180px; margin-left: -90px; top: 2px; }
  .bjb-bey--holidays .bjb-bey__shadow { width: 150px; margin-left: -75px; }
}
@media (prefers-reduced-motion: reduce) {
  .bjb-bey--holidays .bjb-bey__flyer { animation: none !important; }
}

/* ---- the experiences scene: Bey with his tickets (img/bey/bey-experiences.webp, 2026-10-16) ----
   Her picture of Bey in sunglasses striding along with a camera and two
   tickets held up, landmarks behind him (two versions went before it);
   nearly square. He steps in once from the left and then stands, a
   small breath in him; the shadow keeps still. */
.bjb-bey--experiences .bjb-bey__flyer {
  width: 250px; margin-left: -125px; top: 0;
  animation: bjbBeyWalkIn 1.1s cubic-bezier(.2, .8, .2, 1) both, bjbBeySit 4.5s ease-in-out 1.1s infinite;
}
.bjb-bey--experiences .bjb-bey__shadow { width: 210px; margin-left: -105px; animation: none; opacity: .85; }
.bjb-bey--compact.bjb-bey--experiences .bjb-bey__flyer { width: 136px; margin-left: -68px; top: 2px; }
@media (max-width: 575px) {
  .bjb-bey--experiences .bjb-bey__flyer { width: 190px; margin-left: -95px; top: 2px; }
  .bjb-bey--experiences .bjb-bey__shadow { width: 160px; margin-left: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .bjb-bey--experiences .bjb-bey__flyer { animation: none !important; }
}

/* ---- the golden journeys scene: Bey leading his senior travellers
   (img/bey/bey-golden.webp, 2026-10-16) ----
   Her picture of four travellers over 60 walking behind Bey and his flag;
   wide, like the plane. The group walks in once from the left and then
   stands, a small breath in it; the shadow keeps still and spans them. */
.bjb-bey--golden .bjb-bey__flyer {
  width: 360px; margin-left: -180px; top: 0;
  animation: bjbBeyWalkIn 1.1s cubic-bezier(.2, .8, .2, 1) both, bjbBeySit 4.5s ease-in-out 1.1s infinite;
}
.bjb-bey--golden .bjb-bey__shadow { width: 320px; margin-left: -160px; animation: none; opacity: .85; }
.bjb-bey--compact.bjb-bey--golden .bjb-bey__flyer { width: 150px; margin-left: -75px; top: 4px; }
@media (max-width: 575px) {
  .bjb-bey--golden .bjb-bey__flyer { width: 280px; margin-left: -140px; top: 2px; }
  .bjb-bey--golden .bjb-bey__shadow { width: 240px; margin-left: -120px; }
}
@media (prefers-reduced-motion: reduce) {
  .bjb-bey--golden .bjb-bey__flyer { animation: none !important; }
}

/* ---- the pictures used whole, as she gave them (2026-10-16 night) ----
   The white-ground pictures (hotels, holidays, experiences, golden
   journeys, the site opening) are not cut out: their own scenery stays,
   their white ground meets the white veil, and on a tinted page a soft
   mask fades the picture's edges into it. No shadow or wisps under them -
   they carry their own ground. The flights picture stays a cut-out. */
.bjb-bey--whole .bjb-bey__shadow, .bjb-bey--whole .bjb-bey__wisp { display: none; }
.bjb-bey--whole .bjb-bey__air { height: 270px; max-width: 640px; }
.bjb-bey--whole .bjb-bey__flyer { width: 460px; margin-left: -230px; top: 0; }
.bjb-bey--whole .bjb-bey__img {
  max-height: 268px;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 58%, transparent 100%);
}
.bjb-bey-overlay { background: #fff; }
.bjb-bey-overlay .bjb-bey--whole .bjb-bey__img { -webkit-mask-image: none; mask-image: none; }
.bjb-bey--compact.bjb-bey--whole .bjb-bey__air { flex-basis: 170px; width: 170px; height: 100px; }
.bjb-bey--compact.bjb-bey--whole .bjb-bey__flyer { width: 170px; margin-left: -85px; top: 2px; }
.bjb-bey--compact.bjb-bey--whole .bjb-bey__img { max-height: 96px; }

/* the site opening: the owner's picture, bar and all, so no bar of ours */
.bjb-bey--site .bjb-bey__air { height: 320px; max-width: 720px; }
.bjb-bey--site .bjb-bey__flyer { width: 560px; margin-left: -280px; }
.bjb-bey--site .bjb-bey__img { max-height: 316px; }
.bjb-bey--site .bjb-bey__bar { display: none; }

/* the passing line once a search is done (the owner's "Search complete") */
.bjb-bey-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 100001; display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 8px 16px 8px 8px; transform: translateX(-50%);
  background: #fff; border: 1px solid #e6e9f0; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 18px 40px -18px rgba(23, 35, 62, .4);
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: #17233e;
  animation: bjbBeyToastIn .35s ease-out both;
}
.bjb-bey-toast img { width: 44px; height: 32px; object-fit: contain; border-radius: 8px; }
.bjb-bey-toast.is-leaving { animation: bjbBeyToastOut .4s ease-in both; }
@keyframes bjbBeyToastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bjbBeyToastOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 12px); } }

@media (max-width: 575px) {
  .bjb-bey--whole .bjb-bey__air { height: 200px; }
  .bjb-bey--whole .bjb-bey__flyer { width: 320px; margin-left: -160px; }
  .bjb-bey--whole .bjb-bey__img { max-height: 196px; }
  .bjb-bey--site .bjb-bey__air { height: 220px; }
  .bjb-bey--site .bjb-bey__flyer { width: 350px; margin-left: -175px; }
  .bjb-bey--site .bjb-bey__img { max-height: 216px; }
  .bjb-bey--compact.bjb-bey--whole .bjb-bey__air { flex-basis: 120px; width: 120px; height: 72px; }
  .bjb-bey--compact.bjb-bey--whole .bjb-bey__flyer { width: 120px; margin-left: -60px; }
  .bjb-bey--compact.bjb-bey--whole .bjb-bey__img { max-height: 70px; }
  .bjb-bey-toast { bottom: 14px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .bjb-bey-toast { animation: none !important; }
}