/* Motion is additive only. A tiny inline script in <head> puts `js` on <html>,
   so without JavaScript nothing is ever hidden: no class, no opacity: 0. */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}

.js .reveal.is-in {
  animation: rise-in 0.7s var(--ease) forwards;
}

@keyframes rise-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* One orchestrated hero load, fired on DOM ready rather than on scroll. */
.hero-eyebrow {
  animation-delay: 0s;
}

.hero-head {
  animation-delay: 0.14s;
}

.hero-sub {
  animation-delay: 0.28s;
}

.hero-ctas {
  animation-delay: 0.42s;
}

.note-card {
  animation-delay: 0.56s;
}

/* The plane flies the dashed route once, then rests at the right end, which is
   also where it sits with JavaScript off. */
.flight-path.is-in .waypoint {
  animation: fly 1.9s cubic-bezier(0.45, 0, 0.3, 1) forwards;
}

@keyframes fly {
  from {
    left: 6%;
  }

  to {
    left: 94%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .reveal.is-in {
    animation: none;
  }

  .flight-path.is-in .waypoint {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  .slider-viewport {
    scroll-behavior: auto;
  }

  .btn,
  .location-card,
  .slider-btn,
  .slider-dot {
    transition: none;
  }
}