/* /streams hero (Amar Oct 26 call, C14/C15): one light card. The live Data Streams feed (one Jobs, one Tech Stack and one Visitors event)
   and the two places it lands (your CRM by webhook, your AI agents through MCP). Two transitions, played on a gentle loop (anim/streams.js, HAI.cycle: rest ~2.8 s, fade, replay):
   the events land oldest first, then both destinations tick to Delivered. Markup: views/v2/product-miia/anim-streams.ejs.
   Canvas 600 x 328 (340 x 404 on phones), so canvas px are about screen px: nothing under 12px. Brand tokens only (.hxa vars).
   Motion: transform and opacity only, ease-out cubic-bezier(.23,1,.32,1). Default state = the finished frame (no JS, reduced motion).
   Old pipeline styles: 04-build/backups/oct27-amar-oct26-call/public/v2/product-pages/anim/streams.css. */
.hxa[data-page="streams"] .hxa-stage { aspect-ratio: 600 / 368; }
.hxa[data-page="streams"] .hxa-stage > .canvas { width: 600px; height: 368px; }
[data-page="streams"] .canvas { color: var(--ink); font-family: var(--f-body); --eo: cubic-bezier(.23, 1, .32, 1); }
[data-page="streams"] .canvas.rs, [data-page="streams"] .canvas.rs * { transition: none !important; animation: none !important; }
[data-page="streams"] .st :where(p, ol, li) { margin: 0; padding: 0; list-style: none; }
[data-page="streams"] .st :where(i, em) { font-style: normal; }
[data-page="streams"] .st-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

[data-page="streams"] .st { position: absolute; inset: 10px 10px 52px; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--lav); border-radius: 16px; box-shadow: var(--sh-md); }
[data-page="streams"] .st-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-page="streams"] .st-h b { font: 700 16px/20px var(--f-display); white-space: nowrap; }
[data-page="streams"] .st-live { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/16px var(--f-body); color: var(--ink); }
[data-page="streams"] .st-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold300); }
[data-page="streams"] .st-for { margin-left: auto; font: 600 13px/16px var(--f-body); color: var(--slate); white-space: nowrap; }

/* the feed: one row per stream, newest on top */
[data-page="streams"] .st-feed { display: grid; gap: 8px; }
[data-page="streams"] .st-ev { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: var(--mist); }
[data-page="streams"] .st-ev:first-child { background: var(--white); box-shadow: inset 0 0 0 2px var(--gold); }
[data-page="streams"] .st-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--lav); font: 700 12px/16px var(--f-body); color: var(--ink); white-space: nowrap; }
[data-page="streams"] .st-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-page="streams"] .st-acc { display: inline-flex; align-items: center; gap: 6px; min-height: 16px; }
[data-page="streams"] .st-acc b { font: 700 13px/16px var(--f-body); }
[data-page="streams"] .st-acc img { display: block; flex: none; }
[data-page="streams"] .st-wm { height: 12px; width: auto; }
[data-page="streams"] .st-txt { font: 600 14px/18px var(--f-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-page="streams"] .st-when { font: 600 12px/16px var(--f-body); color: var(--slate); white-space: nowrap; }

/* where it lands */
[data-page="streams"] .st-to { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
[data-page="streams"] .st-dest { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--lav); }
[data-page="streams"] .st-dest b { font: 700 14px/18px var(--f-display); white-space: nowrap; }
[data-page="streams"] .st-via { padding: 2px 8px; border-radius: 999px; background: var(--mist); font: 700 12px/16px var(--f-body); color: var(--slate); }
[data-page="streams"] .st-ok { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 700 12px/16px var(--f-body); color: var(--ink); white-space: nowrap; }
[data-page="streams"] .st-ok__i { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: var(--gold); stroke-width: 3; }

/* the two transitions (anim/streams.js): .st-arm = first frame, .st-go = events land, .st-sent = destinations tick */
[data-page="streams"] .st-ev, [data-page="streams"] .st-ok { transition: opacity 420ms var(--eo), transform 420ms var(--eo); }
[data-page="streams"] .canvas.st-arm .st-ev { opacity: 0; transform: translateY(-10px); }
[data-page="streams"] .canvas.st-arm .st-ok { opacity: 0; transform: scale(.92); }
[data-page="streams"] .canvas.st-arm.st-go .st-ev { opacity: 1; transform: none; transition-delay: calc(80ms + (var(--n) - 1 - var(--j)) * 200ms); }
[data-page="streams"] .canvas.st-arm.st-sent .st-ok { opacity: 1; transform: none; transition-duration: 320ms; }

@media (max-width: 767px) {
  .hxa[data-page="streams"] .hxa-stage { aspect-ratio: 340 / 444; }
  .hxa[data-page="streams"] .hxa-stage > .canvas { width: 340px; height: 444px; }
  [data-page="streams"] .st { inset: 4px 4px 44px; padding: 12px; gap: 10px; }
  [data-page="streams"] .st-for { display: none; }
  [data-page="streams"] .st-ev { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 8px; padding: 8px 10px; }
  [data-page="streams"] .st-what { grid-column: 1 / -1; grid-row: 2; }
  [data-page="streams"] .st-txt { white-space: normal; }
  [data-page="streams"] .st-to { grid-template-columns: 1fr; gap: 6px; }
  [data-page="streams"] .st-dest { padding: 8px 10px; }
}
/* Reduced motion: the finished frame, still */
.hxa-reduced [data-page="streams"] .canvas, .hxa-reduced [data-page="streams"] .canvas * { transition: none !important; animation: none !important; }

/* Loop (AK Oct 27 night): HAI.cycle fades the canvas out, re-arms it hidden, fades it back in. Reduced motion shows the finished frame, still. */
[data-page="streams"] .canvas { transition: opacity 300ms var(--eo); }
[data-page="streams"] .canvas.out { opacity: 0; }
/* The pause disc (AK Oct 27 night: the hero loops, so the disc is back) sits in a 40px strip under the card (canvas +40px, card unchanged), so it never covers text. */

/* Nov 5 fix3 (AK: "pause disc attached to the card like on /account-research-agent", no empty bands). The drawing kept a 42px strip under
   the card only to hold the pause disc, so the frame showed an empty band at the bottom with the disc floating in it. Tablet and desktop:
   the strip is gone (canvas 600x326, card inset 10px on every side) and the disc sits in the card's header row, top right, as on
   /buyer-signals, /visitor-id and /account-research-agent. The header keeps 56px clear on its right for it. Phones keep their layout.
   Backup: 04-build/backups/heroes-fix3-nov05/public/v2/product-pages/anim/streams.css */
@media (min-width: 768px) {
  .hxa[data-page="streams"] .hxa-stage { aspect-ratio: 600 / 326; }
  .hxa[data-page="streams"] .hxa-stage > .canvas { height: 326px; }
  [data-page="streams"] .st { inset: 10px; }
  [data-page="streams"] .st-h { padding-right: 56px; }
  .hxa[data-page="streams"] .hxa-pause { top: calc(11.04% - 16px); bottom: auto; right: 4.33%; left: auto; }
}