/* Sutrelia — motion layer. Loaded after style.css; all of it is driven by js/motion.js. */

/* ---------- Flight line under the header ---------- */
.flightline { position: absolute; left: 0; right: 0; bottom: -1px; height: 0; pointer-events: none; }
.flightline .trail {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: repeating-linear-gradient(90deg, var(--bronze) 0 7px, transparent 7px 13px);
}
.flightline .jet {
  position: absolute; left: 0; bottom: -9px; width: 20px; height: 20px; color: var(--bronze);
  will-change: transform;
}
.flightline .jet svg { width: 100%; height: 100%; display: block; }

/* ---------- Hero ---------- */
.hero { overflow: hidden; }
.hero img { will-change: transform; }
.hero .wrap { position: relative; z-index: 2; will-change: transform; }
.hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-jet {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; z-index: 1; pointer-events: none; color: #fff;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); will-change: transform;
}
.hero-jet .body { display: block; width: 100%; height: 100%; }
.hero-jet svg { width: 100%; height: 100%; display: block; }

/* Headline rises word by word, then the rest of the copy settles in. */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .w > span { display: inline-block; transform: translateY(110%); animation: word-rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 80ms + 200ms); }
.hero.is-live .eyebrow, .hero.is-live .crumbs, .hero.is-live .rule, .hero.is-live .lede, .hero.is-live .btn-row, .hero.is-live .hero-foot {
  animation: hero-fade .9s var(--ease) both; animation-delay: 900ms;
}
.hero.is-live .eyebrow, .hero.is-live .crumbs { animation-delay: 100ms; }
.hero.is-live .btn-row { animation-delay: 1100ms; }
.hero.is-live .hero-foot { animation-delay: 1300ms; }
@keyframes word-rise { to { transform: none; } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Destination cards ---------- */
.dest-card { transform-style: preserve-3d; }
.dest-card img { transition: transform 1.2s var(--ease), translate .25s ease-out; translate: var(--px, 0) var(--py, 0); }
.dest-card:hover img { transform: scale(1.1); }
.dest-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 55%);
  mix-blend-mode: soft-light;
}
.dest-card:hover::before { opacity: 1; }

/* ---------- Buttons ---------- */
.btn { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), translate .35s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .hero img, .hero .wrap { will-change: auto; }
}

/* The off-canvas mobile menu sits just outside the viewport; stop it widening the page. */
html, body { overflow-x: clip; }