/* ======================================================================
   Paslaugos carousel — original nomads.lt look
   - Simple white card → solid primary on hover (matches Tailwind classes
     in the markup: hover:bg-primary hover:border-primary transition-colors)
   - One subtle animated background layer that sweeps in on hover
   - Drag-to-scroll on desktop, native swipe on touch
   ====================================================================== */

.carousel-viewport {
  overflow: hidden;
  position: relative;
}

/* Subtle edge fades so off-screen slides feel intentional, not cropped */
.carousel-viewport::before,
.carousel-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.carousel-viewport::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.carousel-viewport::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.carousel-viewport.has-overflow-start::before { opacity: 1; }
.carousel-viewport.has-overflow-end::after { opacity: 1; }

/* The horizontally-scrolling track */
.carousel-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Allow horizontal swipe to scroll the carousel AND vertical swipe to
     scroll the page. Without `pan-x`, touch devices ignore horizontal
     gestures here and the carousel feels "stuck". */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* While the user is actively dragging, disable snap so motion is 1:1 */
.carousel-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.carousel-track.is-dragging .carousel-slide,
.carousel-track.is-dragging .carousel-slide * {
  pointer-events: none;
}

/* Slide base — keep the markup's Tailwind classes intact (white card,
   dark border, hover:bg-primary). We just add scroll-snap + smoother
   transitions and an extra animated background layer. */
.carousel-track .carousel-slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  isolation: isolate;
  /* Smoother color transition than the default Tailwind 150ms */
  transition: background-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-color    0.55s cubic-bezier(0.22, 1, 0.36, 1),
              color           0.45s ease,
              box-shadow      0.5s  cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animated background layer: a soft radial sheen that grows from the
   bottom-left into the card on hover. Sits above the bg-color but below
   the Binary_001 image and the text. */
.carousel-track .carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 0% 100%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.06) 40%,
      rgba(255, 255, 255, 0)    70%),
    linear-gradient(135deg,
      rgba(255, 255, 255, 0)    0%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0)    100%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0% 100%, -60% -60%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              background-position 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: screen;
}
.carousel-track .carousel-slide:hover::before {
  opacity: 1;
  background-position: 100% 0%, 100% 100%;
}

/* The Binary_001.webp already fades in via Tailwind's
   opacity-0/group-hover:opacity-100 + transition-all. We just smooth the
   curve and make sure it sits behind text but above the bg. */
.carousel-track .carousel-slide > img {
  z-index: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* Prev / next buttons — subtle hover */
[data-carousel-prev],
[data-carousel-next] {
  transition: background-color 0.25s ease,
              color 0.25s ease,
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
[data-carousel-prev]:hover,
[data-carousel-next]:hover {
  background-color: #1f2333;
  color: #ffffff;
  transform: translateY(-1px);
}
[data-carousel-prev][disabled],
[data-carousel-next][disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .carousel-track .carousel-slide,
  .carousel-track .carousel-slide::before,
  .carousel-track .carousel-slide > img {
    transition: none !important;
  }
  .carousel-track { scroll-behavior: auto; }
}

/* Client logos: reveal one by one as they load */
[data-client-logos] .client-logo {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
[data-client-logos] .client-logo.revealed {
  opacity: 1;
  transform: translateY(0);
}