/* Wordmark marquee — sits between the hero and the rest of the
 * page like a typographic punctuation. Borrows the editorial
 * "big-text-strip" move from the CLEANER reference. The track
 * scrolls infinitely; we render the content twice and translate
 * the track by exactly half so the seam is invisible. */

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(24px, 4vw, 44px);
  border-block: 1px solid var(--line);
  background: var(--bg-2);
}
.marquee__track {
  display: flex;
  gap: clamp(40px, 6vw, 80px);
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
}
[dir="rtl"] .marquee__track { animation-name: marquee-scroll-rtl; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  font-family: var(--font-en);
  font-weight: 900;
  letter-spacing: -0.025em;
  font-size: clamp(2rem, 5.5vw, 4.4rem);
  line-height: 1;
  color: var(--text-1);
  white-space: nowrap;
}
.marquee__item--ar {
  font-family: var(--font-ar);
  letter-spacing: -0.005em;
  font-weight: 900;
}
.marquee__item .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.marquee__item .ghost {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
}

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