/* =====================================================================
   CARD MOTION
   The hover motion from Uiverse.io by vaibhavchandranv, applied to every
   content card on the site — packages, destinations, reviews, stays, cabs,
   activities, collections, search results and the rest.

   Motion only. No shadow, border, colour or size is added: each card keeps
   its own design exactly as it was.

     hover     the card settles 6px, as the original does when pressed
     buttons   a call-to-action inside a card presses in on hover, and fully
               on click

   Built with `translate` rather than `transform`, because many of these cards
   already use transform (hover zooms, and the destinations fan positions each
   card with it). The separate property stacks on top instead of replacing it.
   The transition list restates what those cards animate themselves, or their
   own zooms and fades would start to snap.

   Left out on purpose: the banner's flipping photo tiles, the payment choices
   in the Pay Online popup, the chat widget, and buttons carrying the site's
   glowing-arrow effect (.kx-btn), which animate themselves.
   ===================================================================== */
:root {
  --cm-press: 6px;
  --cm-btn-press: 3px;
}

:root :is(
  .act-card, .cab-card, .collcard, .dest-card, .fpromo, .kdeal, .kexp__tile,
  .kshow__card, .ksrp__card, .ktrail__card, .ocard, .pcard2, .proof__tile,
  .rvcard, .scard, .ski-card, .team-card, .tour-card, .vmini, .vstore__card,
  .zoom__card
) {
  transition:
    translate .3s ease,
    transform .45s var(--ease, ease),
    opacity .45s ease,
    box-shadow .3s ease,
    border-color .2s ease,
    background-color .2s ease,
    color .2s ease;
}
:root :is(
  .act-card, .cab-card, .collcard, .dest-card, .fpromo, .kdeal, .kexp__tile,
  .kshow__card, .ksrp__card, .ktrail__card, .ocard, .pcard2, .proof__tile,
  .rvcard, .scard, .ski-card, .team-card, .tour-card, .vmini, .vstore__card,
  .zoom__card
):hover {
  translate: 0 var(--cm-press);
}

/* ---- buttons inside a card: press in on hover, fully on click ---- */
:root :is(
  .act-card, .cab-card, .collcard, .dest-card, .fpromo, .kdeal, .kexp__tile,
  .kshow__card, .ksrp__card, .ktrail__card, .ocard, .pcard2, .proof__tile,
  .rvcard, .scard, .ski-card, .team-card, .tour-card, .vmini, .vstore__card,
  .zoom__card
) :is([class*="__btn"], [class*="__cta"], [class*="-btn"]):not([class*="dot"]):not([class*="step"]):not([class*="arrow"]):not(.kx-btn) {
  transition:
    translate .3s ease,
    transform .3s ease,
    background-color .3s ease,
    border-color .2s ease,
    color .2s ease;
}
:root :is(
  .act-card, .cab-card, .collcard, .dest-card, .fpromo, .kdeal, .kexp__tile,
  .kshow__card, .ksrp__card, .ktrail__card, .ocard, .pcard2, .proof__tile,
  .rvcard, .scard, .ski-card, .team-card, .tour-card, .vmini, .vstore__card,
  .zoom__card
) :is([class*="__btn"], [class*="__cta"], [class*="-btn"]):not([class*="dot"]):not([class*="step"]):not([class*="arrow"]):not(.kx-btn):hover {
  translate: calc(var(--cm-btn-press) / 2) calc(var(--cm-btn-press) / 2);
}
:root :is(
  .act-card, .cab-card, .collcard, .dest-card, .fpromo, .kdeal, .kexp__tile,
  .kshow__card, .ksrp__card, .ktrail__card, .ocard, .pcard2, .proof__tile,
  .rvcard, .scard, .ski-card, .team-card, .tour-card, .vmini, .vstore__card,
  .zoom__card
) :is([class*="__btn"], [class*="__cta"], [class*="-btn"]):not([class*="dot"]):not([class*="step"]):not([class*="arrow"]):not(.kx-btn):active {
  translate: var(--cm-btn-press) var(--cm-btn-press);
}

@media (prefers-reduced-motion: reduce) {
  :root :is(
    .act-card, .cab-card, .collcard, .dest-card, .fpromo, .kdeal, .kexp__tile,
    .kshow__card, .ksrp__card, .ktrail__card, .ocard, .pcard2, .proof__tile,
    .rvcard, .scard, .ski-card, .team-card, .tour-card, .vmini, .vstore__card,
    .zoom__card
  ):hover { translate: none; }
}