/* Shared by the first HTML frame and the Vue splash to avoid a logo-size jump. */
html[data-app-target="commuter"] {
  --splash-surface: #f8fbff;
  --splash-ink: #17212b;
  --splash-muted: #637381;
  --splash-grid: rgba(37, 99, 235, 0.025);
  color-scheme: light;
  background-color: var(--splash-surface);
}
html[data-app-target="commuter"].commuter-dark {
  --splash-surface: #08111f;
  --splash-ink: #edf3f8;
  --splash-muted: #a3b3c4;
  --splash-grid: rgba(153, 180, 211, 0.035);
  color-scheme: dark;
}

.apl-commuter-content { display: none; }
html[data-app-target="commuter"] #app-loader > :not(.apl-commuter-content) { display: none; }
html[data-app-target="commuter"] .apl-commuter-content { display: contents; }
html[data-app-target="commuter"] body #app-loader { z-index: 21000; }

.natsgo-splash,
html[data-app-target="commuter"] #app-loader {
  --natsgo-line: var(--splash-ink, #17212b);
  --natsgo-blue: #2563eb;
  --natsgo-green: #19a86b;
  --natsgo-grid: var(--splash-grid);


  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--natsgo-line);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--splash-surface, #f8fbff);

}

.natsgo-splash::before,
html[data-app-target="commuter"] #app-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .62;
  background-image:
    linear-gradient(var(--natsgo-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--natsgo-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, black 0 42%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 48%, black 0 42%, transparent 78%);
  animation: natsgo-grid-float 1900ms cubic-bezier(.16, 1, .3, 1) var(--splash-phase, 0ms) both;
}

.natsgo-splash__routes {
  position: absolute;
  width: min(110vw, 480px);
  height: min(112vh, 820px);
  opacity: .82;
  transform: translateY(16px) scale(1.02);
  will-change: transform;
  animation: natsgo-routes-settle 1900ms cubic-bezier(.16, 1, .3, 1) calc(120ms + var(--splash-phase, 0ms)) both;
}

.natsgo-splash__bg-route {
  fill: none;
  stroke: var(--splash-ink);
  opacity: .07;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 920;
  stroke-dashoffset: 920;
  animation: natsgo-draw-bg-route 1300ms cubic-bezier(.5, 0, .2, 1) var(--splash-phase, 0ms) forwards;
}

.natsgo-splash__bg-route--one { animation-delay: calc(180ms + var(--splash-phase, 0ms)); }
.natsgo-splash__bg-route--two { animation-delay: calc(330ms + var(--splash-phase, 0ms)); }
.natsgo-splash__bg-route--three { animation-delay: calc(460ms + var(--splash-phase, 0ms)); }

.natsgo-splash__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  opacity: 0;
  transform: translateY(18px) scale(.95);
  will-change: opacity, transform;
  animation: natsgo-stage-arrive 760ms cubic-bezier(.16, 1, .3, 1) calc(160ms + var(--splash-phase, 0ms)) forwards;
}

.natsgo-splash__mark {
  position: relative;
  z-index: 2;
  width: min(clamp(134px, 34vw, 172px), 54svh);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  transform: translateY(-4px);
  will-change: transform;
}

.natsgo-splash__track--main {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: natsgo-draw-mark 1020ms cubic-bezier(.55, 0, .18, 1) calc(560ms + var(--splash-phase, 0ms)) forwards;
}

.natsgo-splash__endpoint {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: natsgo-endpoint-in 360ms cubic-bezier(.16, 1, .3, 1) var(--splash-phase, 0ms) forwards;
}

.natsgo-splash__endpoint--green {
  fill: var(--natsgo-green);
  animation-delay: calc(300ms + var(--splash-phase, 0ms));
}

.natsgo-splash__endpoint--blue {
  fill: var(--natsgo-blue);
  animation:
    natsgo-endpoint-in 320ms cubic-bezier(.16, 1, .3, 1) calc(1540ms + var(--splash-phase, 0ms)) forwards,
    natsgo-destination-blink 720ms ease-out calc(1840ms + var(--splash-phase, 0ms)) forwards;
}

.natsgo-splash__route-dot {
  fill: var(--natsgo-green);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: natsgo-route-dot 1240ms cubic-bezier(.5, 0, .2, 1) calc(360ms + var(--splash-phase, 0ms)) forwards;
}

.natsgo-splash__destination-ring {
  fill: none;
  stroke: var(--natsgo-blue);
  stroke-width: 9;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: natsgo-destination-ring 680ms ease-out calc(1840ms + var(--splash-phase, 0ms)) forwards;
}



.natsgo-splash__client {
  position: fixed;
  left: 50%;
  bottom: max(74px, calc(env(safe-area-inset-bottom, 0px) + 58px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  opacity: 0;
  transform: translate(-50%, 10px);
  animation: natsgo-client-in 560ms cubic-bezier(.16, 1, .3, 1) calc(1980ms + var(--splash-phase, 0ms)) forwards;
}

.natsgo-splash__client::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 48px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--natsgo-green), var(--natsgo-blue));
  opacity: .82;
  transform: translateX(-50%);
}

.natsgo-splash__client-label {
  color: var(--splash-muted);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.natsgo-splash__client-divider {
  width: 1px;
  height: 22px;
  border-radius: 99px;
  background: rgba(100, 116, 139, .26);
}

.natsgo-splash__client-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--splash-ink);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.natsgo-splash__client-brand img {
  width: 31px;
  height: 31px;
  border-radius: 0;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
  object-fit: contain;
  display: block;
}

.natsgo-splash-reveal-leave-active { transition: opacity 260ms ease; }
.natsgo-splash-reveal-leave-to { opacity: 0; }

@keyframes natsgo-grid-float {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: .62; transform: translateY(0); }
}


@keyframes natsgo-routes-settle {
  to { transform: translateY(0) scale(1); }
}

@keyframes natsgo-draw-bg-route {
  to { stroke-dashoffset: 0; }
}

@keyframes natsgo-stage-arrive {
  72% { opacity: 1; transform: translateY(-2px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes natsgo-draw-mark {
  to { stroke-dashoffset: 0; }
}

@keyframes natsgo-endpoint-in {
  0% { opacity: 0; transform: scale(.86); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes natsgo-route-dot {
  0% { opacity: 0; transform: translate(0, 0) scale(.74); }
  14% { opacity: 1; transform: translate(0, 0) scale(1); }
  38% { opacity: 1; transform: translate(0, -200px) scale(.96); }
  70% { opacity: 1; transform: translate(212px, 200px) scale(.96); }
  92% { opacity: 1; transform: translate(212px, -200px) scale(.88); }
  100% { opacity: 0; transform: translate(212px, -200px) scale(.6); }
}

@keyframes natsgo-destination-blink {
  0% { filter: brightness(1); transform: scale(1); }
  34% { filter: brightness(1.18); transform: scale(1.08); }
  68% { filter: brightness(1); transform: scale(1); }
  100% { filter: brightness(1.08); transform: scale(1.02); }
}

@keyframes natsgo-destination-ring {
  0% { opacity: 0; transform: scale(.76); }
  38% { opacity: .22; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.32); }
}

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

@keyframes natsgo-client-in {
  to { opacity: 1; transform: translate(-50%, 0); }
}



@media (prefers-reduced-motion: reduce) {
  .natsgo-splash::before,
  .natsgo-splash__routes,
  .natsgo-splash__bg-route,
  .natsgo-splash__stage,
  .natsgo-splash__track--main,
  .natsgo-splash__endpoint,
  .natsgo-splash__route-dot,
  .natsgo-splash__destination-ring,
  .natsgo-splash__client {
    animation-duration: 1ms;
    animation-delay: calc(0ms + var(--splash-phase, 0ms));
  }

  .natsgo-splash-reveal-leave-active,
  .natsgo-splash-reveal-leave-active .natsgo-splash__stage {
    transition: opacity 1ms ease;
  }

  .natsgo-splash-reveal-leave-to {
    clip-path: inset(0);
  }
}

.natsgo-splash--waiting *,
.natsgo-splash--waiting::before { animation-play-state: paused !important; }
@media (max-height: 500px) {
  .natsgo-splash__client { bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 14px)); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-app-target="commuter"] #app-loader::before { animation-duration: 1ms; animation-delay: 0ms; }
}