/* Motion layer, shared by every page. Everything here is progressive:
   with no JavaScript, or with reduced motion turned on, the page simply shows at rest. */

/* Smooth cross-fade between pages (supporting browsers; others navigate normally) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .35s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vt-in .55s cubic-bezier(.2,.7,.1,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
  /* Titles: each word rises out of its own line mask */
  .motion .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
  .motion .w > span { display: inline-block; transform: translateY(105%); animation: w-up 1s cubic-bezier(.2,.75,.1,1) forwards; animation-delay: calc(.12s + var(--i, 0) * .07s); }
  @keyframes w-up { to { transform: none; } }

  /* Scroll reveals: fade and rise once, staggered across rows */
  .motion .mo { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.1,1), transform 1.1s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0s); }
  .motion .mo.in { opacity: 1; transform: none; }

  /* Images wipe up into view and settle from a slight zoom */
  .motion .mo-img { clip-path: inset(14% 0 0 0); transition: clip-path 1.2s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0s); }
  .motion .mo-img img { transform: scale(1.08); transition: transform 1.6s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0s); }
  .motion .mo-img.in { clip-path: inset(0 0 0 0); }
  .motion .mo-img.in img { transform: none; }
  /* keep the existing hover zoom on tiles working after the reveal */
  .motion .card.in:hover .mo-img img, .motion .rcard.in:hover .mo-img img, .motion .pcard:hover .mo-img img { transform: scale(1.045); }

  /* Kayak page: the progression line draws across and the stages step in */
  .motion .stages::before { transform: scaleX(0); animation: line-draw 1.6s cubic-bezier(.6,.05,.2,1) .35s forwards; }
  @keyframes line-draw { to { transform: none; } }
  .motion .stage { opacity: 0; transform: translateY(18px); animation: stage-in .9s cubic-bezier(.2,.7,.1,1) forwards; }
  .motion .stage:nth-child(1) { animation-delay: .25s } .motion .stage:nth-child(2) { animation-delay: .4s }
  .motion .stage:nth-child(3) { animation-delay: .55s } .motion .stage:nth-child(4) { animation-delay: .7s }
  .motion .stage:nth-child(5) { animation-delay: .85s }
  @keyframes stage-in { to { opacity: 1; transform: none; } }

  /* Header tucks away while scrolling down, returns when scrolling up */
  .motion header.top { transition: transform .45s cubic-bezier(.2,.7,.1,1), box-shadow .3s; }
  .motion header.top.tuck { transform: translateY(-100%); }

  /* Underline links draw in from the left */
  .motion .see, .motion .xp-link, .motion .xp-more, .motion .sk-all { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.2,.7,.1,1), border-color .2s; }
  .motion .see:hover, .motion .xp-link:hover, .motion .xp-more:hover, .motion .sk-all:hover { background-size: 100% 1px; }
}