/* Cards open from the center, then lift toward the reader on interaction. */
.program-grid { perspective: 1200px; isolation: isolate; }
.program-grid .program-card {
  --entry-x: 0%;
  --spread-x: 0px;
  --card-angle: 0deg;
  --entry-angle: 0deg;
  transform-origin: center bottom;
}
.program-grid .program-card:nth-child(3n + 1) {
  --entry-x: 42%;
  --spread-x: -10px;
  --card-angle: -1.5deg;
  --entry-angle: 8deg;
}
.program-grid .program-card:nth-child(3n) {
  --entry-x: -42%;
  --spread-x: 10px;
  --card-angle: 1.5deg;
  --entry-angle: -8deg;
}
@media (prefers-reduced-motion: no-preference) {
  .story-motion .program-grid .program-card.story-reveal {
    opacity: 0;
    transform: translate3d(var(--entry-x), 65px, -100px) rotate(var(--entry-angle)) scale(.82);
    transition: opacity .65s ease, transform 1s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
    transition-delay: 0s;
  }
  .story-motion .program-grid .program-card.story-revealed,
  .story-motion .program-grid .program-card:focus-within {
    opacity: 1;
    transform: translate3d(var(--spread-x), 0, 0) rotate(var(--card-angle));
  }
  .story-motion .program-grid .program-card:focus-within {
    z-index: 2;
    transform: translate3d(var(--spread-x), -12px, 30px) rotate(0deg);
    box-shadow: 0 24px 48px #0007;
    border-color: currentColor;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .story-motion .program-grid .program-card.story-revealed:hover {
    z-index: 2;
    transform: translate3d(var(--spread-x), -16px, 45px) rotate(0deg);
    box-shadow: 0 28px 55px #0008;
    border-color: currentColor;
  }
}
@media (max-width: 760px) {
  .program-grid .program-card:nth-child(n) {
    --entry-x: 0%;
    --spread-x: 0px;
    --card-angle: 0deg;
    --entry-angle: 0deg;
  }
  .story-motion .program-grid .program-card.story-reveal:not(.story-revealed):not(:focus-within) {
    transform: translate3d(0, 36px, 0) scale(.94);
  }
}
@media (prefers-reduced-motion: reduce) {
  .story-motion .program-grid .program-card,
  .program-grid .program-card.story-reveal { opacity: 1; transform: none !important; }
}