/* The choice screen: one card for each website, both in the calm look of the shared frame. While the
   system allows motion, the cards rise in once, one after the other, and then Shelly and Jack glance
   into the card of the fun website from its sides. Without motion they stand where the motion ends.
   Design decision: the timing below. */
.choice {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 72px 16px;
  text-align: center;
}
.choice h1 { font: 700 40px/1.2 var(--sans); }

.choice-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: 20px;
  margin-top: 24px;
  text-align: left;
}
.choice-cards a {
  display: grid;
  align-content: start;
  justify-items: start;
  --card-padding: 24px;
  gap: 12px;
  padding: var(--card-padding);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.choice-cards h2 { font: 700 22px/1.3 var(--sans); }

/* Shelly and Jack stand on the bottom edge of the card, each moved out past its side of the card by
   half the width of his figure, and the card hides what is outside it. */
.choice-peek {
  --width: calc(var(--sprite-size) / 2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  justify-self: stretch;
  margin: 0 calc(-1 * var(--card-padding)) calc(-1 * var(--card-padding));
}
.choice-peek .standing-figure {
  --side: -1;
  --figure-width: calc((var(--figure-right) - var(--figure-left)) * var(--frame-width) / 100);
  translate: calc(var(--side) * var(--figure-width) / 2) 0;
}
.choice-peek .standing-figure:last-child { --side: 1; }

@media (prefers-reduced-motion: no-preference) {
  .choice-cards a { animation: rise-in 0.5s ease-out both; }
  .choice-cards a + a { animation-delay: 0.15s; }
  .choice-peek .standing-figure { animation: glance-in 0.6s 0.8s ease-out both; }
}
@keyframes rise-in { from { opacity: 0; translate: 0 24px; } }
@keyframes glance-in { from { translate: calc(var(--side) * var(--figure-width)) 0; } }

@media (max-width: 760px) {
  .choice-cards { grid-template-columns: minmax(0, 1fr); }
  .choice h1 { font-size: 30px; }
}