/**
 * Trinamiek reislijn
 * De route ligt achter de content; alleen de pijl aan het begin ligt ervoor.
 */

.has-reislijn .site-inner {
  background-color: transparent !important;
  isolation: isolate;
  position: relative;
}

.has-reislijn .entry,
.has-reislijn aside,
.has-reislijn .sidebar {
  background-color: transparent !important;
}

.reislijn {
  bottom: 80px;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 150px;
  z-index: 0;
}

.reislijn__route {
  display: block;
  filter: saturate(1.4);
  height: 100%;
  left: 50%;
  max-width: none;
  object-fit: fill;
  opacity: 0.3;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  visibility: hidden;
  width: clamp(76px, 7.5vw, 108px);
}

.reislijn__route.is-svg-ready {
  visibility: visible;
}

.reislijn__route svg {
  display: block;
  height: 100%;
  overflow: visible;
  width: 100%;
}

.reislijn__route path[data-reislijn-path] {
  transition: none;
}

.reislijn__route.is-svg-ready path[data-reislijn-path] {
  transition: stroke-dashoffset 700ms cubic-bezier(0.22, 0.7, 0.25, 1);
}

.reislijn__route.is-svg-ready.is-starting path[data-reislijn-path] {
  transition-duration: 1250ms;
  transition-timing-function: cubic-bezier(0.25, 0.75, 0.25, 1);
}

/* Houd de echte pagina-inhoud voor de afgezwakte lijn. */
.has-reislijn .site-inner > :not(.reislijn) {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .reislijn__route {
    opacity: 0.24;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reislijn__route path[data-reislijn-path] {
    transition: none;
  }
}