/* MagicAIl Table — styles: a fanned-out hand of cards (build 117, js/fan.js) — a building block on its own.
   The fan is as wide as its parent and as high as one card plus room for the fan's curve; the cards stand on its
   bottom edge in the middle. Size: --card-w on the fan (default below). States: is-open, is-folded, is-down. */

.fan {
  --card-w: min(180px, 12vw, 27vh);
  /* The distance between two cards: two thirds of a card, less when many cards would be wider than the parent. */
  --step: min(calc(var(--card-w) * 0.66), calc(84vw / var(--n)));
  position: relative;
  width: 100%;
  height: calc(var(--card-w) * 88 / 63 + 30px);
}
.fan-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: calc(var(--card-w) / -2);
  transform-origin: 50% 100%;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.75);
  /* Closed: below, out of the picture. */
  transform: translateY(130%);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.fan.is-open .fan-card {
  transform: translateX(calc(var(--k) * var(--step))) translateY(var(--drop)) rotate(var(--rot));
}
.fan.is-folded .fan-card {
  transform: translateY(0) rotate(0deg);
  transition: transform 0.38s ease-in-out;
}
.fan.is-down .fan-card {
  transform: translateY(140%) rotate(0deg);
  transition: transform 0.42s ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .fan-card { transition-duration: 0.01s !important; }
}