html,
body {
  overflow-x: hidden;
}

.contact-layout {
  animation: contact-reveal .85s cubic-bezier(.72, 0, .2, 1) both;
  will-change: transform;
}

.contact-transition-arrived .contact-layout,
.contact-transition-arrived .contact-layout > section,
.contact-transition-arrived .site-footer {
  animation: none;
}

.contact-layout > section {
  animation: contact-content-in .8s .42s cubic-bezier(.22, .65, .25, 1) both;
}

.site-footer {
  animation: contact-footer-in .65s .72s ease both;
}

@keyframes contact-reveal {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes contact-content-in {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes contact-footer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-layout,
  .contact-layout > section,
  .site-footer {
    animation: none;
  }
}