/* /enrichments (Context Enrich) hero (Amar Oct 26 call, C14/C15): one light card with the buyer context your AI agent gets for one
   person (style bars, what to lead with, one live signal) and the accuracy gap against a general LLM (bars). Two transitions, played
   on a gentle loop (anim/enrichments.js, HAI.cycle: rest ~2.8 s, fade, replay). Markup: views/v2/product-miia/anim-enrichments.ejs.
   Canvas 600 x 344 (340 x 440 on phones), so canvas px are about screen px: nothing under 12px. Brand tokens only (.hxa vars).
   Motion: transform and opacity only (bars grow with scaleX), ease-out cubic-bezier(.23,1,.32,1). Default state = the finished frame.
   Old camera-tour styles: 04-build/backups/oct27-amar-oct26-call/public/v2/product-pages/anim/enrichments.css. */
.hxa[data-page="enrichments"] .hxa-stage { aspect-ratio: 600 / 384; }
.hxa[data-page="enrichments"] .hxa-stage > .canvas { width: 600px; height: 384px; }
[data-page="enrichments"] .canvas { color: var(--ink); font-family: var(--f-body); --eo: cubic-bezier(.23, 1, .32, 1); }
[data-page="enrichments"] .canvas.rs, [data-page="enrichments"] .canvas.rs * { transition: none !important; animation: none !important; }
[data-page="enrichments"] .ce :where(p) { margin: 0; }
[data-page="enrichments"] .ce :where(i, em) { font-style: normal; }

[data-page="enrichments"] .ce { position: absolute; inset: 10px 10px 52px; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--white); border: 1px solid var(--lav); border-radius: 16px; box-shadow: var(--sh-md); }
[data-page="enrichments"] .ce-top { display: flex; align-items: center; gap: 8px; }
[data-page="enrichments"] .ce-lab { font: 700 16px/20px var(--f-display); }
[data-page="enrichments"] .ce-via { display: flex; gap: 6px; margin-left: auto; }
[data-page="enrichments"] .ce-via em { padding: 2px 10px; border-radius: 999px; background: var(--lav); font: 700 12px/16px var(--f-body); color: var(--ink); }
[data-page="enrichments"] .ce-who { display: flex; align-items: center; gap: 10px; }
[data-page="enrichments"] .ce-av { display: block; width: 32px; height: 32px; flex: none; }
[data-page="enrichments"] .ce-av svg { display: block; width: 100%; height: 100%; }
[data-page="enrichments"] .ce-who p { display: flex; flex-direction: column; min-width: 0; }
[data-page="enrichments"] .ce-who b { font: 700 15px/19px var(--f-display); }
[data-page="enrichments"] .ce-who span { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/17px var(--f-body); color: var(--slate); }
[data-page="enrichments"] .ce-who img { display: block; }

/* the context rows */
[data-page="enrichments"] .ce-rows { display: grid; gap: 6px; }
[data-page="enrichments"] .ce-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 36px; padding: 6px 12px; border-radius: 10px; background: var(--mist); }
[data-page="enrichments"] .ce-k { font: 700 13px/16px var(--f-body); color: var(--slate); }
[data-page="enrichments"] .ce-v { font: 600 14px/18px var(--f-body); color: var(--ink); min-width: 0; }
[data-page="enrichments"] .ce-disc { display: flex; align-items: center; gap: 10px; }
[data-page="enrichments"] .ce-d { display: flex; align-items: center; gap: 4px; }
[data-page="enrichments"] .ce-d b { width: 10px; font: 700 12px/16px var(--f-body); }
[data-page="enrichments"] .ce-d .ce-track { width: 40px; }
[data-page="enrichments"] .ce-type { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--gold300); font: 700 12px/16px var(--f-body); white-space: nowrap; }
[data-page="enrichments"] .ce-track { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); overflow: hidden; }
[data-page="enrichments"] .ce-track i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 999px; background: var(--lav); transform-origin: left center; }
[data-page="enrichments"] .ce-track i.hi { background: var(--gold); }
[data-page="enrichments"] .ce-track i.mid { background: var(--gold300); box-shadow: inset 0 0 0 1px var(--gold); }

/* the accuracy gap */
[data-page="enrichments"] .ce-acc { display: grid; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--lav); }
[data-page="enrichments"] .ce-acc__h { font: 700 13px/16px var(--f-body); color: var(--slate); }
[data-page="enrichments"] .ce-bar { display: grid; grid-template-columns: 136px minmax(0, 1fr) 72px; align-items: center; gap: 10px; font: 600 13px/16px var(--f-body); }
[data-page="enrichments"] .ce-bar b { font: 700 13px/16px var(--f-body); text-align: right; font-variant-numeric: tabular-nums; }
[data-page="enrichments"] .ce-bar .ce-track { height: 10px; }
[data-page="enrichments"] .ce-bar--us .ce-track i { background: var(--gold); }
[data-page="enrichments"] .ce-bar:not(.ce-bar--us) span:first-child { color: var(--slate); }

/* the two transitions (anim/enrichments.js): .ce-arm = first frame, .ce-go = rows + style bars, .ce-acc-on = accuracy bars */
[data-page="enrichments"] .ce-row { transition: opacity 360ms var(--eo), transform 360ms var(--eo); }
[data-page="enrichments"] .ce-track i { transition: transform 600ms var(--eo); }
[data-page="enrichments"] .canvas.ce-arm .ce-row { opacity: 0; transform: translateY(8px); }
[data-page="enrichments"] .canvas.ce-arm .ce-track i { transform: scaleX(0); }
[data-page="enrichments"] .canvas.ce-arm.ce-go .ce-row { opacity: 1; transform: none; transition-delay: calc(var(--k) * 120ms); }
[data-page="enrichments"] .canvas.ce-arm.ce-go .ce-disc .ce-track i { transform: none; transition-delay: calc(200ms + var(--k) * 60ms); }
[data-page="enrichments"] .canvas.ce-arm.ce-acc-on .ce-bar .ce-track i { transform: none; }

@media (max-width: 767px) {
  .hxa[data-page="enrichments"] .hxa-stage { aspect-ratio: 340 / 480; }
  .hxa[data-page="enrichments"] .hxa-stage > .canvas { width: 340px; height: 480px; }
  [data-page="enrichments"] .ce { inset: 4px 4px 44px; padding: 12px; gap: 8px; }
  [data-page="enrichments"] .ce-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 10px; }
  [data-page="enrichments"] .ce-disc { flex-wrap: wrap; gap: 6px 10px; }
  [data-page="enrichments"] .ce-d .ce-track { width: 34px; }
  [data-page="enrichments"] .ce-type { margin-left: 0; }
  [data-page="enrichments"] .ce-bar { grid-template-columns: minmax(0, 1fr) 72px; gap: 4px 10px; }
  [data-page="enrichments"] .ce-bar .ce-track { grid-column: 1 / -1; grid-row: 2; }
  [data-page="enrichments"] .ce-bar b { grid-row: 1; grid-column: 2; }
}
/* Reduced motion: the finished frame, still */
.hxa-reduced [data-page="enrichments"] .canvas, .hxa-reduced [data-page="enrichments"] .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="enrichments"] .canvas { transition: opacity 300ms var(--eo); }
[data-page="enrichments"] .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 600x342, 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/enrichments.css */
@media (min-width: 768px) {
  .hxa[data-page="enrichments"] .hxa-stage { aspect-ratio: 600 / 342; }
  .hxa[data-page="enrichments"] .hxa-stage > .canvas { height: 342px; }
  [data-page="enrichments"] .ce { inset: 10px; }
  [data-page="enrichments"] .ce-top { padding-right: 56px; }
  .hxa[data-page="enrichments"] .hxa-pause { top: calc(10.53% - 16px); bottom: auto; right: 4.33%; left: auto; }
}