/* Scroll opening for the original four program cards.
   Card surfaces, type, timeline, labels and accordions stay in program-v18.css. */
#program .program-timeline-step > .ps23-shell {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
  align-self: stretch;
  min-width: 0;
  transform: none;
  transform-origin: 50% 18%;
  backface-visibility: hidden;
}

/* The shell supplies the one scroll transform. The old step-shift could otherwise
   disappear on hover/focus and move the details button between down and up. */
#program .program-timeline-step > .ps23-shell > .program-card {
  min-width: 0;
  width: 100%;
  transform: none;
}

#program.ps23-enhanced .program-timeline-step > .ps23-shell {
  transform: perspective(1200px)
    rotateX(calc((1 - var(--ps23-open, 1)) * 9deg))
    rotateZ(calc((1 - var(--ps23-open, 1)) * -1.8deg))
    scale(calc(.94 + var(--ps23-open, 1) * .06));
}

#program.ps23-enhanced .ps23-shell[data-ps23-active="true"] {
  will-change: transform;
}

@media (max-width: 800px) {
  #program.ps23-enhanced .program-timeline-step > .ps23-shell,
  #program .program-timeline-step > .ps23-shell {
    transform: none;
    will-change: auto;
  }
}

/* The existing timeline changes from three columns to two at 760px. */
@media (max-width: 760px) {
  #program .program-timeline-step > .ps23-shell {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #program.ps23-enhanced .program-timeline-step > .ps23-shell,
  #program .program-timeline-step > .ps23-shell {
    transform: none;
    will-change: auto;
  }
}