/* Mouse-portion fan. Measured from truus.co's services row (MWG 025, teardown 10-01), rewritten with our names.
   A row of overlapping, scattered cards. The mouse x over the row picks a card from equal-width zones; that card
   straightens and lifts, and the others slide away from it, the nearest furthest. Two layers per card:
   .fan__card holds the pose (scatter offset, straighten, lift), .fan__inner takes the push, so they never fight.
   Markup: .fan > .fan__card[data-offset-x|y|rot] > .fan__inner   (offsets in % of the card and deg) */
.fan {
  --fan-card-w: 19.25em;        /* card width */
  --fan-overlap: 4.933em;       /* each card tucks this far under the previous one (~26%) */
  --fan-ratio: 3 / 4;           /* portrait card */
  --fan-radius: 0.75em;
  display: flex;
  justify-content: center;
}
.fan__card {
  flex: none;
  width: var(--fan-card-w);
  margin-left: calc(-1 * var(--fan-overlap));
  position: relative;
  will-change: transform;
}
.fan__card:first-child { margin-left: 0; }
.fan__inner {
  aspect-ratio: var(--fan-ratio);
  border-radius: var(--fan-radius);
  overflow: hidden;
  will-change: transform;
}
/* below 992px (or touch) the fan is off: the cards wrap and keep their scatter pose */
@media (max-width: 991px) {
  .fan { flex-wrap: wrap; gap: 3em; }
  .fan__card { margin-left: 0; }
}