/* Circular Carousel — items arranged in a 3D ring, rotates to bring each item to front. */

.circ-stage {
  position: relative; max-width: 780px; margin: 0 auto; height: 300px;
  perspective: 1000px; display: flex; align-items: center; justify-content: center;
}
.circ-ring {
  position: relative; width: 180px; height: 220px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,.9,.35,1);
}
.circ-item {
  position: absolute; top: 0; left: 0; width: 180px; height: 220px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  backface-visibility: hidden;
  transition: filter .4s;
  cursor: pointer;
}
.circ-item.is-back { filter: brightness(.45); }

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

/* Smaller stage + ring/item box on narrow phones so the JS-driven ring
   radius (halved in index.html at this same breakpoint) keeps 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) {
  .circ-stage { height: 220px; }
  .circ-ring, .circ-item { width: 130px; height: 160px; }
}