/* 3D Carousel base */
.carousel-3d {
  position: relative;
  perspective: 1600px;
  transform-style: preserve-3d;
  padding: var(--space-lg) 0 var(--space-3xl);
  overflow: visible;
}

.carousel-3d::before,
.carousel-3d::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

.carousel-3d::before {
  left: 0;
  background: linear-gradient(90deg, rgba(6, 6, 6, 0.98) 0%, rgba(6, 6, 6, 0) 100%);
}

.carousel-3d::after {
  right: 0;
  background: linear-gradient(270deg, rgba(6, 6, 6, 0.98) 0%, rgba(6, 6, 6, 0) 100%);
}

.carousel-3d--moving::before,
.carousel-3d--moving::after {
  opacity: 1;
}

.carousel-3d-track {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.carousel-3d-card {
  position: absolute;
  width: min(240px, 68vw);
  max-width: 300px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform-origin: center center;
  transition:
    transform 520ms var(--ease-out),
    opacity 520ms var(--ease-out),
    box-shadow 520ms var(--ease-out),
    border-color 520ms var(--ease-out),
    filter 520ms var(--ease-out);
}

.carousel-3d-card.is-dim {
  filter: blur(1px) saturate(0.8);
  opacity: 0.45;
}

.carousel-3d-card.is-focus {
  border-color: var(--border-strong);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.carousel-3d--roblox .carousel-3d-track {
  height: 420px;
}

.carousel-3d--groups .carousel-3d-track {
  height: 300px;
}

.carousel-3d--roblox .roblox-game-card {
  width: min(280px, 70vw);
  max-width: 320px;
}

.carousel-3d--roblox .roblox-group-card {
  width: min(320px, 80vw);
  max-width: 360px;
}

.carousel-3d--static .carousel-3d-track {
  height: auto;
  justify-content: flex-start;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
}

.carousel-3d--static .carousel-3d-card {
  position: relative;
  opacity: 1;
  transform: none;
  min-width: 220px;
}

.carousel-3d-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(12, 12, 12, 0.8);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.carousel-3d-nav--prev {
  left: 0;
  transform: translate(-10%, -50%);
}

.carousel-3d-nav--next {
  right: 0;
  transform: translate(10%, -50%);
}

.carousel-3d-nav:hover,
.carousel-3d-nav:focus-visible {
  background: #ffffff;
  color: #0b0b0b;
  border-color: #ffffff;
  transform: translate(0, -50%);
}

@media (max-width: 720px) {
  .carousel-3d-nav {
    display: none;
  }
}