/* JavaScript adds these classes only when scroll animations are supported. */
.about-page .about-reveal-waiting {
  opacity: 0;
}

.about-page .about-reveal-entering {
  animation: about-section-in 850ms cubic-bezier(.22, .8, .35, 1) var(--about-enter-delay, 0ms) both;
  will-change: transform, opacity;
}

.about-page [data-about-reveal="card"] {
  --about-enter-y: 54px;
  --about-enter-scale: .97;
}

.about-page [data-about-reveal="left"] {
  --about-enter-x: -28px;
}

.about-page [data-about-reveal="right"] {
  --about-enter-x: 28px;
}

@keyframes about-section-in {
  0% {
    opacity: 0;
    transform: translate3d(var(--about-enter-x, 0px), var(--about-enter-y, 36px), 0) scale(var(--about-enter-scale, 1));
  }
  65% {
    opacity: 1;
    transform: translate3d(0, -5px, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 767px) {
  .about-page [data-about-reveal] {
    --about-enter-x: 0px;
    --about-enter-y: 28px;
  }

  .about-page .about-reveal-entering {
    animation-duration: 700ms;
  }
}

@media (prefers-reduced-motion: reduce), print {
  .about-page .about-reveal-waiting,
  .about-page .about-reveal-entering {
    animation: none;
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}