/* Motion system pre-states (pairs with js/motion.js).
   Loaded only on pages that load the GSAP motion stack (home for now).

   Elements opting into scroll reveals declare data-motion (or a
   data-motion-stagger container). They are hidden ONLY when BOTH:
     1. html.has-motion is present (set inline in the page head, and only
        when prefers-reduced-motion is NOT set), and
     2. the user has not asked for reduced motion (belt and braces).
   No-JS, reduced-motion, and non-motion pages always see content. */

@media (prefers-reduced-motion: no-preference) {
  .has-motion [data-motion],
  .has-motion [data-motion-stagger] > *,
  .has-motion .pull-quote {
    opacity: 0;
  }
}

/* SplitText line masks for the pull-quote reveal */
.tg-quote-line {
  will-change: transform;
}

/* Trip cards that tilt need a 3D stage and a depth shadow on hover */
.tg-tilt {
  transform-style: preserve-3d;
  transition: box-shadow 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.trip-card-grid {
  perspective: 1100px;
}

.tg-tilt:hover {
  box-shadow: 0 24px 48px -18px rgba(14, 61, 59, 0.35);
}

/* The hero backdrop drift ("Ken Burns"). CSS-only so it runs without JS
   and pauses itself under reduced motion. Slow enough to be felt, not
   watched: one direction over 44s, then back.

   Deliberately animates the independent `scale` property, NOT
   `transform`: the GSAP scroll parallax writes to `transform`
   (translate), and the two channels compose instead of fighting. The
   1.06 floor matches the static scale in home.css so the parallax
   shift never exposes an image edge. */
.hero-backdrop img {
  animation: tg-hero-drift 44s ease-in-out infinite alternate;
  transform-origin: 50% 42%;
}

@keyframes tg-hero-drift {
  from {
    scale: 1.06;
  }
  to {
    scale: 1.14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-backdrop img {
    animation: none;
  }
}