/* Motion layer. Everything here is skipped for visitors who ask for reduced motion.
   .js is set in <head> so hidden-until-revealed content never flashes, and stays visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  /* Home hero: the photo settles in slowly, the welcome rises, then the "this week" band */
  .hero-home .hero-img:not(.hero-slide) { animation: settle 18s cubic-bezier(.16, 1, .3, 1) both; }
  /* Hero photos take turns: the next one fades in over the last (3.5 s), then drifts slowly while it shows */
  .hero-home .hero-img { transition: opacity 3.5s cubic-bezier(.45, 0, .25, 1); }
  .hero-home .hero-img.drift { animation: drift 16s cubic-bezier(.33, 0, .25, 1) both; }
  .hero-home .hero-img.drift.alt { animation-name: drift-alt; }
  .hero-home .hero-text > * { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-home .hero-text > :nth-child(2) { animation-delay: .12s; }
  .hero-home .hero-text > :nth-child(3) { animation-delay: .24s; }
  .glance-grid { animation: rise .9s .4s cubic-bezier(.16, 1, .3, 1) both; }
  .page-hero img { animation: settle 14s cubic-bezier(.16, 1, .3, 1) both; }
  .page-hero h1, .page-hero p { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .page-hero p { animation-delay: .12s; }

  /* Trail blazes get "painted" on, bottom to top */
  .hero .blaze { animation: paint .7s .5s cubic-bezier(.16, 1, .3, 1) both; transform-origin: bottom; }
  .js .shop .blaze { transform: scaleY(0); transform-origin: bottom; transition: transform .7s .15s cubic-bezier(.16, 1, .3, 1); }
  .js .shop .blaze.in { transform: none; }
  .js .signs li::before { transform: scaleY(0); transform-origin: bottom; transition: transform .5s calc(var(--i, 0) * 90ms + .25s) cubic-bezier(.16, 1, .3, 1); }
  .js .signs li.in::before { transform: none; }

  /* Things slide up into place as they scroll into view, one after another */
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.in { opacity: 1; transform: none; }

  /* The history timeline's rail draws itself left to right */
  .js .timeline::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.65, 0, .35, 1); }
  .js .timeline.in::before { transform: none; }

  /* Trail signs sway a little, like they hang from a post */
  .signs li { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; }
  .signs li:hover { transform: rotate(-.8deg) translateY(-2px); box-shadow: inset 0 0 0 3px #4a3120, inset 0 0 0 5px #b89a73, 0 10px 20px rgba(23, 63, 53, .18); }

  /* Buttons press in */
  .btn:active, .biz-chips button:active, .tabs button:active { transform: scale(.98); }

  /* Event date tags flip in */
  .js .events .event-date, .js .event-cards .event-date { transform: rotateX(90deg); transition: transform .6s calc(var(--i, 0) * 90ms + .2s) cubic-bezier(.16, 1, .3, 1); }
  .js .in .event-date, .js .event.in .event-date { transform: none; }
}

@keyframes settle { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes drift { from { transform: scale(1.09) translate(1.2%, .6%); } to { transform: scale(1.02) translate(0, 0); } }
@keyframes drift-alt { from { transform: scale(1.02) translate(-.8%, 0); } to { transform: scale(1.09) translate(.6%, -.6%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes paint { from { transform: scaleY(0); } to { transform: scaleY(1); } }