/* ============================================================
   marquee.css — Auto-scrolling announcement ticker.
   Sits directly under the hero. Rendered by js/marquee.js.
   Seamless infinite loop (content is duplicated; track shifts -50%).
   ============================================================ */

.marquee {
  --marquee-accent: #f0b429; /* gold seal color */
  overflow: hidden;
  background-color: #0d0d0d;
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.9rem 0;
  white-space: nowrap;
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* Seal separator between phrases (no flex gap — spacing is baked into
   the separator's margins so the -50% loop stays perfectly seamless) */
.marquee__sep {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0 1.15rem;
  color: var(--marquee-accent);
}
.marquee__sep svg {
  width: 20px;
  height: 20px;
  display: block;
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}