.motion-card {
  position: relative;
}

.motion-card.motion-pending {
  opacity: 0;
}

.motion-card.is-revealed {
  animation: card-rise-in .7s cubic-bezier(.2, .7, .2, 1) var(--motion-delay, 0ms) backwards;
}

@keyframes card-rise-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

:is(.quick-paths>a, .referral-step, .perk-card).motion-card {
  transition: transform .32s cubic-bezier(.2, .7, .2, 1), box-shadow .32s ease, background-color .25s ease;
}

.referral-step.motion-card {
  isolation: isolate;
}

.referral-step.motion-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -14px -18px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 34px rgba(47, 66, 45, .11);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .quick-paths>a.motion-card:hover,
  .care-team-tab.motion-card:hover,
  .values-grid .value-card.motion-card:hover,
  .referral-step.motion-card:hover,
  .perk-card.motion-card:hover {
    z-index: 2;
    transform: translateY(-8px);
  }

  .quick-paths>a.motion-card:hover,
  .perk-card.motion-card:hover {
    box-shadow: 0 16px 30px rgba(47, 66, 45, .1);
  }

  .perk-card.motion-card:hover { background: rgba(255, 255, 255, .35); }
  .referral-step.motion-card:hover::before { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-card.motion-pending { opacity: 1; }
  .motion-card.is-revealed { animation: none; }
  .quick-paths>a.motion-card:hover,
  .care-team-tab.motion-card:hover,
  .values-grid .value-card.motion-card:hover,
  .referral-step.motion-card:hover,
  .perk-card.motion-card:hover { transform: none; }
  .referral-step.motion-card::before { transition: none; transform: none; }
}