html.intro-active { overflow: hidden; }
.session-intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; overflow: hidden;
  isolation: isolate; background: #f7f6f2;
}
.session-intro::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, #f7f6f2 18%, #f7f6f200 70%);
}
.intro-network { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: .22; }
.intro-route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-route-one { stroke: #236e4d; }
.intro-route-two { stroke: #b6a35f; }
.intro-route-three { stroke: #6d9390; }
.is-playing .intro-route { animation: intro-route-draw 2500ms cubic-bezier(.3,.1,.2,1) both; }
.is-playing .intro-route-two { animation-delay: 250ms; }
.is-playing .intro-route-three { animation-delay: 500ms; }
.intro-stations { opacity: 0; }
.is-playing .intro-stations { animation: intro-stations-in 900ms ease 1700ms both; }
.intro-lockup { width: min(640px, 84vw); text-align: center; }
.intro-lockup img { display: block; width: 100%; height: auto; }
.intro-caption {
  margin: 28px 0 0; color: #626a64;
  font: 500 clamp(10px, 1.3vw, 12px) "Transit Grotesk", Arial, sans-serif;
  letter-spacing: .2em; text-transform: uppercase; opacity: 0;
}
.is-playing .intro-caption { animation: intro-caption-in 900ms ease 2200ms both; }
.intro-greeting {
  margin: 14px 0 0;
  color: #236e4d;
  font: 400 clamp(18px, 3vw, 24px) "Transit Grotesk", Arial, sans-serif;
  opacity: 0;
}
.is-playing .intro-greeting { animation: intro-caption-in 800ms ease 2500ms both; }
/* Indeterminate decoration; no completion percentage or intro timing. */
.intro-loading {
  position: absolute;
  inset: auto 0 max(12px, env(safe-area-inset-bottom));
  width: 100%;
  height: 6px;
  overflow: hidden;
  background: #eceee7;
}
.intro-loading span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d7dfd3, #b6c6bb 55%, #e0e5d8);
  transform: translateX(-100%);
}
.is-playing .intro-loading span { animation: intro-loading-sweep 1400ms ease-in-out infinite; }
@keyframes intro-loading-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(225%); }
}
.intro-skip {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom)); right: max(28px, env(safe-area-inset-right));
  min-height: 44px; padding: 10px 16px; border: 1px solid #d4d8d0; border-radius: 24px;
  background: #f7f6f2; color: #626a64; font: 400 12px "Transit Grotesk", Arial, sans-serif; cursor: pointer;
}
.intro-skip span { margin-left: 12px; }
.intro-skip:hover { color: #236e4d; border-color: #236e4d; }
.intro-skip:focus-visible { outline: 2px solid #236e4d; outline-offset: 4px; }
.session-intro.is-ready { animation: intro-reveal 850ms ease-in-out both; }
.is-ready .intro-lockup { animation: intro-lockup-exit 850ms ease-in-out both; }
@keyframes intro-route-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-stations-in { to { opacity: 1; } }
@keyframes intro-caption-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes intro-lockup-exit { to { transform: translateY(-8px) scale(1.025); } }
@keyframes intro-reveal {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .session-intro, .session-intro * { animation: none !important; }
  .intro-caption, .intro-greeting { opacity: 1; }
  .intro-loading span { transform: translateX(60%); }
}