.vx-cta-roll {
  --vx-roll-ease: cubic-bezier(.22, 1, .36, 1);
  --vx-roll-time: .48s;
  --vx-arrow-time: .42s;
  --vx-roll-shift: 115%;
}

.vx-cta-roll__mask {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
}
.vx-cta-roll__line {
  display: block;
  white-space: nowrap;
  transform: translateY(0);
  transition: transform var(--vx-roll-time) var(--vx-roll-ease);
}
.vx-cta-roll__line.is-copy {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  transform: translateY(var(--vx-roll-shift));
}

.vx-cta-roll:focus-visible .vx-cta-roll__line,
.vx-cta-roll.is-vx-active .vx-cta-roll__line { transform: translateY(calc(-1 * var(--vx-roll-shift))); }
.vx-cta-roll:focus-visible .vx-cta-roll__line.is-copy,
.vx-cta-roll.is-vx-active .vx-cta-roll__line.is-copy { transform: translateY(0); }

@media (hover: hover) {
  .vx-cta-roll:hover .vx-cta-roll__line { transform: translateY(calc(-1 * var(--vx-roll-shift))); }
  .vx-cta-roll:hover .vx-cta-roll__line.is-copy { transform: translateY(0); }
}

.vx-cta-roll__arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transition: transform var(--vx-arrow-time) var(--vx-roll-ease),
              color var(--vx-arrow-time) var(--vx-roll-ease);
}

.vx-cta-roll--on-dark .vx-cta-roll__arrow { color: #DDFB51 }
.vx-cta-roll--on-primary .vx-cta-roll__arrow { color: #050505 }

.vx-cta-roll:focus-visible .vx-cta-roll__arrow,
.vx-cta-roll.is-vx-active .vx-cta-roll__arrow { transform: translate3d(4px, -4px, 0) }
@media (hover: hover) {
  .vx-cta-roll:hover .vx-cta-roll__arrow { transform: translate3d(4px, -4px, 0) }
}

.vx-cta-roll { min-height: 44px }
.vx-cta-roll:focus-visible { outline: 2px solid #DDFB51; outline-offset: 4px }
.vx-cta-roll--on-primary:focus-visible { outline-color: #050505 }

@media (prefers-reduced-motion: reduce) {
  .vx-cta-roll__line { transition: none; transform: none !important }
  .vx-cta-roll__line.is-copy { display: none }
  .vx-cta-roll__arrow { transition: color .2s linear; transform: none !important }
}

.button-with-icon.vx-cta-roll { overflow: hidden }
.button-with-icon.vx-cta-roll .vx-cta-roll__mask { line-height: 27px }
.button-with-icon.vx-cta-roll .button-icon {
  color: #050505;
  transition: transform var(--vx-arrow-time) var(--vx-roll-ease);
}
.button-with-icon.vx-cta-roll:focus-visible .button-icon,
.button-with-icon.vx-cta-roll.is-vx-active .button-icon { transform: translate3d(4px, -4px, 0) }
@media (hover: hover) {
  .button-with-icon.vx-cta-roll:hover .button-icon { transform: translate3d(4px, -4px, 0) }
}
@media (prefers-reduced-motion: reduce) {
  .button-with-icon.vx-cta-roll .button-icon { transition: none; transform: none !important }
}

.vx-work-more-link.vx-cta-roll .vx-cta-roll__mask { padding-bottom: 2px }

.vx-cs-live.vx-cta-roll .vx-cta-roll__mask { line-height: 1.15 }

.vx-cs-next-link.vx-cta-roll .vx-cta-roll__mask { line-height: 1.05 }
.vx-cs-back.vx-cta-roll { border-bottom: 0 }
.vx-cs-back.vx-cta-roll .vx-cta-roll__mask { padding-bottom: 3px; border-bottom: 1px solid currentColor }

.vx-wk-item.vx-cta-roll { min-height: 0 }
.vx-wk-item.vx-cta-roll .vx-cta-roll__mask { line-height: 1.15 }

.vx-ai-btn .vx-ai-btn-arrow {
  transition: transform .42s cubic-bezier(.22, 1, .36, 1),
              color .42s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .vx-ai-btn .vx-ai-btn-arrow { transition: color .2s linear }
}