.vector-decoration {
  --vector-stroke: #f4f3f4;
  --vector-path-length: 1;
  --vector-segment-delay: 0s;
  --vector-segment-duration: 18s;
  display: block;
  height: auto;
  pointer-events: none;
  transform-origin: center;
  width: 100%;
}

img[data-vector-decoration],
.vector-decoration:not(.is-ready) {
  visibility: hidden;
}

img[data-vector-decoration][src*="profile-vector-new-2"]:not([data-vector-variant="profile-2-hero"]) {
  filter: brightness(0) invert(1);
  opacity: .48;
  visibility: visible;
}

.hero-deco .v2.vector-decoration {
  opacity: .62;
}

.vector-decoration__svg {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

.vector-decoration__path {
  animation-name: none;
  animation-duration: var(--vector-segment-duration);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  fill: none;
  stroke: var(--vector-stroke);
  stroke-dasharray: 0 var(--vector-path-length);
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.vector-decoration.is-ready .vector-decoration__path {
  animation-play-state: running;
}

.vector-decoration__path--forward {
  animation-delay: var(--vector-segment-delay);
  stroke-dasharray: 0 var(--vector-path-length);
  stroke-dashoffset: 0;
}

.vector-decoration__path--reverse {
  animation-delay: var(--vector-segment-delay);
  stroke-dasharray: 0 var(--vector-path-length);
  stroke-dashoffset: var(--vector-path-length);
}

.vector-decoration__path--offset {
  animation-delay: var(--vector-segment-delay);
  stroke-dasharray: var(--vector-path-length) var(--vector-path-length);
  stroke-dashoffset: var(--vector-path-length);
}

.vector-decoration.is-ready .vector-decoration__path--forward {
  animation-name: vectorPathRevealForward;
}

.vector-decoration.is-ready .vector-decoration__path--reverse {
  animation-name: vectorPathRevealReverse;
}

.vector-decoration.is-ready .vector-decoration__path--offset {
  animation-name: vectorPathRevealOffset;
}

.vector-decoration__path--trim-end {
  stroke-dasharray: calc(var(--vector-path-length) * .995) var(--vector-path-length);
}

@keyframes vectorPathRevealForward {
  from {
    stroke-dasharray: 0 var(--vector-path-length);
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: var(--vector-path-length) var(--vector-path-length);
    stroke-dashoffset: 0;
  }
}

@keyframes vectorPathRevealReverse {
  from {
    stroke-dasharray: 0 var(--vector-path-length);
    stroke-dashoffset: var(--vector-path-length);
  }
  to {
    stroke-dasharray: var(--vector-path-length) var(--vector-path-length);
    stroke-dashoffset: 0;
  }
}

@keyframes vectorPathRevealOffset {
  from {
    stroke-dashoffset: var(--vector-path-length);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vector-decoration,
  .vector-decoration__path {
    animation: none;
  }

  .vector-decoration__path {
    stroke-dasharray: var(--vector-path-length) var(--vector-path-length);
    stroke-dashoffset: 0;
  }
}