/* Live market strip for the landing page: a looping marquee. Reuses the landing tokens
   (--up/--down/--hover/--chrome) and only adds the motion and updated state, so it inherits the
   "Studio · Kaolin" theme. Motion is disabled under `prefers-reduced-motion`. */
.tape .q .p { font-variant-numeric: tabular-nums; }

/* Edge fades as static gradient overlays rather than a `mask`, so the moving content is not
   re-masked on every frame (the previous source of jank). */
.tape .quotes { position: relative; -webkit-mask-image: none; mask-image: none; }
.tape .quotes::before,
.tape .quotes::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
}
.tape .quotes::before { inset-inline-start: 0; background: linear-gradient(to right, var(--chrome), transparent); }
.tape .quotes::after { inset-inline-end: 0; background: linear-gradient(to left, var(--chrome), transparent); }
[dir="rtl"] .tape .quotes::before { background: linear-gradient(to left, var(--chrome), transparent); }
[dir="rtl"] .tape .quotes::after { background: linear-gradient(to right, var(--chrome), transparent); }

.tape .track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 34px;
}
/* Added by the renderer once the sequence is duplicated, so a no-JS view shows a static row.
   `translate3d` promotes the track to its own compositor layer for smooth motion. */
.tape .track.is-marquee {
  animation: tape-scroll var(--tape-dur, 60s) linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
/* Keep both halves identical (the base rule zeroes the first cell's start padding) for a seamless loop. */
.tape .track .q:first-child { padding-inline-start: 16px; }
.tape .quotes:hover .track.is-marquee { animation-play-state: paused; }

@keyframes tape-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.tape .q.fu, .tape .q.fd { animation: tape-flash 0.7s ease; }
@keyframes tape-flash { from { background: var(--hover); } to { background: transparent; } }

/* Right-to-left pages scroll the other way. */
[dir="rtl"] .tape .track.is-marquee { animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .tape .track.is-marquee { animation: none; }
  .tape .q.fu, .tape .q.fd { animation: none; }
}