/* ============================================
   FEATURES PARALLAX CAROUSEL
   3 rows of cards, infinite via cloned sets. All rows snap to the
   same target X, but with different transition timings — creating
   parallax depth during the snap. Aligned at rest.
   ============================================ */

.features-carousel-section {
  padding: var(--space-4xl) 0;
  /* `overflow: clip` clips the cloned cards at the section edge WITHOUT
     establishing a scroll container — sticky descendants (the controls)
     can still anchor to the viewport. `overflow: hidden` would trap them. */
  overflow: clip;
}

.features-carousel {
  position: relative;
}

.features-carousel__viewport {
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.features-carousel__row {
  display: flex;
  gap: 16px;
  will-change: transform;
  /* No CSS transition — JS drives transform every frame (autoplay + snap). */
}

/* Card — default desktop: 4 per page (4 cards + 3 gaps = 100%) */
.feature-card {
  flex: 0 0 calc((100% - 48px) / 4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
  box-sizing: border-box;
}

.feature-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-card__icon img,
.feature-card__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.feature-card__icon--blue {
  background: linear-gradient(135deg, #4f7dff 0%, #1f48d6 100%);
  box-shadow: 0 0 24px rgba(79, 125, 255, 0.35);
  --pulse-color: rgba(79, 125, 255, 0.2);
}

.feature-card__icon--green {
  background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%);
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.3);
  --pulse-color: rgba(74, 222, 128, 0.2);
}

.feature-card__icon--purple {
  background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.35);
  --pulse-color: rgba(168, 85, 247, 0.2);
}

.feature-card__icon--orange {
  background: linear-gradient(135deg, #fb923c 0%, #c2410c 100%);
  box-shadow: 0 0 24px rgba(251, 146, 60, 0.35);
  --pulse-color: rgba(251, 146, 60, 0.2);
}

/* Starry-night pulse: applied to a random ~80% of icons by JS, each with
   its own --pulse-dur and (negative) --pulse-delay so none ever sync up.
   `drop-shadow` stacks on top of the static box-shadow without replacing
   it; the subtle scale completes the twinkle. */
.feature-card__icon--pulse {
  animation: icon-twinkle var(--pulse-dur, 4s) ease-in-out infinite;
  animation-delay: var(--pulse-delay, 0s);
  will-change: transform, filter;
}

@keyframes icon-twinkle {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 18px var(--pulse-color, rgba(255, 255, 255, 0.8)));
  }
}

.feature-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text);
}

.feature-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}

.feature-card__desc a {
  color: #4f7dff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.feature-card__desc a:hover {
  text-decoration: none;
}

/* Controls — re-use the existing carousel control look, but stick them to
   the bottom of the viewport while the carousel is on screen so the user
   can always reach prev/next while scrolling past a tall carousel. */
.features-carousel .carousel-controls-wrapper {
  margin-top: var(--space-xl);
  position: sticky;
  bottom: 24px;
  z-index: 5;
  pointer-events: none;
}

.features-carousel .carousel-controls-wrapper .carousel-controls {
  pointer-events: auto;
}

/* Responsive: cardsPerPage 4 | 2 | 1 — all divisors of 8 (originalCount)
   so loop math stays clean. */
@media (max-width: 1100px) and (min-width: 601px) {
  .feature-card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}

@media (max-width: 600px) {
  .feature-card {
    flex: 0 0 100%;
    min-height: 200px;
    padding: 24px 20px;
  }

  /* carousel-mobile.css hides .carousel-paddle at ≤768px (intended for
     the swipe-driven main carousel). Re-show them inside our features
     carousel — touch swipe + sticky paddles are both useful here. */
  .features-carousel .carousel-paddle {
    display: flex;
  }
}