/* ==========================================================================
   Ticker  —  Figma "Frame 2147227196" (720:25481)
   1920 x 58 at y 4964, sitting on the grey backdrop.

   Figma lays out three static copies of the phrase separated by a slash
   glyph, gap 72, overflowing the frame on both sides — i.e. a marquee frozen
   at one instant. Rebuilt here as a continuous loop.

   The track holds two identical halves and travels exactly -50%, so the seam
   is invisible whatever the text measures. (A hardcoded pixel shift would
   only line up while the phrase is exactly Figma's 828px, which depends on
   Helvetica Light being present — see assets/fonts/README.md.) The 72px gap
   is applied as margin-right rather than flex `gap` so each unit is
   self-contained and the two halves are exactly equal.
   ========================================================================== */

.marquee {
  top: calc(4964 * var(--s));
  height: calc(58 * var(--s));
  overflow: hidden;
  z-index: 3;
  display: flex;
  align-items: center;
}

.marquee__track {
  display: flex;
  align-items: center;
  flex: none;
  will-change: transform;
  animation: ocularai-marquee var(--marquee-dur, 32s) linear infinite;
}

.marquee__item,
.marquee__sep { margin-right: calc(72 * var(--s)); }

.marquee__item {
  flex: none;
  font-weight: 300;
  font-size: calc(48 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-2.4 * var(--s));
  color: var(--c-mono-dark);
  white-space: nowrap;
}

.marquee__sep {
  flex: none;
  width: calc(24.943 * var(--s));
  height: calc(36 * var(--s));
}

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

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

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

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .marquee { height: 48px; }
  .marquee__item { font-size: 26px; letter-spacing: -0.05em; }
  .marquee__sep { width: 14px; height: 20px; }
  .marquee__item, .marquee__sep { margin-right: 40px; }
}