/* Functional opt-in decoration for native editable cue paragraphs.
 * Geometry and movement are the original difference-compare hand drawing.
 * The theme retains the surrounding section's spacing, type and color. */
.sf-content-carousel .sf-content-carousel__arrow,
.sf-content-carousel .sf-content-carousel__dot {
  touch-action: manipulation;
}

.sf-content-carousel .sf-content-carousel__swipe-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sf-content-carousel .sf-content-carousel__swipe-cue[hidden] {
  display: none;
}

.sf-content-carousel__swipe-cue .compare-scroll-cue-svg {
  order: -1;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  color: rgba(190, 190, 190, 1);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.sf-content-carousel__swipe-cue .compare-scroll-cue-card {
  fill: rgba(190, 190, 190, 0.3);
  transform: translateX(0);
}

.sf-content-carousel__swipe-cue .compare-scroll-cue-hand {
  fill: currentColor;
  transform-origin: 0 0;
  transform: translateX(42px) scale(0.68);
  opacity: 1;
}

.sf-content-carousel__swipe-cue[data-sf-swipe-cue-motion="true"] .compare-scroll-cue-card {
  animation: sfCompareCueCardsMove 1.6s 2;
}

.sf-content-carousel__swipe-cue[data-sf-swipe-cue-motion="true"] .compare-scroll-cue-hand {
  animation: sfCompareCueHandMove 1.6s 2;
}

.sf-content-carousel__swipe-cue[data-sf-swipe-cue-paused="true"] .compare-scroll-cue-card,
.sf-content-carousel__swipe-cue[data-sf-swipe-cue-paused="true"] .compare-scroll-cue-hand {
  animation-play-state: paused;
}

@keyframes sfCompareCueHandMove {
  0% { transform: translateX(80px) scale(1); opacity: 0; }
  10% { transform: translateX(80px) scale(1); opacity: 1; }
  20%, 60% { transform: translateX(175px) scale(0.6); opacity: 1; }
  80% { transform: translateX(5px) scale(0.6); opacity: 1; }
  100% { transform: translateX(5px) scale(0.6); opacity: 0; }
}

@keyframes sfCompareCueCardsMove {
  0%, 60% { transform: translateX(0); }
  80%, 100% { transform: translateX(-240px); }
}

@media (prefers-reduced-motion: reduce) {
  .sf-content-carousel__swipe-cue[data-sf-swipe-cue-motion] .compare-scroll-cue-card,
  .sf-content-carousel__swipe-cue[data-sf-swipe-cue-motion] .compare-scroll-cue-hand {
    animation: none;
  }
}