/* =========================================================
   Marquee CSS
   Romm Coffee — scrolling brand-value strip.

   A single seamless line that scrolls continuously, echoing the
   value strip on the Grind site but re-skinned to the teal brand
   and filled with real Romm facts (from the package). Pure CSS;
   pauses fully under prefers-reduced-motion.

   Works with:
   - Pages/Index.cshtml (.brand-marquee)
   - wwwroot/css/design-tokens.css
========================================================= */

.brand-marquee {
  overflow: hidden;
  background: var(--color-primary, #06515d);
  border-block: 1px solid
    color-mix(in srgb, var(--color-secondary, #649ea1) 45%, transparent);

  /* Fade the edges so items enter/exit softly. */
  -webkit-mask-image: linear-gradient(
    to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(
    to right, transparent, #000 8%, #000 92%, transparent);
}

.brand-marquee-track {
  display: flex;
  width: max-content;
  /* Two identical halves sit end to end; shifting by -50% loops
     seamlessly. */
  animation: brand-marquee-scroll 32s linear infinite;
}

.brand-marquee:hover .brand-marquee-track {
  animation-play-state: paused;
}

.brand-marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.brand-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding-inline: var(--space-5, 1.5rem);
  padding-block: 0.9rem;

  font-family: var(--font-body);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.14em;
  /* Metinler kaynakta zaten büyük harf. text-transform: uppercase KULLANMA —
     Türkçe locale'de "i" harfini "İ"ye çevirip yabancı kelimeleri bozar
     (LİFE / ARABİCA / RİO). Büyük/küçük harf artık kaynakta elle belirlenir. */
  white-space: nowrap;
  color: #f6f8f8;
}

/* Teal-gold bean divider between items — brand accent, no emoji. */
.brand-marquee-item::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent, #c79a4b);
}

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

@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track {
    animation: none;
    /* Center the first group so it reads as a static strip. */
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
  }
}