/* Reveal belongs to the wrapper; ambient motion belongs only to the image. */
.section-avatar {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  width: 160px;
  --avatar-float: -3px;
  --avatar-cycle: 6s;
}
.section-avatar[data-reveal] {
  transition: opacity 800ms cubic-bezier(.22, 1, .36, 1),
              transform 800ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0s;
}
.section-avatar img {
  display: block;
  width: 100%;
  height: auto;
}
.section-avatar.is-visible img {
  animation: avatar-float var(--avatar-cycle) ease-in-out 850ms infinite;
}
@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--avatar-float)); }
}
.cta-section > .container { position: relative; }
.section-avatar--cta {
  width: 170px;
  left: 48px;
  bottom: calc(100% - 7px);
  --avatar-float: -2px;
  --avatar-cycle: 7s;
}
.solution__content { position: relative; }
.section-avatar--explain {
  width: 148px;
  right: calc(100% + 42px);
  bottom: -50px;
  --avatar-float: -3.5px;
}
#how-it-works > .container,
.features__layout,
#faq > .container--narrow { position: relative; }
.section-avatar--hello {
  left: 32px;
  top: -20px;
  width: 132px;
  --avatar-float: -4px;
  --avatar-cycle: 5.5s;
}
.section-avatar--work {
  bottom: 0;
  left: 32px;
  width: 210px;
  --avatar-float: -4px;
  --avatar-cycle: 6.5s;
}
.section-avatar--think {
  right: calc(100% + 16px);
  top: 4px;
  width: 145px;
  --avatar-cycle: 7s;
}
@media (max-width: 1100px) {
  .section-avatar--hello,
  .section-avatar--think { display: none; }
}
@media (max-width: 1024px) {
  .solution__stat-float { position: relative; left: auto; bottom: auto; }
  .section-avatar--cta { width: 130px; left: 32px; }
  .solution__content { padding-right: 164px; }
  .section-avatar--explain { right: 24px; bottom: 24px; width: 115px; }
  .section-avatar--work { top: 20px; bottom: auto; right: 0; left: auto; width: 160px; }
  .features__layout > [data-reveal="left"]:not(.section-avatar) { padding-right: 190px; }
}
@media (max-width: 768px) {
  .section-avatar { display: none; }
  .solution__content,
  .features__layout > [data-reveal="left"]:not(.section-avatar) { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .section-avatar[data-reveal] { opacity: 1; transform: none; transition: none; }
  .section-avatar.is-visible img { animation: none; transform: none; }
}