html.js .station {
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
  transform: none;
}
html.js .station.is-active { transition: opacity 0.5s ease, transform 0.5s var(--ease-out), visibility 0s; }
html.js .station.is-leaving { opacity: 0; transform: scale(1.02); }
html.js .station.is-arriving { opacity: 0; transform: scale(0.99); }

.fx-words .w { display: inline-block; white-space: nowrap; }
.fx-words .wi {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
}
.fx-words.fx-in .wi {
  animation: word 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes word {
  to { opacity: 1; transform: none; }
}

html.js .station:not(.is-active) .fx-words .wi { opacity: 1; transform: none; }

html.no-js .fx-words .wi, html.no-fx .fx-words .wi { opacity: 1; transform: none; }

html.js:not(.is-entered) .hero .overline,
html.js:not(.is-entered) .hero .lede,
html.js:not(.is-entered) .hero .actions,
html.js:not(.is-entered) .hero-foot {
  opacity: 0;
  transform: translateY(14px);
}
.hero .overline, .hero .lede, .hero .actions, .hero-foot {
  transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
}
html.is-entered .hero .overline { transition-delay: 0.05s; }
html.is-entered .hero .lede { transition-delay: 0.55s; }
html.is-entered .hero .actions { transition-delay: 0.7s; }
html.is-entered .hero-foot { transition-delay: 0.9s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
html.js .station.is-active:not(#top) .deck,
html.js .station.is-active:not(#top) .svc,
html.js .station.is-active:not(#top) .steps,
html.js .station.is-active:not(#top) .stats,
html.js .station.is-active:not(#top) .cred-grid { animation: rise 0.6s var(--ease-out) 0.4s both; }

.panel.is-captured { animation: capture 0.6s ease; }
@keyframes capture {
  0% { box-shadow: 0 0 0 0 rgb(255 241 214 / 0); }
  30% { box-shadow: 0 0 0 4px rgb(255 241 214 / 0.2), 0 0 50px rgb(255 78 26 / 0.3); }
  100% { box-shadow: 0 0 0 0 rgb(255 241 214 / 0); }
}

@media (prefers-reduced-motion: reduce) {
  html.js .station, html.js .station.is-active { transition: opacity 0.2s ease, visibility 0s; transform: none; }
  html.js .station.is-leaving, html.js .station.is-arriving { transform: none; }
  .fx-words .wi, .fx-words.fx-in .wi { animation: none; opacity: 1; transform: none; }
  html.js:not(.is-entered) .hero .overline,
  html.js:not(.is-entered) .hero .lede,
  html.js:not(.is-entered) .hero .actions,
  html.js:not(.is-entered) .hero-foot { opacity: 1; transform: none; }
  .hero .overline, .hero .lede, .hero .actions, .hero-foot { transition: none; }
  html.js .station.is-active:not(#top) .deck,
  html.js .station.is-active:not(#top) .svc,
  html.js .station.is-active:not(#top) .steps,
  html.js .station.is-active:not(#top) .stats,
  html.js .station.is-active:not(#top) .cred-grid { animation: none; }
  .svc-panel, .step-panel, .steps-list::after { transition: none; }
  .flash.is-on { animation: none; }
  .btn, .svc-tab, .step { transition: none; }
}
