@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-media-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-dialog-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.animate-fade-up {
  animation: fade-up var(--motion-duration-reveal) var(--motion-ease-standard) both;
}

.hero-card__content.animate-fade-up {
  animation: none;
}

.hero-card__eyebrow,
.hero-card__title,
.hero-card__description,
.hero-card__actions {
  opacity: 1;
}

.hero-card__media {
  opacity: 0;
  animation: hero-media-in 520ms 80ms var(--motion-ease-emphasized) both;
}

.motion-reveal {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance-md), 0);
  transition:
    opacity var(--motion-duration-reveal) var(--motion-ease-standard),
    transform var(--motion-duration-reveal) var(--motion-ease-emphasized);
  transition-delay: var(--motion-delay, 0ms);
}

.motion-reveal--visual {
  transform: translate3d(0, var(--motion-distance-md), 0) scale(0.994);
}

/* Case cards reveal without scaling, so their mockups never appear to shrink first. */
.case-card.motion-reveal--visual {
  transform: translate3d(0, var(--motion-distance-md), 0);
}

.motion-reveal.is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.case-card.motion-reveal.is-motion-visible {
  transform: translate3d(0, 0, 0);
}

.marquee__track {
  animation-play-state: paused;
}

.marquee.is-motion-active .marquee__track {
  animation-play-state: running;
}

.contact-choice-modal__backdrop,
.video-modal__backdrop,
.image-lightbox__backdrop {
  animation: modal-backdrop-in var(--motion-duration-fast) linear both;
}

.contact-choice-modal__dialog,
.video-modal__dialog,
.image-lightbox__dialog {
  animation: modal-dialog-in var(--motion-duration-base) var(--motion-ease-emphasized) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .marquee__track {
    animation: none !important;
    transform: none;
  }

  .marquee {
    overflow-x: auto;
  }

  .marquee__group[aria-hidden="true"] {
    display: none;
  }

  .hero-card__eyebrow,
  .hero-card__title,
  .hero-card__description,
  .hero-card__actions,
  .hero-card__media,
  .motion-reveal {
    opacity: 1;
    transform: none;
  }
}