.fan-section { overflow: hidden; }
.fan-section__social { justify-content: center; margin-top: 1rem; }
.fan {
  --cw: var(--card-w, 210px);
  --ch: calc(var(--cw) * 1.25);
  position: relative; display: block;
  height: calc(var(--ch) + var(--r, 750px) * .14 + 1rem);
  margin-top: clamp(1rem, 3vw, 2rem);
  contain: layout paint;
}
.fan__ring { margin: 0; padding: 0; list-style: none; }
.fan__card {
  position: absolute; left: 50%; top: 1rem;
  width: var(--cw); height: var(--ch);
  transform-origin: 50% var(--r, 750px); /* circle center, far below the cards */
  transform: translateX(-50%);
  will-change: transform, opacity;
}
.fan__card > *, .fan__card a { display: block; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 34px -20px rgba(18, 59, 120, .6); background: var(--color-surface); }
.fan__card img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fan__card .placeholder-media { border-radius: var(--radius); }
.fan__toggle { position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 1rem; z-index: 200; color: var(--color-controls); background: var(--color-surface); }
.fan__play { display: none; }
.fan.is-paused .fan__pause { display: none; }
.fan.is-paused .fan__play { display: block; }
@media (max-width: 749px) { .fan { --cw: var(--card-w-m, 140px); } }