.vector-route-transition {
  position: fixed;
  z-index: 999;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  color: var(--v-text);
}

.vector-route-lanes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6,1fr);
}

.vector-route-lane {
  position: relative;
  background: #080b0a;
  border-right: 1px solid #26312c;
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}

.vector-route-lane:nth-child(even) {
  background: #0d1210;
  transform-origin: top;
}

.vector-route-grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    linear-gradient(rgba(203,255,61,.1) 1px,transparent 1px),
    linear-gradient(90deg,rgba(203,255,61,.1) 1px,transparent 1px);
  background-size: 6.25vw 6.25vw;
}

.vector-route-axis {
  position: absolute;
  inset: 24px;
}

.vector-route-axis span {
  position: absolute;
  background: var(--v-acid);
  box-shadow: 0 0 18px rgba(203,255,61,.35);
  transform: scale(0);
}

.vector-route-axis span:first-child {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  transform-origin: left;
}

.vector-route-axis span:last-child {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform-origin: top;
}

.vector-route-nodes i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--v-acid);
  background: #080b0a;
  opacity: 0;
}

.vector-route-nodes i:nth-child(1) { top: 18%; left: 17%; }
.vector-route-nodes i:nth-child(2) { top: 27%; right: 19%; }
.vector-route-nodes i:nth-child(3) { right: 27%; bottom: 18%; }
.vector-route-nodes i:nth-child(4) { bottom: 24%; left: 22%; }

.vector-route-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(110px,13vw,190px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 10px;
  border: 1px solid var(--v-acid);
  border-radius: 50%;
  opacity: 0;
  background: #080b0a;
  color: var(--v-acid);
  text-align: center;
  transform: translate(-50%,-50%) rotate(-35deg) scale(.55);
}

.vector-route-core span {
  font: 500 clamp(40px,5vw,72px)/.8 var(--v-sans);
  letter-spacing: -.1em;
}

.vector-route-core small,
.vector-route-copy small {
  font: 7px var(--v-mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.vector-route-copy {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 0;
  overflow: hidden;
}

.vector-route-copy small { opacity: 0; color: var(--v-muted); }
.vector-route-copy strong {
  opacity: 0;
  color: var(--v-text);
  font: 500 clamp(36px,6vw,88px)/.8 var(--v-sans);
  letter-spacing: -.07em;
  transform: translateY(115%);
}

.vector-route-leaving .vector-route-transition,
.vector-route-arriving .vector-route-transition { visibility: visible; }

.vector-route-leaving .vector-route-lane {
  transform: scaleY(1);
  transition: transform .58s var(--v-ease);
}

.vector-route-leaving .vector-route-lane:nth-child(2) { transition-delay: .05s; }
.vector-route-leaving .vector-route-lane:nth-child(3) { transition-delay: .1s; }
.vector-route-leaving .vector-route-lane:nth-child(4) { transition-delay: .15s; }
.vector-route-leaving .vector-route-lane:nth-child(5) { transition-delay: .2s; }
.vector-route-leaving .vector-route-lane:nth-child(6) { transition-delay: .25s; }
.vector-route-leaving .vector-route-grid { opacity: 1; transition: opacity .3s ease .38s; }
.vector-route-leaving .vector-route-axis span { transform: scale(1); transition: transform .5s var(--v-ease) .4s; }
.vector-route-leaving .vector-route-nodes i { opacity: 1; animation: vector-route-pulse .8s ease .44s infinite alternate; }
.vector-route-leaving .vector-route-nodes i:nth-child(2) { animation-delay: .54s; }
.vector-route-leaving .vector-route-nodes i:nth-child(3) { animation-delay: .64s; }
.vector-route-leaving .vector-route-nodes i:nth-child(4) { animation-delay: .74s; }
.vector-route-leaving .vector-route-core { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); transition: opacity .25s ease .44s,transform .7s var(--v-ease) .4s; }
.vector-route-leaving .vector-route-copy small { opacity: 1; transition: opacity .25s ease .55s; }
.vector-route-leaving .vector-route-copy strong { opacity: 1; transform: none; transition: opacity .25s ease .5s,transform .6s var(--v-ease) .48s; }

.vector-route-arriving .vector-route-lane { transform: scaleY(1); }
.vector-route-arriving .vector-route-grid { opacity: 1; }
.vector-route-arriving .vector-route-axis span { transform: scale(1); }
.vector-route-arriving .vector-route-nodes i { opacity: 1; }
.vector-route-arriving .vector-route-core { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); }
.vector-route-arriving .vector-route-copy small { opacity: 1; }
.vector-route-arriving .vector-route-copy strong { opacity: 1; transform: none; }

.vector-route-arriving.vector-route-arrived .vector-route-lane {
  transform: translateY(-105%) scaleY(1);
  transition: transform .72s var(--v-ease);
}

.vector-route-arriving.vector-route-arrived .vector-route-lane:nth-child(even) { transform: translateY(105%) scaleY(1); }
.vector-route-arriving.vector-route-arrived .vector-route-lane:nth-child(2) { transition-delay: .04s; }
.vector-route-arriving.vector-route-arrived .vector-route-lane:nth-child(3) { transition-delay: .08s; }
.vector-route-arriving.vector-route-arrived .vector-route-lane:nth-child(4) { transition-delay: .12s; }
.vector-route-arriving.vector-route-arrived .vector-route-lane:nth-child(5) { transition-delay: .16s; }
.vector-route-arriving.vector-route-arrived .vector-route-lane:nth-child(6) { transition-delay: .2s; }
.vector-route-arriving.vector-route-arrived .vector-route-grid,
.vector-route-arriving.vector-route-arrived .vector-route-axis,
.vector-route-arriving.vector-route-arrived .vector-route-nodes,
.vector-route-arriving.vector-route-arrived .vector-route-core,
.vector-route-arriving.vector-route-arrived .vector-route-copy { opacity: 0; transition: opacity .24s ease .12s; }

@keyframes vector-route-pulse {
  from { transform: scale(.7); box-shadow: 0 0 0 rgba(203,255,61,0); }
  to { transform: scale(1.45); box-shadow: 0 0 18px rgba(203,255,61,.6); }
}

@media (max-width: 620px) {
  .vector-route-lanes { grid-template-columns: repeat(4,1fr); }
  .vector-route-lane:nth-child(n+5) { display: none; }
  .vector-route-copy { right: 16px; bottom: 18px; left: 16px; }
  .vector-route-copy small { display: none; }
  .vector-route-copy strong { margin-left: auto; font-size: 11vw; }
}

@media (prefers-reduced-motion: reduce) {
  .vector-route-transition { display: none !important; }
}