/*
  MARQUEE SECTION STYLES
  =======================
  A banner with text that scrolls continuously from right to left (or
  left to right), like a news ticker. Pure CSS animation -- no JS needed.
*/

.marquee {
  background-color: #372345d1; /* confirmed real color from settings_data.json */
  color: #ffffff;
  padding: 24px 0; /* top/bottom 24px, matches your real settings; no left/right
                       padding since the scrolling text should span edge-to-edge */
  overflow: hidden; /* hides the parts of the scrolling text sitting outside the screen */
  width: 100%;
}

/*
  THE SCROLLING TRICK, EXPLAINED:
  We can't animate a single line of text scrolling forever -- eventually
  it would run out and leave blank space. Instead, we duplicate the same
  text TWICE, put both copies side by side, then animate the whole pair
  moving left by exactly 50% of its total width. Since the second copy is
  identical to the first, the moment the first copy scrolls off-screen,
  the second copy is in the exact position the first one started in --
  creating the illusion of infinite, seamless scrolling.
*/
.marquee__track {
  display: flex;
  width: fit-content;
  gap: 24px; /* matches your real "gap_between_elements: 24" setting */
  animation: marquee-scroll 20s linear infinite;
}

.marquee__group {
  display: flex;
  gap: 24px;
  flex-shrink: 0; /* prevents the browser from squishing this to fit the screen */
}

.marquee__group span {
  font-family: var(--font-body);
  font-size: 1rem;
  white-space: nowrap; /* keeps "NEW JEWELS COMING SOON!" on one line, never wrapping */
  letter-spacing: -0.02em;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Moves exactly one full copy's-width to the left, then loops */
    transform: translateX(-50%);
  }
}

/* Respect people who've asked their OS/browser to reduce motion
   (an accessibility preference for those sensitive to movement) */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}