/* VOYAGER_MOTION_V1 - cosmetic micro-interactions (see js/voy-motion.js). No layout change; disabled for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  /* buttons: soft lift on hover, press-in on tap */
  .voy-btn, .voy-m-tab { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background-color .2s ease, color .2s ease, filter .2s ease; }
  .voy-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16,24,40,.18); filter: brightness(1.04); }
  .voy-btn:active { transform: translateY(0) scale(.97); box-shadow: 0 2px 6px rgba(16,24,40,.16); }
  .voy-m-tab:active { transform: scale(.96); }
  .voy-swap-btn { transition: box-shadow .2s ease, background-color .2s ease; }
  .voy-swap-btn:hover { box-shadow: 0 4px 12px rgba(16,24,40,.22); }

  /* swap: the arrows make a full turn ... */
  .voy-swap-btn.voy-spin svg { animation: voySwapSpin .55s cubic-bezier(.4,0,.2,1); }
  @keyframes voySwapSpin { from { transform: rotate(var(--voy-swap-from, 0deg)); } to { transform: rotate(calc(var(--voy-swap-from, 0deg) + 360deg)); } }
  body.voy-home .voy-swap-btn { --voy-swap-from: 90deg; }

  /* ... and the two values slide past each other (phones: vertical, desktop: horizontal) */
  .voy-od-row.voy-swapping .voy-field:nth-of-type(1) .voy-field-value { animation: voySwapIn1 .5s cubic-bezier(.2,.8,.2,1); }
  .voy-od-row.voy-swapping .voy-field:nth-of-type(2) .voy-field-value { animation: voySwapIn2 .5s cubic-bezier(.2,.8,.2,1); }
  @keyframes voySwapIn1 { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
  @keyframes voySwapIn2 { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
  @media (max-width: 760px) {
    @keyframes voySwapIn1 { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    @keyframes voySwapIn2 { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
  }

  /* tabs: the active pill glides to the pressed tab */
  .voy-m-tabs { position: relative; }
  .voy-m-tabs .voy-m-tab { position: relative; z-index: 1; }
  .voy-tab-glide {
    position: absolute; z-index: 0; border-radius: 12px; pointer-events: none;
    background: color-mix(in srgb, var(--voy-color-primary, #2f7bdc) 82%, #fff);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--voy-color-primary, #2f7bdc) 24%, transparent);
    transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);
  }
  .voy-tabs-gliding .voy-m-tab[aria-current="page"] { background: transparent !important; box-shadow: none !important; color: color-mix(in srgb, var(--voy-color-primary, #2f7bdc) 85%, #172033) !important; }
  .voy-tabs-gliding .voy-m-tab.voy-glide-to { color: #fff !important; }
}

/* HOVER motion (no click needed): the swap arrows turn when the pointer comes near, a soft pill follows the pointer over the module tabs, fields respond */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .voy-swap-btn svg { transition: transform .5s cubic-bezier(.4,0,.2,1); }
  .voy-swap-btn:hover svg { transform: rotate(180deg); }
  body.voy-home .voy-swap-btn:hover svg { transform: rotate(270deg); }
  .voy-swap-btn:hover { box-shadow: 0 6px 16px rgba(16,24,40,.24); }
  .voy-field { transition: box-shadow .22s ease, background-color .22s ease, border-color .22s ease; }
  .voy-field:hover { box-shadow: 0 6px 16px rgba(16,24,40,.10); }

  .voy-tab-hover {
    position: absolute; z-index: 0; border-radius: 12px; pointer-events: none; opacity: 0;
    background: color-mix(in srgb, var(--voy-color-primary, #2f7bdc) 12%, #fff);
    transition: left .26s cubic-bezier(.4,0,.2,1), top .26s cubic-bezier(.4,0,.2,1), width .26s cubic-bezier(.4,0,.2,1), height .26s cubic-bezier(.4,0,.2,1), opacity .18s ease;
  }
  .voy-tabs-hovering .voy-tab-hover { opacity: 1; }
  .voy-tabs-hovering .voy-m-tab:not([aria-current="page"]):hover { background: transparent !important; }
  .voy-m-tab:hover { transform: translateY(-1px); }
}

/* DESKTOP HOME: the swap button sits between the two fields (thin ring, turns solid blue with white arrows on hover) */
@media (min-width: 761px) {
  body.voy-page-home .voy-od-row .voy-swap-btn {
    left: calc(50% - 20px) !important; width: 34px !important; height: 34px !important;
    background: #fff !important; color: var(--voy-color-primary, #2f7bdc) !important;
    border: 1px solid var(--voy-color-primary, #2f7bdc) !important; box-shadow: none !important;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  body.voy-page-home .voy-od-row .voy-swap-btn:hover {
    background: var(--voy-color-primary, #2f7bdc) !important; color: #fff !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--voy-color-primary, #2f7bdc) 38%, transparent) !important;
  }
  body.voy-page-home #voy-origin-field { padding-right: 40px !important; }
  body.voy-page-home #voy-destination-field { padding-left: 34px !important; }
}

/* OFFERS: the photo zooms inside its frame when the pointer comes near, the card lifts */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .voy-offer-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
  .voy-offer-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(16,24,40,.18); }
  .voy-offer-media { position: relative; overflow: hidden; }
  .voy-offer-media::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: inherit; background-size: cover; background-position: center;
    transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  }
  .voy-offer-media > * { position: relative; z-index: 1; }
  .voy-offer-card:hover .voy-offer-media::after { transform: scale(1.14); filter: saturate(1.12) brightness(1.04); }
}

/* DESKTOP HOME: the long search bar looks lifted off the page (layered shadows, soft top light, faint cool gradient instead of flat white) */
@media (min-width: 761px) {
  body.voy-page-home .voy-search-fields {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .95) inset,
      0 -1px 0 rgba(16, 24, 40, .06) inset,
      0 2px 4px rgba(6, 20, 36, .18),
      0 10px 22px -4px rgba(6, 20, 36, .30),
      0 28px 50px -10px rgba(6, 20, 36, .46),
      0 52px 84px -22px rgba(6, 20, 36, .38) !important;
  }
}

/* OFFERS: cards rest on a soft shadow (depth) instead of a flat outline; hover (above) deepens it */
.voy-offer-card {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 14px -4px rgba(16, 24, 40, .14), 0 18px 30px -12px rgba(16, 24, 40, .16);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .voy-offer-card:hover { box-shadow: 0 4px 8px rgba(16, 24, 40, .08), 0 18px 34px -6px rgba(16, 24, 40, .22), 0 34px 52px -16px rgba(16, 24, 40, .26); }
}

/* DESKTOP HOME: module tab buttons and the search button sit on layered 3D shadows */
@media (min-width: 761px) {
  body.voy-page-home .voy-m-tab {
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(6,20,36,.16), 0 10px 18px -4px rgba(6,20,36,.28), 0 20px 30px -10px rgba(6,20,36,.30);
  }
  body.voy-page-home .voy-m-tab[aria-current="page"] {
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 4px rgba(6,20,36,.22), 0 10px 18px -4px rgba(6,20,36,.36), 0 20px 30px -10px rgba(6,20,36,.36);
  }
  body.voy-page-home .voy-search-cta {
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 2px 4px rgba(6,20,36,.22), 0 10px 18px -4px rgba(6,20,36,.34);
  }
}

/* DESKTOP HOME: the search fields come alive under the pointer (white pill lifts out, label turns to the brand colour) */
@media (min-width: 761px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.voy-page-home .voy-search-panel .voy-search-fields .voy-field {
    border-radius: 0; transition: background-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-radius .22s ease;
  }
  body.voy-page-home .voy-search-panel .voy-search-fields .voy-field:hover {
    background: #fff !important; border-radius: 22px; transform: translateY(-2px); z-index: 2;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--voy-color-primary, #2f7bdc) 22%, transparent), 0 10px 22px -6px rgba(6,20,36,.30) !important;
  }
  body.voy-page-home .voy-search-panel .voy-search-fields .voy-field .voy-field-label { transition: color .2s ease, letter-spacing .2s ease; }
  body.voy-page-home .voy-search-panel .voy-search-fields .voy-field:hover .voy-field-label { color: var(--voy-color-primary, #2f7bdc) !important; }
  body.voy-page-home .voy-search-panel .voy-search-fields .voy-field .voy-field-value { transition: color .2s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
  body.voy-page-home .voy-search-panel .voy-search-fields .voy-field:hover .voy-field-value { transform: translateX(2px); }
  body.voy-page-home .voy-search-panel .voy-search-fields .voy-field:hover::after { opacity: 0; }
}

/* SEARCH BUTTON: a plane flies across it (left to right) before the loading screen opens */
.voy-search-cta { position: relative; overflow: hidden; }
.voy-search-cta .voy-plane { position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; opacity: 0; pointer-events: none; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .voy-search-cta > svg:first-of-type, .voy-search-cta .voy-search-cta-label { transition: opacity .22s ease, transform .22s ease; }
  .voy-search-cta.voy-flying > svg:first-of-type, .voy-search-cta.voy-flying .voy-search-cta-label { opacity: 0; transform: translateX(10px); }
  .voy-search-cta.voy-flying .voy-plane { animation: voyPlaneFly .62s linear forwards; }
  @keyframes voyPlaneFly {
    0%   { opacity: 0; transform: translateX(-24px) rotate(45deg) scale(.9); }
    8%   { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc(var(--voy-fly-w, 180px) + 12px)) rotate(45deg) scale(1.15); }
  }
}