/* The landing's original 4 x 22px neon strips; buttons add only a hit area. */
.carousel-neon-frame { position: relative; min-width: 0; --carousel-violet: var(--landing-violet); --carousel-blue: var(--landing-blue); }
.carousel-neon-marker, .carousel-neon-control::before {
  width: 4px; height: 22px; border-radius: 999px;
  background: linear-gradient(180deg, var(--carousel-violet), var(--carousel-blue));
  box-shadow: 0 0 7px rgba(113, 56, 240, .55), 0 0 12px rgba(25, 136, 247, .24);
  animation: carousel-swipe-pulse 2.4s ease-in-out infinite;
}
.carousel-neon-marker { position: absolute; top: 50%; z-index: 6; pointer-events: none; transform: translateY(-50%); }
.carousel-neon-control {
  position: absolute; top: 50%; z-index: 6; display: grid; place-items: center;
  width: 28px; height: 52px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity 180ms ease;
}
.carousel-neon-control::before { content: ""; }
.carousel-neon-control-prev { left: -10px; }
.carousel-neon-control-next { right: -10px; }
.carousel-neon-frame:hover .carousel-neon-control, .carousel-neon-frame:focus-within .carousel-neon-control { opacity: 1; }
.carousel-neon-control:focus-visible { opacity: 1; outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.carousel-neon-frame.is-not-cyclic .carousel-neon-marker, .carousel-neon-frame.is-not-cyclic .carousel-neon-control { visibility: hidden; }
.carousel-neon-frame .carousel-cyclic-track.is-repositioning,
.carousel-neon-frame .carousel-cyclic-track.is-dragging,
.carousel-neon-frame .carousel-cyclic-track.is-navigating { scroll-snap-type: none; }
@keyframes carousel-swipe-pulse { 0%, 100% { opacity: .34; } 50% { opacity: .78; } }
@media (hover: none), (pointer: coarse), (max-width: 767px) { .carousel-neon-control { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .carousel-neon-control { transition: none; }
  .carousel-neon-marker, .carousel-neon-control::before { animation: none; }
}
@media (forced-colors: active) {
  .carousel-neon-marker, .carousel-neon-control::before { background: ButtonText; box-shadow: none; }
}