/* One document-level route replaces the disconnected per-section pseudo-elements. */
body[data-page="home"] {
  position: relative;
}

body[data-page="home"] main > [data-mnemonic]::before,
body[data-page="home"] main > [data-mnemonic]::after {
  display: none !important;
}

.home-route-overlay {
  position: absolute;
  z-index: 6;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.home-route-overlay__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.home-route-overlay__base,
.home-route-overlay__active {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.home-route-overlay__base {
  stroke: rgba(117, 169, 183, 0.28);
  stroke-width: 2;
}

.home-route-overlay__active {
  stroke: url(#home-route-gradient);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 5px rgba(117, 169, 183, 0.24));
  will-change: stroke-dashoffset;
}

.home-route-overlay__node {
  color: #75a9b7;
  opacity: 0.28;
  transition: opacity 360ms ease;
}

.home-route-overlay__node line {
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.home-route-overlay__node-ring,
.home-route-overlay__node-core,
.home-route-overlay__terminal-ring,
.home-route-overlay__terminal-core {
  vector-effect: non-scaling-stroke;
}

.home-route-overlay__node-ring,
.home-route-overlay__terminal-ring {
  fill: #10171b;
  stroke: currentColor;
  stroke-width: 2;
}

.home-route-overlay__node-core,
.home-route-overlay__terminal-core {
  fill: currentColor;
}

.home-route-overlay__node.is-reached {
  opacity: 0.92;
}

.home-route-overlay__node.is-reached .home-route-overlay__node-ring {
  filter: drop-shadow(0 0 5px rgba(117, 169, 183, 0.35));
}

.home-route-overlay__terminal {
  color: #bd965c;
  opacity: var(--home-route-terminal-opacity, 0.28);
}

.home-route-overlay__terminal line {
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 620px) {
  .home-route-overlay__base {
    stroke: rgba(117, 169, 183, 0.23);
  }

  .home-route-overlay__node line {
    x1: -22px;
    x2: 22px;
  }

  .home-route-overlay__node {
    opacity: 0.22;
  }

  .home-route-overlay__node.is-reached {
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-route-overlay__active {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .home-route-overlay__node {
    opacity: 0.82;
    transition: none;
  }
}