/* Small, composited movements keep the page light and the offer readable. */
@keyframes banner-drift-one {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-9px) rotate(-6deg);
  }
}
@keyframes banner-drift-two {
  0%,
  100% {
    transform: translateY(0) rotate(5deg);
  }
  50% {
    transform: translateY(8px) rotate(3deg);
  }
}
@keyframes profile-drift {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-5px) rotate(-1deg);
  }
}
@keyframes note-drift {
  0%,
  100% {
    transform: translateY(0) rotate(5deg);
  }
  50% {
    transform: translateY(-6px) rotate(3deg);
  }
}
@keyframes star-turn {
  0%,
  100% {
    transform: rotate(-8deg) scale(1);
  }
  50% {
    transform: rotate(10deg) scale(1.06);
  }
}
.motion-enabled .visual.in-view .floating.one {
  animation: banner-drift-one 7s ease-in-out infinite;
}
.motion-enabled .visual.in-view .floating.two {
  animation: banner-drift-two 8s ease-in-out infinite;
}
.motion-enabled .visual.in-view .profile {
  animation: profile-drift 7.5s ease-in-out infinite;
}
.motion-enabled .visual.in-view .note {
  animation: note-drift 6s ease-in-out infinite;
}
.motion-enabled .closing.in-view .star {
  animation: star-turn 8s ease-in-out infinite;
}
.motion-enabled .btn span {
  transition: transform 0.25s ease;
}
.motion-enabled .btn:hover span {
  transform: translate(3px, -2px);
}
.motion-enabled .step,
.motion-enabled .plan {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
@media (hover: hover) {
  .motion-enabled .step:hover,
  .motion-enabled .plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px #2e201909;
  }
}
.hero-end {
  align-items: center;
}
@media (max-width: 720px) {
  .hero-end {
    flex-wrap: wrap;
  }
  .hero-end span:last-of-type {
    max-width: 190px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .visual *,
  body .closing .star {
    animation: none !important;
  }
  .motion-enabled .step,
  .motion-enabled .plan,
  .motion-enabled .btn span {
    transition: none;
  }
  .motion-enabled .step:hover,
  .motion-enabled .plan:hover {
    transform: none;
  }
}