/* Activity Pulse — ambient "someone is doing X" terminal ticker, sitting right under the
   About These Listings note (Sean, 2026-07-13: "have them go across under the About these
   listings! from side to side and disapear at the end of the frame. use a nerdy terminal
   font and a terminal green color." / "i mean instead of up the side" / "could you make
   the text flicker" / "try light blue text that flickers like a theatrical terminal
   isntead of green" — replaces every earlier pass of this feature, which drifted upward
   along the left edge of the page). No visible panel/chrome — text sits directly on the
   page, same "no visible panel" spirit as every prior version. Scrolls with the page (not
   position:fixed) since it's now docked under a specific section rather than pinned to
   the viewport edge.

   History, for context: started as a grey left-edge upward drift, went through purple text
   + full-page-height drift + a purple->blue->background color dissolve, then several rounds
   of size/opacity tuning after Sean found it overhanging the event cards — that whole vertical
   design is superseded by this horizontal ticker, not layered on top of it. */

#activity-rail {
  position: relative;
  width: 100%;
  max-width: var(--maxw);   /* 2026-07-13 fix (Sean): rail previously spanned the full body width
                               (no cap), which on wide screens is much wider than the actual content
                               column (.site-header/.controls both cap at --maxw). That meant the
                               ticker crawled through empty page margins well outside "the action" —
                               capping + centering it here so it enters/exits right at the same edges
                               as everything else on the page. */
  margin: 2px auto 4px;
  height: calc(2 * 22px);   /* up to 2 concurrent ticker lines — see ROW_HEIGHT_PX/MAX_VISIBLE in
                               activity-pulse.js. Halved from 4 rows (2026-07-13, Sean: "the filters
                               bar could be brought up... half the distance of space between the
                               two") — this empty-most-of-the-time rail was the single biggest
                               contributor to the gap above the controls bar. */
  overflow: hidden;         /* the "disapear at the end of the frame" clip — no fade-out needed */
  pointer-events: none;     /* purely ambient — never intercepts clicks on the page underneath */
}

/* Each message is an independent absolutely-positioned line crawling right-to-left across
   the full width of the rail. JS assigns each one a starting "row" (via inline `top`) so up
   to 2 concurrently-visible messages run on separate lines instead of overlapping.

   Two separate animations run in parallel on different properties so they don't fight each
   other: activity-crawl moves it (transform only), activity-flicker handles visibility
   (opacity only) — a CRT/terminal-style flicker-on at the start plus a couple of stutters
   mid-crawl, rather than a smooth smooth fade. */
.activity-msg {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;   /* a ticker line, not a wrapped paragraph */
  font-family: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #8fd6ff;   /* light blue, "theatrical terminal" per Sean's 2026-07-13 follow-up (was terminal green) */
  text-shadow: 0 0 6px rgba(143, 214, 255, .55), 0 0 1px rgba(143, 214, 255, .9);   /* faint CRT glow */
  opacity: 0;
  animation:
    activity-crawl 15s linear forwards,
    activity-flicker 15s steps(1, end) forwards;
  will-change: transform, opacity;
}

/* Right-to-left crawl: enters just off the right edge of the rail, crosses the full width,
   and exits off the left edge — #activity-rail's overflow:hidden does the actual "disappear
   at the end of the frame," this just moves it there.

   2026-07-13 fix (Sean: "make it appear closer to the edge of all of the action and end it
   the same way on the other side"): previously used vw units (100vw / -110vw), sized to the
   full browser viewport rather than the rail's own (now capped at --maxw) width. On any
   screen wider than --maxw that meant the message actually started/ended far out past the
   rail's real edges, deep in the empty page margins — "closer to the edge" fixes that by
   tying the crawl distance to --maxw (the rail's own width) instead, so entry lands exactly
   at the rail's right edge and exit is the same distance past its left edge, symmetrically,
   regardless of how wide the browser window is. */
@keyframes activity-crawl {
  0%   { transform: translateX(var(--maxw)); }
  100% { transform: translateX(calc(var(--maxw) * -1.1)); }
}

/* Terminal flicker: powers on unevenly (like an old CRT/terminal line lighting up) instead
   of a clean fade-in, then a couple of brief stutters partway through the crawl. steps(1,end)
   above makes each keyframe jump snap instead of smoothly tween, for an authentic flicker
   rather than a pulse. */
@keyframes activity-flicker {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  4%   { opacity: .2; }
  6%   { opacity: 1; }
  8%   { opacity: .4; }
  10%  { opacity: 1; }
  38%  { opacity: 1; }
  39%  { opacity: .3; }
  40%  { opacity: 1; }
  64%  { opacity: 1; }
  65%  { opacity: .5; }
  66%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Reduced motion: same lifetime (enforced in JS regardless), but a calm appear/fade in
   place at the message's assigned row — no crawl, no flicker (vestibular-safety default). */
@media (prefers-reduced-motion: reduce) {
  .activity-msg {
    animation: activity-ticker-fade 15s ease-in-out forwards;
    left: 0;
    transform: none;
  }
}
@keyframes activity-ticker-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 640px) {
  #activity-rail { height: calc(2 * 18px); }
  .activity-msg { font-size: 0.7rem; }
}