/* Cover Flow Carousel — 3D perspective stack, center slide flat/large, sides scaled + rotated back. */

.cf-stage {
  position: relative; max-width: 780px; margin: 0 auto; height: 300px;
  perspective: 1200px; display: flex; align-items: center; justify-content: center;
}
.cf-track { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }

.cf-item {
  position: absolute; top: 50%; left: 50%;
  width: 210px; height: 260px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transition: transform .5s cubic-bezier(.22,.9,.35,1), opacity .5s, filter .5s;
  cursor: pointer;
}
.cf-item.is-back { filter: brightness(.55); }

.cf-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px;
}

/* Smaller stage + card box on narrow phones so the JS-driven translateX/
   translateZ constants (halved in index.html at this same breakpoint)
   keep side cards inside the viewport instead of getting clipped by
   body's overflow-x:hidden. Keep in sync with the 480px check in JS. */
@media (max-width: 480px) {
  .cf-stage { height: 220px; }
  .cf-item { width: 130px; height: 160px; }
}