/* ─────────────────────────────────────────────────────────────────────
   Barroco Infinite Scroll  ·  frontend.css  ·  v1.0.0
   ───────────────────────────────────────────────────────────────────── */

/* ── Keyframes ──────────────────────────────────────────────────────── */

@keyframes bis-scroll-left {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

@keyframes bis-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0);    }
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.barroco-scroll-wrapper {
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  width:          100%;
  gap:            15px; /* default; overridden per instance by Elementor */
}

.barroco-scroll-row {
  overflow: hidden;
  display:  flex;
  width:    100%;
}

.barroco-scroll-track {
  display:        flex;
  flex-wrap:      nowrap;
  will-change:    transform;
  /* animation applied via data attribute below */
}

/* Direction-based animation ───────────────────────── */

.barroco-scroll-row[data-direction="left"]  .barroco-scroll-track {
  animation: bis-scroll-left  var(--bis-speed, 30s) linear infinite;
}

.barroco-scroll-row[data-direction="right"] .barroco-scroll-track {
  animation: bis-scroll-right var(--bis-speed, 30s) linear infinite;
}

/* Pause on hover (toggled via .bis-pause-hover on wrapper) ─────────── */

.bis-pause-hover .barroco-scroll-row:hover .barroco-scroll-track {
  animation-play-state: paused;
}

/* Reduced-motion accessibility ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .barroco-scroll-track {
    animation: none !important;
  }
}

/* ── Scroll Group ───────────────────────────────────────────────────── */

.barroco-scroll-group {
  display:      flex;
  flex-wrap:    nowrap;
  align-items:  center;
  flex-shrink:  0;
  /*
   * gap     → spacing between pills within the group
   * padding-right → spacing at the group boundary so the junction gap
   *                 between the two groups matches the inter-pill gap.
   * Both values are kept in sync by the Elementor "Gap Between Pills"
   * control selector.  These defaults mirror the Figma design.
   */
  gap:           22px;
  padding-right: 22px;
}

/* ── Pill ────────────────────────────────────────────────────────────── */

.barroco-pill {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  border-radius:   100px;   /* default pill shape; overridden by Elementor */
  padding:         10px 30px;
  white-space:     nowrap;
  flex-shrink:     0;
  text-decoration: none;
  color:           inherit;
  cursor:          default;
  transition:      opacity 0.15s ease;
  /* Performance hint for GPU compositing */
  backface-visibility: hidden;
}

a.barroco-pill {
  cursor: pointer;
}

a.barroco-pill:hover {
  opacity: 0.75;
}

.barroco-pill-text {
  /* Base typography – overridden by Elementor Typography control */
  font-size:      18px;
  font-weight:    500;
  line-height:    1;
  color:          #1b1b1b;
  text-transform: uppercase;
  letter-spacing: 0;
  pointer-events: none; /* let the pill element handle click events */
}

/* ── Elementor Editor ────────────────────────────────────────────────── */

/* Ensure animation plays in the editor preview panel */
.elementor-editor-active .barroco-scroll-track,
.elementor-edit-mode      .barroco-scroll-track {
  animation-play-state: running !important;
}