/* Individual transforms leave the FV callout's existing rotation intact. */
.benefit-motion-enter {
  animation: benefit-callout-enter 850ms cubic-bezier(.22,.7,.25,1) both;
}

.benefit-motion-emphasis {
  animation: benefit-callout-emphasis 900ms ease-in-out both;
}

.efficiency-return > span {
  display: inline-block;
}

.efficiency-return.benefit-motion-enter > span,
.efficiency-return.benefit-motion-emphasis > span {
  animation: benefit-arrow-hop 780ms ease-in-out 120ms both;
}

.benefit-motion-enter > .fv-d-plus,
.sim-negotiation.benefit-motion-enter > span,
.benefit-motion-emphasis > .fv-d-plus,
.sim-negotiation.benefit-motion-emphasis > span {
  animation: benefit-plus-accent 700ms ease-in-out 150ms both;
}

@keyframes benefit-callout-enter {
  0% { translate: 0 10px; scale: .97; }
  68% { translate: 0 -2px; scale: 1.008; }
  100% { translate: 0 0; scale: 1; }
}

@keyframes benefit-callout-emphasis {
  0%, 100% { translate: 0 0; scale: 1; }
  45% { translate: 0 -2px; scale: 1.015; }
}

@keyframes benefit-arrow-hop {
  0%, 100% { translate: 0 0; }
  45% { translate: 0 5px; }
}

@keyframes benefit-plus-accent {
  0%, 100% { scale: 1; }
  45% { scale: 1.12; }
}

html[data-motion="off"] :is(.benefit-motion-enter, .benefit-motion-emphasis),
html[data-motion="off"] :is(.benefit-motion-enter, .benefit-motion-emphasis) > span {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.benefit-motion-enter, .benefit-motion-emphasis),
  :is(.benefit-motion-enter, .benefit-motion-emphasis) > span {
    animation: none !important;
  }
}