/* The original presentation is retained; these rules add channel interaction. */
/* Until the drag script starts, a mouse click must not pause the CSS loop
   indefinitely through focus-within. Visible keyboard focus still pauses it. */
.customer-track:focus-within:not(:hover):not(:has(.customer-card:focus-visible)) {
  animation-play-state: running;
}
@property --cs-customer-orbit-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.customer-marquee.cs-customers-ready {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  overflow-anchor: none;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.customer-marquee.cs-customers-ready::-webkit-scrollbar { display: none; }
.customer-marquee.cs-customers-ready .customer-track {
  animation: none !important;
  transform: none !important;
  will-change: auto;
  flex-wrap: nowrap;
  gap: 0;
}
.customer-marquee.cs-customers-ready[data-cs-loop="false"] .customer-group[aria-hidden="true"] {
  display: none;
}
.customer-marquee.cs-customers-ready .customer-card {
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  -webkit-user-drag: none;
}
.customer-avatar img {
  border-radius: inherit;
  -webkit-user-drag: none;
}
.customer-marquee.cs-customers-ready:focus-visible {
  outline: 2px solid #91d94a;
  outline-offset: -8px;
}

.customer-avatar {
  overflow: visible;
  transition: box-shadow .3s ease;
}
.customer-avatar::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -5px;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from var(--cs-customer-orbit-angle),
    transparent 0deg 205deg, #6abc0020 230deg, #8de342b3 285deg,
    #e4ffc5 310deg, #91df4e80 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px #8fdf4a80);
  transition: opacity .3s ease;
  animation: cs-customer-orbit 3.6s linear infinite paused;
}
.customer-card:hover .customer-avatar,
.customer-card:focus-visible .customer-avatar {
  box-shadow: 0 14px 34px #0000004d, 0 0 20px #6abc0030;
}
.customer-card:hover .customer-avatar::after,
.customer-card:focus-visible .customer-avatar::after {
  opacity: .85;
  animation-play-state: running;
}
.customer-marquee.is-dragging,
.customer-marquee.is-dragging .customer-card { cursor: grabbing; }
.customer-marquee.is-dragging .customer-card {
  transform: none;
  opacity: 1;
  transition: none;
}
.customer-marquee.is-dragging .customer-avatar::after {
  opacity: 0;
  animation-play-state: paused;
}
@keyframes cs-customer-orbit {
  to { --cs-customer-orbit-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .customer-avatar::after { animation: none !important; }
  .customer-marquee.cs-customers-ready .customer-track { flex-wrap: nowrap; }
}