.js .js-loading,
.js .js-mv-copy,
.js .js-loadingBtn {
  opacity: 0;
  transform: translateY(1em);
  transition: opacity var(--v-dur-reveal) ease, transform var(--v-dur-reveal) ease;
}

.js .vm-topMv__bg.js-loading {
  transform: none;
}

.js .js-loading.is-inview,
.js .js-mv-copy.is-inview,
.js .js-loadingBtn.is-inview {
  opacity: 1;
  transform: none;
}

.js .js-fade,
.js .js-reveal-alt,
.js .vm-motion-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--v-dur-reveal) ease, transform var(--v-dur-reveal) ease;
}

.js .js-fade.is-inview,
.js .js-reveal-alt.is-inview,
.js .vm-motion-reveal.is-inview {
  opacity: 1;
  transform: none;
}

.vm-roll,
.vm-inkwipe {
  display: inline-block;
}

.js .vm-roll {
  contain: paint;
  vertical-align: top;
}

.js .vm-roll__visual {
  display: inline-block;
}

.js .vm-roll__mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.js .vm-roll__char {
  display: inline-block;
  line-height: inherit;
  transform: translateY(110%);
  transition: transform var(--v-dur-roll) var(--v-ease);
  transition-delay: calc(var(--vm-roll-index, 0) * var(--vm-roll-stagger));
  vertical-align: top;
}

.js .vm-roll__char::before {
  content: attr(data-char);
}

.js .vm-roll.is-inview .vm-roll__char {
  transform: translateY(0);
}

.vm-inkwipe {
  --vm-inkwipe-rest: var(--v-color-line);
  --vm-inkwipe-fill: var(--v-color-ink);
  color: inherit;
}

.js .vm-inkwipe {
  background-image:
    linear-gradient(var(--vm-inkwipe-fill), var(--vm-inkwipe-fill)),
    linear-gradient(var(--vm-inkwipe-rest), var(--vm-inkwipe-rest));
  background-position: left center, left center;
  background-repeat: no-repeat;
  background-size: 0% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-size 1s var(--v-ease);
}

.js .vm-inkwipe.is-inview {
  background-size: 100% 100%, 100% 100%;
}

.v-cost-chart__bar {
  background: transparent !important;
  overflow: hidden;
  position: relative;
}

.v-cost-chart__bar::before {
  content: "";
  inset: 0;
  position: absolute;
  transform-origin: left center;
  z-index: 0;
}

.v-cost-chart__bar.--separate::before {
  background: #9a9a9a;
}

.v-cost-chart__bar.--vamos::before {
  background: var(--v-gradient-cta);
}

.v-cost-chart__bar span {
  position: relative;
  z-index: 1;
}

.js .v-cost-chart__bar::before {
  transform: scaleX(0);
  transition: transform 0.8s var(--v-ease);
  transition-delay: var(--vm-bar-delay, 0s);
}

.js .v-cost-chart__group.is-inview .v-cost-chart__bar::before,
.js .v-cost-chart.is-inview .v-cost-chart__bar::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .js .js-loading,
  .js .js-mv-copy,
  .js .js-loadingBtn,
  .js .js-fade,
  .js .js-reveal-alt,
  .js .vm-motion-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .vm-roll__char {
    transform: none;
    transition: none;
  }

  .js .vm-inkwipe {
    background-image: none;
    color: inherit;
    transition: none;
  }

  .js .v-cost-chart__bar::before {
    transform: none;
    transition: none;
  }
}
