/* /intent (Intent Scoring) hero (Amar Oct 26 call, C14/C15): one light view. Three sources (Active Visitor ID, Research Bombora,
   Market Buyer Signals) read together as one score, shown as its band on the app's bar (60-72 / 73-79 / 80+), and one line to say.
   Two transitions, played on a gentle loop (anim/intent.js, HAI.cycle: rest ~2.8 s, fade, replay). Markup: views/v2/product-miia/anim-intent.ejs.
   Canvas 600 x 340 (340 x 452 on phones), so canvas px are about screen px: nothing under 12px. Brand tokens only (.hxa vars).
   Motion: transform and opacity only (the pin moves with translateX inside a full-width layer), ease-out cubic-bezier(.23,1,.32,1).
   Default state = the finished frame. Old tour styles: 04-build/backups/oct27-amar-oct26-call/public/v2/product-pages/anim/intent.css. */
.hxa[data-page="intent"] .hxa-stage { aspect-ratio: 600 / 380; }
.hxa[data-page="intent"] .hxa-stage > .canvas { width: 600px; height: 380px; }
[data-page="intent"] .canvas { color: var(--ink); font-family: var(--f-body); --eo: cubic-bezier(.23, 1, .32, 1); }
[data-page="intent"] .canvas.rs, [data-page="intent"] .canvas.rs * { transition: none !important; animation: none !important; }
[data-page="intent"] .in :where(p, ul, li) { margin: 0; padding: 0; list-style: none; }
[data-page="intent"] .in :where(i, em) { font-style: normal; }
[data-page="intent"] .in-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

[data-page="intent"] .in { 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="intent"] .in-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
[data-page="intent"] .in-acc { display: flex; align-items: center; gap: 6px; }
[data-page="intent"] .in-acc b { font: 700 16px/20px var(--f-display); }
[data-page="intent"] .in-logo { display: block; }
[data-page="intent"] .in-for { font: 600 13px/16px var(--f-body); color: var(--slate); white-space: nowrap; }
[data-page="intent"] .in-ref { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 600 12px/16px var(--f-body); color: var(--slate); white-space: nowrap; }
[data-page="intent"] .in-ref .in-i { width: 14px; height: 14px; }

/* the three sources */
[data-page="intent"] .in-src { display: grid; gap: 6px; }
[data-page="intent"] .in-row { display: grid; grid-template-columns: 28px 112px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 10px; background: var(--mist); }
[data-page="intent"] .in-st { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); color: var(--ink); }
[data-page="intent"] .in-who { display: flex; flex-direction: column; }
[data-page="intent"] .in-who b { font: 700 13px/16px var(--f-body); }
[data-page="intent"] .in-who span { font: 600 12px/16px var(--f-body); color: var(--slate); }
[data-page="intent"] .in-what { font: 600 14px/18px var(--f-body); color: var(--ink); min-width: 0; }

/* one score, as a band */
[data-page="intent"] .in-out { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: auto; }
[data-page="intent"] .in-score { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--lav); }
[data-page="intent"] .in-sh { display: flex; align-items: baseline; gap: 8px; }
[data-page="intent"] .in-sh b { font: 700 14px/18px var(--f-display); white-space: nowrap; }
[data-page="intent"] .in-sh span { font: 600 12px/16px var(--f-body); color: var(--slate); white-space: nowrap; }
[data-page="intent"] .in-band { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--gold300); font: 700 12px/16px var(--f-body); color: var(--ink); }
[data-page="intent"] .in-bar { position: relative; display: grid; grid-template-columns: 12fr 7fr 11fr; gap: 3px; height: 10px; }
[data-page="intent"] .in-bar i { display: block; border-radius: 999px; background: var(--lav); }
[data-page="intent"] .in-bar i.s2 { background: var(--gold); }
[data-page="intent"] .in-bar i.s3 { background: var(--lav); }
[data-page="intent"] .in-pin { position: absolute; inset: -5px 0; transform: translateX(var(--v)); pointer-events: none; }
[data-page="intent"] .in-pin::after { content: ""; position: absolute; left: -2px; top: 0; width: 4px; height: 20px; border-radius: 2px; background: var(--ink); box-shadow: 0 0 0 2px var(--white); }
[data-page="intent"] .in-bl { display: grid; grid-template-columns: 12fr 7fr 11fr; gap: 3px; font: 600 12px/16px var(--f-body); color: var(--slate); text-align: center; }
[data-page="intent"] .in-say { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--white); }
[data-page="intent"] .in-say .in-i { color: var(--gold); margin-top: 1px; }
[data-page="intent"] .in-say span { font: 600 13px/18px var(--f-body); text-wrap: pretty; }
[data-page="intent"] .in-say b { display: block; font: 700 12px/16px var(--f-body); color: var(--gold300); }

/* the two transitions (anim/intent.js): .in-arm = first frame, .in-go = sources arrive, .in-sc = pin into its band + line to say */
[data-page="intent"] .in-row, [data-page="intent"] .in-say, [data-page="intent"] .in-band { transition: opacity 380ms var(--eo), transform 380ms var(--eo); }
[data-page="intent"] .in-pin { transition: transform 700ms var(--eo); }
[data-page="intent"] .canvas.in-arm .in-row { opacity: 0; transform: translateY(8px); }
[data-page="intent"] .canvas.in-arm .in-pin { transform: translateX(0); }
[data-page="intent"] .canvas.in-arm .in-say, [data-page="intent"] .canvas.in-arm .in-band { opacity: 0; }
[data-page="intent"] .canvas.in-arm .in-say { transform: translateY(6px); }
[data-page="intent"] .canvas.in-arm.in-go .in-row { opacity: 1; transform: none; transition-delay: calc(80ms + var(--k) * 160ms); }
[data-page="intent"] .canvas.in-arm.in-sc .in-pin { transform: translateX(var(--v)); }
[data-page="intent"] .canvas.in-arm.in-sc .in-band, [data-page="intent"] .canvas.in-arm.in-sc .in-say { opacity: 1; transform: none; transition-delay: 500ms; }

@media (max-width: 767px) {
  .hxa[data-page="intent"] .hxa-stage { aspect-ratio: 340 / 492; }
  .hxa[data-page="intent"] .hxa-stage > .canvas { width: 340px; height: 492px; }
  [data-page="intent"] .in { inset: 4px 4px 44px; padding: 12px; gap: 8px; }
  [data-page="intent"] .in-for { display: none; }
  [data-page="intent"] .in-row { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; padding: 8px 10px; }
  [data-page="intent"] .in-st { grid-row: 1 / span 2; }
  [data-page="intent"] .in-who { flex-direction: row; gap: 6px; }
  [data-page="intent"] .in-out { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
/* Reduced motion: the finished frame, still */
.hxa-reduced [data-page="intent"] .canvas, .hxa-reduced [data-page="intent"] .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="intent"] .canvas { transition: opacity 300ms var(--eo); }
[data-page="intent"] .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 600x338, 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/intent.css */
@media (min-width: 768px) {
  .hxa[data-page="intent"] .hxa-stage { aspect-ratio: 600 / 338; }
  .hxa[data-page="intent"] .hxa-stage > .canvas { height: 338px; }
  [data-page="intent"] .in { inset: 10px; }
  [data-page="intent"] .in-head { padding-right: 56px; }
  .hxa[data-page="intent"] .hxa-pause { top: calc(10.65% - 16px); bottom: auto; right: 4.33%; left: auto; }
}