/* ============================================
   Social Proof — fan cards desktop, list mobile
   ============================================ */
.social-proof { padding: 48px 0; text-align: center; }
.social-proof .section-header { text-align: center; }

/* Mobile: horizontal scroll cards */
.fan-cards {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 20px 20px;
  -webkit-overflow-scrolling: touch;
}
.fan-cards::-webkit-scrollbar { display: none; }

.fan-cards__card {
  flex-shrink: 0; width: 160px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--dark-surface);
  scroll-snap-align: start;
}
.fan-cards__card img {
  width: 100%; height: 180px; object-fit: cover;
}
.fan-cards__caption {
  padding: 10px 12px; text-align: left;
}
.fan-cards__caption strong { font-size: 13px; display: block; }
.fan-cards__caption span { font-size: 11px; color: var(--text-3); }

/* ===== DESKTOP: fan spread ===== */
@media (min-width: 769px) {
  .social-proof { padding: 100px 24px; }

  .fan-cards {
    display: flex; justify-content: center; align-items: flex-end;
    height: 460px; position: relative;
    overflow: visible; padding: 0;
    scroll-snap-type: none;
  }

  .fan-cards__card {
    position: absolute; width: 200px;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s, z-index 0s 0.1s;
    transform-origin: bottom center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    --rotation: calc((var(--i) - 2) * 10deg);
    --spread: calc((var(--i) - 2) * 110px);
    --lift: calc((2 - var(--i)) * (2 - var(--i)) * -4px);
    transform: translateX(var(--spread)) rotate(var(--rotation)) translateY(var(--lift));
    scroll-snap-align: none;
  }
  .fan-cards__card img { height: 260px; }

  .fan-cards__card:nth-child(1) { z-index: 1; }
  .fan-cards__card:nth-child(2) { z-index: 2; }
  .fan-cards__card:nth-child(3) { z-index: 3; }
  .fan-cards__card:nth-child(4) { z-index: 2; }
  .fan-cards__card:nth-child(5) { z-index: 1; }

  .fan-cards__card:hover {
    transform: translateX(var(--spread)) rotate(0deg) translateY(-50px) scale(1.06);
    z-index: 10 !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  }
  .fan-cards:hover .fan-cards__card:not(:hover) {
    filter: brightness(0.8);
  }
}