/* ==========================================================
   Circular Carousel (vanilla port, cylinder preset)
   Usage: a positioned container with explicit height, e.g.
   <div class="cc-root" style="height:560px"></div>
   ========================================================== */
.cc-root {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.cc-root.is-dragging { cursor: grabbing; }

.cc-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--cc-perspective, 1400px);
  perspective-origin: 50% 50%;
}

.cc-ring {
  position: relative;
  width: var(--cc-card-w);
  height: var(--cc-card-h);
  transform-style: preserve-3d;
  will-change: transform;
}

.cc-card {
  position: absolute;
  inset: 0;
  width: var(--cc-card-w);
  height: var(--cc-card-h);
  box-sizing: border-box;
  border-radius: 20px;
  background: var(--cc-card-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--cc-card-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  color: var(--cc-text, #fff);
  overflow: hidden;
}

.cc-media {
  width: 44%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.cc-media svg,
.cc-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.cc-card:hover .cc-media { transform: scale(1.08); }

/* Photo-style cards (no captions inside, image fills card) */
.cc-card.cc-card--cover { padding: 0; gap: 0; }
.cc-card.cc-card--cover .cc-media { width: 100%; height: 100%; aspect-ratio: auto; }
.cc-card.cc-card--cover .cc-media img { object-fit: cover; }

.cc-caption { text-align: center; line-height: 1.2; }
.cc-title {
  font-weight: 600;
  font-size: clamp(0.9rem, calc(var(--cc-card-w) * 0.07), 1.15rem);
  letter-spacing: 0.01em;
  margin: 0;
}
.cc-subtitle {
  font-size: clamp(0.7rem, calc(var(--cc-card-w) * 0.05), 0.85rem);
  color: var(--cc-text-muted, rgba(255, 255, 255, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 4px 0 0;
}

/* Intro: "rise" — cards float up and fade in, staggered */
.cc-root[data-intro="rise"] .cc-card {
  opacity: 0;
  animation: cc-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--cc-i) * 40ms);
}
@keyframes cc-rise {
  from { opacity: 0; transform: var(--cc-place) translateY(80px); }
  to   { opacity: 1; transform: var(--cc-place) translateY(0); }
}
/* Intro: "fade" */
.cc-root[data-intro="fade"] .cc-card {
  opacity: 0;
  animation: cc-fade 0.8s ease forwards;
  animation-delay: calc(var(--cc-i) * 30ms);
}
@keyframes cc-fade { to { opacity: 1; } }
/* No intro */
.cc-root[data-intro="none"] .cc-card { transform: var(--cc-place); }

@media (prefers-reduced-motion: reduce) {
  .cc-root .cc-card { animation: none !important; opacity: 1; transform: var(--cc-place); }
}