/* =========================================================
   Travel Point – shared motion & card effects (all pages)
   js/fx.js tags the cards of every page (.fx-card) and their parts; this file animates them:
     smooth image zoom · gradient transition · floating icon · title (destination name) movement ·
     arrow animation · slight card elevation · overlay reveal
   Hover effects run only on devices with a mouse; everything is off for "reduce motion".
   Elevation uses the `translate` property, so it never fights AOS (which animates `transform`).
   ========================================================= */
:root {
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
  --fx-lift: -6px;
  --fx-shadow: 0 22px 46px rgba(18, 48, 46, .16), 0 6px 14px rgba(18, 48, 46, .06);
}

/* ---------- card base ---------- */
.fx-card { transition: translate .5s var(--fx-ease), box-shadow .5s var(--fx-ease), border-color .4s; }
.fx-rel { position: relative; }

/* ---------- image block: zoom + overlay reveal (::after) + light sweep (::before) ---------- */
.fx-media { isolation: isolate; }
.fx-img { transition: transform 1s var(--fx-ease), filter .6s var(--fx-ease); will-change: transform; }
.fx-media > :not(img):not(picture):not(.fx-fab) { z-index: 2; }

/* overlay reveal: a teal → gold gradient rises from the bottom */
.fx-ov-after::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to top, rgba(1, 46, 48, .78) 0%, rgba(1, 46, 48, .32) 42%, rgba(211, 162, 74, .14) 78%, rgba(211, 162, 74, 0) 100%);
  clip-path: inset(100% 0 0 0); opacity: .9;
  transition: clip-path .7s var(--fx-ease), opacity .5s;
}
/* gradient light sweep across the picture */
.fx-sweep-before::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg); opacity: 0;
}

/* floating action icon on pictures (added by fx.js, decorative) */
.fx-fab {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none; color: #1b2a2a; font-size: 17px;
  background: linear-gradient(180deg, var(--gold-light, #fbe3a2) 0%, var(--gold-mid, #eec169) 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .25), 0 0 0 6px rgba(255, 255, 255, .18);
  opacity: 0; transform: scale(.4) rotate(-45deg);
  transition: opacity .45s var(--fx-ease), transform .55s var(--fx-ease);
}
.fx-fab i { transform: rotate(-45deg); transition: transform .5s var(--fx-ease); }

/* ---------- icon-only cards: gradient wash behind the content ---------- */
.fx-grad { isolation: isolate; }
.fx-grad::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg, rgba(211, 162, 74, .14) 0%, rgba(251, 247, 239, 0) 45%, rgba(0, 55, 56, .07) 100%);
  background-size: 220% 220%; background-position: 100% 100%; opacity: 0;
  transition: opacity .5s var(--fx-ease), background-position .9s var(--fx-ease);
}

/* ---------- parts ---------- */
.fx-title { transition: translate .45s var(--fx-ease), color .35s; }
.fx-arrow { display: inline-block; transition: translate .35s var(--fx-ease); }
.fx-float { transition: translate .45s var(--fx-ease); }

/* standalone pictures in content sections (about, office, story …) */
.fx-zoom img { transition: transform 1.1s var(--fx-ease); }

/* ---------- hover (mouse / trackpad only) ---------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .fx-card:hover { translate: 0 var(--fx-lift); }
  .fx-card.fx-shadow:hover { box-shadow: var(--fx-shadow); }

  .fx-card:hover .fx-img { transform: scale(1.08); }
  .fx-card:hover .fx-ov-after::after { clip-path: inset(0 0 0 0); }
  .fx-card:hover .fx-sweep-before::before { animation: fx-sweep 1s var(--fx-ease) forwards; }
  .fx-card:hover .fx-fab { opacity: 1; transform: scale(1) rotate(0deg); animation: fx-float 2.4s ease-in-out .55s infinite; }
  .fx-card:hover .fx-fab i { transform: rotate(-45deg) translateX(2px); }

  .fx-card:hover.fx-grad::before { opacity: 1; background-position: 0 0; }

  .fx-card:hover .fx-title { translate: 6px 0; }
  .fx-card:hover .fx-title:not(.fx-title--light) { color: #a06a22; } /* deep gold – readable on white (4.5:1) */
  .fx-card:hover .fx-arrow { translate: 5px 0; animation: fx-nudge 1.1s ease-in-out .35s infinite; }
  .fx-card:hover .fx-float { animation: fx-float 2.2s ease-in-out infinite; }

  .fx-zoom:hover img { transform: scale(1.06); }
}

@keyframes fx-sweep { 0% { left: -75%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
@keyframes fx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes fx-nudge { 0%, 100% { translate: 5px 0; } 50% { translate: 10px 0; } }

/* ---------- Swiper (home packages slider) ---------- */
.pslider.is-swiper .pslider__track { display: flex; gap: 0; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
.pslider.is-swiper .pslider__track > * { flex: 0 0 auto; scroll-snap-align: none; height: auto; }
.pslider.is-swiper .swiper { padding: 12px 6px 34px; margin: -12px -6px -34px; }
.pslider.is-swiper .pslider__dots { display: flex; justify-content: center; gap: 8px; }
.pslider.is-swiper .pslider__dot { cursor: pointer; }
.pslider.is-swiper .pslider__nav.swiper-button-disabled { opacity: .4; pointer-events: none; }
/* phones: cards run to the screen edge like before */
@media (max-width: 767px) {
  .pslider.is-swiper .swiper { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}

/* ---------- reduced motion: no scroll reveals either ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-img, .fx-zoom img { transition: none; }
}