/* Reusable motion, elevation and stagger patterns. */

.feature-card,
.info-card,
.video-card,
.contact-card,
.timeline article,
.supplied-media-card,
.inner-image-card {
  transition: var(--nurture-transition-interactive), translate var(--nurture-transition-duration) var(--nurture-transition-easing);
}

.inner-image-card img,
.supplied-media-card img,
.message-layout__portrait img {
  transition: transform 320ms ease;
}

.video-card button,
.accordion__trigger {
  transition: var(--nurture-transition-interactive);
}

.feature-grid--stagger {
  padding-block-start: 22px;
}

.feature-grid--stagger > .feature-card:nth-child(even) {
  position: relative;
  inset-block-start: -22px;
}

.reveal-ready .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready .reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .info-card:hover,
  .video-card:hover,
  .contact-card:hover,
  .timeline article:hover,
  .supplied-media-card:hover,
  .inner-image-card:hover {
    border-color: var(--nurture-card-hover-border);
    box-shadow: var(--nurture-card-hover-shadow);
    translate: 0 -4px;
  }

  .video-card:hover button {
    box-shadow: var(--nurture-shadow-action);
    transform: translateY(-1px);
  }

  .inner-image-card:hover img,
  .supplied-media-card:hover img,
  .message-layout__portrait:hover img {
    transform: scale(1.025);
  }
}

@media (max-width: 767px) {
  .feature-grid--stagger {
    padding-block-start: 0;
  }

  .feature-grid--stagger > .feature-card:nth-child(even) {
    inset-block-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal-item,
  .reveal-ready .reveal-item.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .feature-card,
  .info-card,
  .video-card,
  .contact-card,
  .timeline article,
  .supplied-media-card,
  .inner-image-card,
  .inner-image-card img,
  .supplied-media-card img,
  .message-layout__portrait img,
  .video-card button,
  .accordion__trigger {
    scroll-behavior: auto;
    translate: none;
    transition: none;
  }
}