.vsb-bg-svg__fallback,
.vsb-bg-svg__reveal {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.vsb-bg-svg__fallback {
  object-fit: cover;
  opacity: 0;
  z-index: 0;
}

.vsb-bg-svg__reveal {
  opacity: 0;
  z-index: 1;
  visibility: hidden;
}

.vsb-bg-svg__mask-line {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}

.vsb-bg-svg__container.is-revealing .vsb-bg-svg__fallback {
  opacity: 0;
  visibility: visible;
}

.vsb-bg-svg__container.is-revealing .vsb-bg-svg__reveal {
  opacity: 1;
  visibility: visible;
}

.vsb-bg-svg__container.is-revealing .vsb-bg-svg__mask-line {
  animation: vsb-bg-svg-reveal 1000ms linear forwards;
}

.vsb-bg-svg__container.is-complete .vsb-bg-svg__fallback {
  opacity: 1;
  transition: opacity 200ms ease-out;
  visibility: visible;
  z-index: 2;
}

.vsb-bg-svg__container.is-complete .vsb-bg-svg__reveal {
  visibility: visible;
}

.vsb-bg-svg__container.is-complete.is-settled .vsb-bg-svg__reveal {
  visibility: hidden;
}

@keyframes vsb-bg-svg-reveal {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vsb-bg-svg__fallback {
    opacity: 1;
    visibility: visible;
  }

  .vsb-bg-svg__container.is-complete .vsb-bg-svg__fallback {
    transition: none;
  }

  .vsb-bg-svg__container .vsb-bg-svg__mask-line {
    animation: none;
  }
}

.editor-styles-wrapper .vsb-bg-svg__fallback {
  opacity: 1;
  transition: none;
  visibility: visible;
}

.editor-styles-wrapper .vsb-bg-svg__reveal {
  opacity: 0;
  visibility: hidden;
}

.editor-styles-wrapper .vsb-bg-svg__mask-line {
  animation: none;
}