/**
 * Vazir Bricks Extras — Logo Marquee
 *
 * No CSS keyframe animation — JS (rAF) handles all movement.
 * Layout is always LTR so JS math stays consistent.
 *
 * Hover effects:
 *   grayscale → logos are gray by default, colorful on hover
 *   dim       → logos are semi-transparent by default, fully opaque on hover
 *   lift      → logos lift up + scale on hover
 */

/* ==========================================================================
   1. Root
   ========================================================================== */

.vbe-logo-marquee {
  --vbe-lm-gap:        32px;
  --vbe-lm-height:     64px;
  --vbe-lm-max-width:  200px;

  position: relative;
  width: 100%;
}

.vbe-logo-marquee:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   2. Viewport (clip box)
   ========================================================================== */

.vbe-logo-marquee__viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* LTR so flexbox always flows left → right regardless of page direction */
  direction: ltr;
}

/* ==========================================================================
   3. Rail (the moving strip)
   ========================================================================== */

.vbe-logo-marquee__rail {
  display:     flex;
  align-items: center;
  flex-wrap:   nowrap;
  gap:         var(--vbe-lm-gap); /* gap between sets (same as between logos) */
  direction:   ltr;               /* ensure consistent coordinate space for JS */
  width:       max-content;
  will-change: transform;
}

/* ==========================================================================
   4. Logo set (one copy of the logo list)
   ========================================================================== */

.vbe-logo-marquee__set {
  margin:      0;
  padding:     0;
  list-style:  none;
  display:     flex;
  align-items: center;
  flex-wrap:   nowrap;
  flex-shrink: 0;
  gap:         var(--vbe-lm-gap);
}

/* ==========================================================================
   5. Individual logo slot
   ========================================================================== */

.vbe-logo-marquee__logo {
  flex:            0 0 auto;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       40px;
}

/* ==========================================================================
   6. Logo image
   ========================================================================== */

.vbe-logo-marquee__image {
  display:    block;
  height:     var(--vbe-lm-height);
  width:      auto;           /* natural width at the given height */
  max-width:  var(--vbe-lm-max-width);
  object-fit: contain;
  /* All effects are transitions on filter / opacity / transform */
  transition: filter 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
}

/* ==========================================================================
   7. Hover effects
   ========================================================================== */

/* — grayscale: images are gray by default, reveal color on hover — */
.vbe-logo-marquee--effect-grayscale .vbe-logo-marquee__image {
  filter: grayscale(100%) opacity(0.65);
}
.vbe-logo-marquee--effect-grayscale .vbe-logo-marquee__logo:hover       .vbe-logo-marquee__image,
.vbe-logo-marquee--effect-grayscale .vbe-logo-marquee__logo:focus-within .vbe-logo-marquee__image {
  filter: grayscale(0%) opacity(1);
}

/* — dim: images are semi-transparent by default, fully visible on hover — */
.vbe-logo-marquee--effect-dim .vbe-logo-marquee__image {
  opacity: 0.45;
}
.vbe-logo-marquee--effect-dim .vbe-logo-marquee__logo:hover       .vbe-logo-marquee__image,
.vbe-logo-marquee--effect-dim .vbe-logo-marquee__logo:focus-within .vbe-logo-marquee__image {
  opacity: 1;
}

/* — lift: logo lifts up and scales slightly on hover — */
.vbe-logo-marquee--effect-lift .vbe-logo-marquee__logo:hover       .vbe-logo-marquee__image,
.vbe-logo-marquee--effect-lift .vbe-logo-marquee__logo:focus-within .vbe-logo-marquee__image {
  transform: translateY(-5px) scale(1.07);
}

/* ==========================================================================
   8. Empty state
   ========================================================================== */

.vbe-logo-marquee__empty {
  padding:         20px 24px;
  color:           #6b7280;
  font-size:       13px;
  white-space:     nowrap;
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      var(--vbe-lm-height);
  direction:       rtl;
}

/* ==========================================================================
   9. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .vbe-logo-marquee__rail {
    /* JS checks this media query and won't start the rAF loop,
       but if JS somehow runs, freeze the rail in place */
    transform: translate3d(0, 0, 0) !important;
  }
  .vbe-logo-marquee__image {
    transition: none !important;
  }
}