/* ==========================================================================
   REVIEW REEL (20 Oct 2026) .. curved band of real review screenshots above
   the testimonials carousel. Logic in assets/js/review-reel.js.
   ========================================================================== */

.review-reel {
  position: relative;
  overflow: hidden;
  container-type: size;
  height: clamp(250px, 30vw, 400px);
  /* full-bleed out of .container */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--space-5, 1.5rem) var(--space-6, 2rem);
  direction: ltr;
}

.review-reel__band {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.review-reel.is-ready .review-reel__band {
  opacity: 1;
}

.review-reel__tile {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

.review-reel:not(.is-running) .review-reel__tile {
  animation-play-state: paused !important;
}

.review-reel__strip {
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .review-reel__tile {
    animation-play-state: paused !important;
  }
}

@media (max-width: 767px) {
  .review-reel {
    height: clamp(210px, 62vw, 290px);
    margin-block: var(--space-4, 1rem) var(--space-5, 1.5rem);
  }
}