/* ==========================================================================
   Contacts page — entrance animation on load
   ========================================================================== */

.page-contact {
  --contact-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --contact-enter-duration: 0.65s;
  --contact-item-step: 50ms;
  --contact-item-duration: 0.4s;
  --contact-char-step: 15ms;
  --contact-char-duration: 0.2s;
}

.page-contact.is-contact-animating .contact__title,
.page-contact.is-contact-animating .contact__intro-char,
.page-contact.is-contact-animating .contact__cards .contact-card,
.page-contact.is-contact-animating .contact__social .contact__social-link,
.page-contact.is-contact-animating .contact__map {
  will-change: transform, opacity;
}

.page-contact.is-contact-animating .contact__title,
.page-contact.is-contact-animating .contact__cards .contact-card,
.page-contact.is-contact-animating .contact__social .contact__social-link {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--contact-enter-duration) var(--contact-enter-ease),
    transform var(--contact-enter-duration) var(--contact-enter-ease);
}

.page-contact.is-contact-animating .contact__intro-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--contact-char-duration) var(--contact-enter-ease),
    transform var(--contact-char-duration) var(--contact-enter-ease);
}

.page-contact.is-contact-animating .contact__map {
  opacity: 0;
  transition: opacity var(--contact-enter-duration) var(--contact-enter-ease);
}

.page-contact.is-contact-animating.is-contact-entered--title .contact__title {
  opacity: 1;
  transform: translateY(0);
}

.page-contact.is-contact-animating.is-contact-entered--intro .contact__intro-char {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--char-index, 0) * var(--contact-char-step));
}

.page-contact.is-contact-animating.is-contact-entered--intro .contact__social .contact__social-link {
  opacity: 1;
  transform: translateY(0);
  transition-duration: var(--contact-item-duration);
  transition-delay: calc(var(--social-index, 0) * var(--contact-item-step));
}

.page-contact.is-contact-animating.is-contact-entered--cards .contact__cards .contact-card {
  opacity: 1;
  transform: translateY(0);
  transition-duration: var(--contact-item-duration);
  transition-delay: calc(var(--contact-card-index, 0) * var(--contact-item-step));
}

.page-contact.is-contact-animating.is-contact-entered--map .contact__map {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-contact.is-contact-animating .contact__title,
  .page-contact.is-contact-animating .contact__intro-char,
  .page-contact.is-contact-animating .contact__cards .contact-card,
  .page-contact.is-contact-animating .contact__social .contact__social-link,
  .page-contact.is-contact-animating .contact__map {
    opacity: 1;
    transform: none;
    transition: none;
  }
}