/* ─────────────────────────────────────────
   css/marquee.css
───────────────────────────────────────── */

.marquee {
  background: var(--deep-rose);
  padding: 15px 0;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  white-space: nowrap;
  animation: marqueeScroll 26s linear infinite;
}

.marquee__track:hover { animation-play-state: paused; }

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

.marquee__item {
  font-family: var(--font-display);
  font-size: 16px; font-style: italic;
  color: var(--petal); padding: 0 52px;
  opacity: 0.88; flex-shrink: 0;
}

.marquee__dot {
  font-style: normal;
  opacity: 0.4;
}