/* ============================================================
   Motion — premium animations, page transitions and micro-interactions
   Pure CSS/JS, no external animation libraries.
   ============================================================ */

/* Keep anchored sections below the fixed header */
[id] {
  scroll-margin-top: 92px;
}

/* ---------- Header shrink ---------- */

.header__inner {
  transition: padding .55s var(--ease);
}

.header.is-scrolled .header__inner {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ---------- Preloader / page-transition curtain ---------- */

.preloader {
  display: none;
}

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1100px 500px at 18% -10%, rgba(196, 145, 40, .12), transparent 60%),
    radial-gradient(900px 520px at 90% 110%, rgba(38, 46, 98, .45), transparent 55%),
    var(--ink);
  overflow: hidden;
  transform: translateY(-101%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .95s var(--ease), visibility 0s linear .95s;
}

.js body.is-loading .preloader,
.js body.is-leaving .preloader {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .85s var(--ease), visibility 0s;
}

.js body.is-loading,
.js body.is-leaving {
  overflow: hidden;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 0 24px;
}

.preloader__logo {
  width: min(420px, 78vw);
  height: auto;
  opacity: 0;
  animation: preloaderLogo .95s var(--ease) .12s forwards;
}

.preloader__sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
  opacity: 0;
  animation: preloaderMark .8s var(--ease) .28s forwards;
}

.preloader__line {
  width: min(260px, 64vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  background-size: 220% 100%;
  animation: preloaderLine 1.4s linear infinite;
  opacity: 0;
  animation-delay: .15s;
}

.preloader__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-soft));
  animation: preloaderProgress 1.7s var(--ease) forwards;
}

@keyframes preloaderMark {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes preloaderLogo {
  from { opacity: 0; transform: scale(.84) translateY(16px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes preloaderLine {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

@keyframes preloaderProgress {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* ---------- Reveal: route-page grouped sections ---------- */

/* Children are hidden only until their parent section scrolls into view.
   After the reveal animation ends we stop applying motion styles so the
   original hover/transition behaviour of each card is preserved. */

.js .route-stops:not(.is-inview) > *,
.js .route-highlights:not(.is-inview) > *,
.js .route-perks:not(.is-inview) > *,
.js .route-gallery:not(.is-inview) > *,
.js .route-cta__actions:not(.is-inview) > * {
  opacity: 0;
  transform: translateY(22px);
}

.js .route-stops.is-inview > *,
.js .route-highlights.is-inview > *,
.js .route-perks.is-inview > *,
.js .route-gallery.is-inview > *,
.js .route-cta__actions.is-inview > * {
  animation: childReveal .95s var(--ease) backwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes childReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js [data-reveal] {
  will-change: opacity, transform;
}

/* ---------- Cinematic hero ---------- */

.hero__bg {
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}

.hero__bg video,
.hero__bg img {
  will-change: transform;
  backface-visibility: hidden;
}

/* Native fixed-background parallax on route heroes (desktop only) */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .route-hero {
    background-attachment: fixed;
  }
}

/* Route hero entrance after the preloader curtain lifts */
.route-hero__inner h1 {
  animation: rise 1.25s var(--ease) .3s both;
}

.route-hero__lead {
  animation: rise 1.25s var(--ease) .45s both;
}

.route-hero__path {
  animation: rise 1.25s var(--ease) .58s both;
}

.route-hero__meta {
  animation: rise 1.25s var(--ease) .72s both;
}

.route-hero__actions {
  animation: rise 1.25s var(--ease) .86s both;
}

/* ---------- Interactive cards: 3D tilt ---------- */

.js-tilt {
  transform-style: preserve-3d;
  transition: transform .6s var(--ease), border-color .45s ease, box-shadow .6s ease;
  will-change: transform;
}

.js-tilt.is-tilting,
.route-card.is-tilting[data-reveal].is-inview,
.fleet-card.is-tilting[data-reveal].is-inview {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  transition: transform .16s ease-out, border-color .3s ease, box-shadow .4s ease;
  border-color: rgba(196, 145, 40, .5);
}

/* ---------- Magnetic buttons ---------- */

.js-magnetic {
  will-change: transform;
}

/* ---------- Button sheen ---------- */

.btn,
.form-card button,
.route-card__btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after,
.form-card button::after,
.route-card__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform .85s var(--ease);
}

.btn:hover::after,
.form-card button:hover::after,
.route-card__btn:hover::after {
  transform: translateX(130%) skewX(-12deg);
}

/* ---------- Route highlights hover polish ---------- */

.route-highlight__icon {
  transition: transform .6s var(--ease), color .4s ease, border-color .4s ease, background .4s ease;
}

.route-highlight:hover .route-highlight__icon {
  transform: rotate(8deg) scale(1.08);
  border-color: var(--gold-soft);
  color: var(--white);
  background: rgba(196, 145, 40, .16);
}

/* Route-stop number animation on hover */
.route-stop__num {
  display: inline-block;
  transition: transform .5s var(--ease), color .4s ease;
}

.route-stop:hover .route-stop__num {
  transform: translateX(6px);
  color: var(--gold);
}

/* Card image depth on fleet cards */
.fleet-card__media,
.route-card__media {
  transform: translateZ(0);
}

/* ---------- Request modal ---------- */

.has-modal {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 10, 22, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility 0s linear .45s;
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s ease, visibility 0s;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.modal__dialog {
  position: relative;
  width: min(100%, 540px);
  max-height: calc(100vh - 40px);
  overflow: auto;
  transform: translateY(28px) scale(.97);
  transition: transform .55s var(--ease);
}

.modal.is-open .modal__dialog {
  transform: none;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .4s var(--ease);
}

.modal__close:hover {
  background: rgba(196, 145, 40, .16);
  border-color: var(--gold-soft);
  color: var(--white);
  transform: rotate(90deg);
}

.modal .form-card--modal {
  margin: 0;
  background: var(--navy);
}

.modal .form-card--modal h2 {
  padding-right: 44px;
}