/* Sagar Patel — interaction layer styles.
   Only what tally.js needs: the timecode rail, the scramble resting state,
   the marquee track, the magnetic transform base. Everything visual reads
   off tokens.css; nothing here invents a colour or a duration. */

/* ================================================================ rail === */

/* Fixed, thin, low-contrast at rest — a piece of edit-bay furniture, not a
   UI control. Decorative only: aria-hidden is set in markup, so nothing here
   needs to account for a screen-reader path. */
[data-tally-rail] {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-2) var(--s-5);
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-soft);
  pointer-events: none;
}

@media (max-width: 64rem) {
  [data-tally-rail] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-tally-rail] { display: none; }
}

[data-tally-clock] {
  font-family: var(--face-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-label);
  color: var(--paper-faint);
}

[data-tally-section] {
  font-family: var(--face-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--paper-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hairline progress track, riding the top edge of the rail. */
[data-tally-rail]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

[data-tally-progress-track] {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line);
}

[data-tally-progress] {
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0%;
  background: var(--tally);
}

/* ============================================================ scramble === */

/* Resting state before the one-shot decode fires: same box, same metrics —
   the glyph swap must not cause any layout shift while it resolves. */
[data-scramble] {
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

/* ============================================================= marquee === */

[data-marquee] {
  display: flex;
  overflow: hidden;
  width: 100%;
}

[data-marquee] > * {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex-shrink: 0;
  animation: tally-marquee var(--motion-ambient) var(--ease-linear) infinite;
  animation-duration: 24s;
}

[data-marquee].is-marquee-ready:hover > * {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  [data-marquee] > * {
    animation: none;
  }
}

/* ============================================================ magnetic === */

[data-magnetic] {
  transition: transform var(--motion-fast) var(--ease-out-soft);
  will-change: transform;
}