/* /pi hero v4 (Krish review Oct 20, plan item 3): a camera walkthrough of the Agent Pi profile dashboard. Markup:
   views/v2/product-miia/anim-pi.ejs. Storyboard + camera: anim/pi.js (run.js HAI.seq, data-z on the canvas).
   Canvas 600 x 344 (288 x 384 on phones; the foot strip under the window holds the Sample data caption), scaled into the hero box by run.js. Inside it a window (app rail + viewport); the
   viewport holds .pz-world, the dashboard, which the camera moves with ONE transform (translate + scale, set by pi.js).
   Type: every word in the world is 16.5px or more, so it renders at 12px or more in the zoomed-out overview (scale .771 x box
   .96 at 1280; .8 on phones). Brand tokens only (.hxa vars), Cabinet Grotesk + Manrope.
   Motion (AK, Oct 20: one area moves at a time): the camera moves alone (zoom in 820 ms, zoom out 680 ms, ease-in-out); only
   after it lands does the focused section light up (ring, then its excerpt, items one after another); the light goes before the
   camera leaves. Transform and opacity only. Reduced motion: the whole dashboard, still. */
.hxa[data-page="pi"] .hxa-stage { aspect-ratio: 600 / 344; }
.hxa[data-page="pi"] .hxa-stage > .canvas { width: 600px; height: 344px; }
[data-page="pi"] .canvas { color: var(--ink); font-family: var(--f-body); transition: opacity 240ms ease; }
[data-page="pi"] .canvas.out { opacity: 0; }
[data-page="pi"] .canvas.rs, [data-page="pi"] .canvas.rs * { transition: none !important; }
[data-page="pi"] .pz :where(p, ul, ol, li) { margin: 0; padding: 0; list-style: none; }
[data-page="pi"] .pz :where(i, em) { font-style: normal; }
[data-page="pi"] .pz-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Window: the app's left rail (People on) and the viewport the camera looks through */
[data-page="pi"] .pz *, [data-page="pi"] .pz { box-sizing: border-box; }
[data-page="pi"] .pz { position: absolute; inset: 8px 8px 26px; display: grid; grid-template-columns: 52px minmax(0, 1fr); overflow: hidden; background: var(--white); border: 1px solid var(--lav); border-radius: 16px; box-shadow: var(--sh-md); }
[data-page="pi"] .pz-rail { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; background: var(--white); box-shadow: 1px 0 0 var(--lav); }
[data-page="pi"] .pz-mark { width: 22px; height: 22px; margin-bottom: 8px; }
[data-page="pi"] .pz-rail i { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 9px; color: var(--slate); }
[data-page="pi"] .pz-rail i .pz-i { width: 16px; height: 16px; stroke-width: 1.9; }
[data-page="pi"] .pz-rail i.on { background: var(--mist); color: var(--ink); box-shadow: inset 0 0 0 1px var(--lav); }
[data-page="pi"] .pz-vp { position: relative; overflow: hidden; background: var(--mist); }

/* The dashboard (world). Desktop 690 x 390, two rows of three sections like the profile page (Oct 20: Media appearances is the sixth). The camera owns its transform. */
[data-page="pi"] .pz-world { position: absolute; left: 0; top: 0; width: 690px; padding: 12px; transform-origin: 0 0; transform: translate(0, 2px) scale(.771);
  transition: transform 1230ms cubic-bezier(.65, 0, .35, 1); } /* Oct 27: 1.5x slower (Amar's to-do), was 820ms */
[data-page="pi"] .canvas[data-z="all"] .pz-world { transition-duration: 1020ms; }
[data-page="pi"] .pz-head { display: flex; align-items: center; gap: 14px; height: 46px; margin-bottom: 10px; }
[data-page="pi"] .pz-av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold300); font: 800 17px/1 var(--f-body); color: var(--ink); }
[data-page="pi"] .pz-who { display: grid; min-width: 0; }
[data-page="pi"] .pz-who b { font: 700 24px/28px var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
[data-page="pi"] .pz-who span { font: 600 16.5px/22px var(--f-body); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-page="pi"] .pz-tags { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
[data-page="pi"] .pz-st { padding: 4px 14px; border-radius: 999px; background: var(--lav); font: 800 16.5px/22px var(--f-body); }
[data-page="pi"] .pz-dc { display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--gold); font: 700 18px/1 var(--f-display); }

[data-page="pi"] .pz-grid { display: grid; gap: 12px; }
[data-page="pi"] .pz-row { display: flex; gap: 14px; }
[data-page="pi"] .pz-row--a { height: 136px; }
[data-page="pi"] .pz-row--b { height: 162px; }
[data-page="pi"] .pz-c--fact { width: 236px; } [data-page="pi"] .pz-c--disc { width: 210px; } [data-page="pi"] .pz-c--talk { width: 192px; }
[data-page="pi"] .pz-c--call { width: 183px; } [data-page="pi"] .pz-c--team { width: 243px; } [data-page="pi"] .pz-c--media { width: 212px; }
[data-page="pi"] .pz-c { position: relative; display: flex; flex: none; flex-direction: column; min-width: 0; padding: 12px 12px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav), var(--sh-sm); }
/* focus ring: drawn after the camera lands, gone before it leaves */
[data-page="pi"] .pz-c::after { content: ""; position: absolute; inset: -1px; border-radius: 17px; box-shadow: 0 0 0 3px var(--gold); opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
[data-page="pi"] .canvas.f-fact .pz-c--fact::after, [data-page="pi"] .canvas.f-disc .pz-c--disc::after, [data-page="pi"] .canvas.f-talk .pz-c--talk::after,
[data-page="pi"] .canvas.f-call .pz-c--call::after, [data-page="pi"] .canvas.f-team .pz-c--team::after, [data-page="pi"] .canvas.f-media .pz-c--media::after { opacity: 1; transition-duration: 240ms; }
[data-page="pi"] .pz-c--team .pz-lab, [data-page="pi"] .pz-c--call .pz-lab, [data-page="pi"] .pz-c--media .pz-lab { margin-bottom: 6px !important; }
[data-page="pi"] .pz-lab { margin-bottom: 8px !important; font: 800 16.5px/20px var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }

/* 1 Public overview: one fun fact; the gold marker sweeps behind it once the camera is in */
[data-page="pi"] .pz-chip { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--lav); font: 800 16.5px/22px var(--f-body); }
[data-page="pi"] .pz-fact { position: relative; margin-top: 8px !important; font: 700 17.5px/24px var(--f-body); text-wrap: pretty; }
[data-page="pi"] .pz-fact span { position: relative; }
[data-page="pi"] .pz-fact::before { content: ""; position: absolute; inset: -3px -6px; border-radius: 8px; background: var(--gold300); transform: scaleX(0); transform-origin: 0 50%; transition: transform 780ms var(--ease-out); }
[data-page="pi"] .canvas.x-fact .pz-fact::before { transform: none; }

/* 2 DISC: the wheel; once the camera is in, D and I fill gold, then the type reads */
[data-page="pi"] .pz-disc { display: flex; align-items: center; gap: 14px; }
[data-page="pi"] .pz-wheel { width: 76px; height: 76px; flex: none; }
[data-page="pi"] .pz-q { fill: var(--lav); stroke: var(--white); stroke-width: 2; }
[data-page="pi"] .pz-qh { stroke: var(--white); stroke-width: 2; opacity: 0; transition: opacity 240ms ease; }
[data-page="pi"] .pz-qh--d { fill: var(--gold); }
[data-page="pi"] .pz-qh--i { fill: var(--gold300); transition-delay: 0ms; }
[data-page="pi"] .canvas.x-disc .pz-qh--d { opacity: 1; }
[data-page="pi"] .canvas.x-disc2 .pz-qh--i { opacity: 1; }
[data-page="pi"] .pz-type { display: grid; }
[data-page="pi"] .pz-type b { font: 700 32px/34px var(--f-display); }
[data-page="pi"] .pz-type span { font: 700 16.5px/22px var(--f-body); color: var(--slate); transition: color 200ms ease; }
[data-page="pi"] .canvas.x-disc3 .pz-type span { color: var(--ink); }

/* 3 Talking points: the number tiles turn gold one after another */
[data-page="pi"] .pz-tp { display: grid; gap: 6px; }
[data-page="pi"] .pz-tp li { display: flex; align-items: center; gap: 10px; font: 700 16.5px/22px var(--f-body); white-space: nowrap; }
[data-page="pi"] .pz-tp li i { position: relative; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); font: 800 16.5px/1 var(--f-body); isolation: isolate; }
[data-page="pi"] .pz-tp li i::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 7px; background: var(--gold); opacity: 0; transition: opacity 220ms ease; }
[data-page="pi"] .canvas.x-t1 .pz-tp1 i::before, [data-page="pi"] .canvas.x-t2 .pz-tp2 i::before, [data-page="pi"] .canvas.x-t3 .pz-tp3 i::before { opacity: 1; }

/* 4 During a call: Do / Avoid; the Do side lights first, then Avoid */
[data-page="pi"] .pz-cols { display: grid; gap: 6px; }
[data-page="pi"] .pz-col { display: grid; gap: 0; padding: 5px 8px; border-radius: 12px; background: var(--mist); transition: background-color 220ms ease; }
[data-page="pi"] .pz-col li { display: flex; align-items: center; gap: 8px; font: 700 16.5px/24px var(--f-body); white-space: nowrap; }
[data-page="pi"] .pz-ok { color: var(--ink); }
[data-page="pi"] .pz-no { color: var(--slate); }
[data-page="pi"] .pz-col--no li { color: var(--slate); }
[data-page="pi"] .canvas.x-do .pz-col--do { background: var(--gold300); }
[data-page="pi"] .canvas.x-no .pz-col--no { background: var(--lav); }

/* 5 Buying committee: two members, then the tally; the five "with you" pips fill one after another */
[data-page="pi"] .pz-m { display: flex; align-items: center; gap: 10px; height: 36px; }
[data-page="pi"] .pz-m i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--lav); font: 800 16.5px/1 var(--f-body); letter-spacing: -.02em; }
[data-page="pi"] .pz-m.me i { background: var(--gold300); }
[data-page="pi"] .pz-m b { font: 700 16.5px/22px var(--f-body); white-space: nowrap; }
[data-page="pi"] .pz-sx { margin-left: auto; padding: 1px 10px; border-radius: 999px; font: 800 16.5px/22px var(--f-body); white-space: nowrap; }
[data-page="pi"] .pz-sx--crusader { background: var(--gold300); }
[data-page="pi"] .pz-sx--friendly { background: var(--lav); }
[data-page="pi"] .pz-tally { display: flex; align-items: center; gap: 10px; margin-top: 2px !important; font: 600 16.5px/22px var(--f-body); color: var(--slate); }
[data-page="pi"] .pz-tally b { color: var(--ink); font-weight: 800; }
[data-page="pi"] .pz-pips { display: flex; gap: 3px; }
[data-page="pi"] .pz-pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--lav); }
[data-page="pi"] .pz-pips i.on { background: var(--gold); }
/* while the loop is running the pips start empty and fill when the camera is in (the HTML frame shows them full) */
[data-page="pi"] .canvas.pre .pz-pips i.on { opacity: 0; transform: scale(.8); }
[data-page="pi"] .pz-pips i.on { transition: opacity 160ms ease calc(var(--k) * 210ms), transform 200ms var(--ease-out) calc(var(--k) * 210ms); }
[data-page="pi"] .canvas.pre.x-team .pz-pips i.on { opacity: 1; transform: none; }
/* the other reveals also start un-lit only while the loop runs (.pre); the painted HTML frame is the finished dashboard */


/* 6 Media appearances (AK, Oct 20 product accuracy): the person's podcast on YouTube, a publication feature, a conference talk.
   Three small rows; once the camera is in they light one after another (gold). Real YouTube mark; text labels for the rest. */
[data-page="pi"] .pz-md { display: grid; gap: 6px; }
[data-page="pi"] .pz-md li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 12px; background: var(--mist); font: 700 16.5px/24px var(--f-body); white-space: nowrap; transition: background-color 220ms ease; }
[data-page="pi"] .pz-md li .pz-i, [data-page="pi"] .pz-md li .pz-yt { flex: none; }
[data-page="pi"] .pz-md li .pz-yt { width: 20px; height: 14px; margin: 0 1px; }
[data-page="pi"] .pz-md li .pz-i { color: var(--ink); }
[data-page="pi"] .canvas.x-m1 .pz-md1, [data-page="pi"] .canvas.x-m2 .pz-md2, [data-page="pi"] .canvas.x-m3 .pz-md3 { background: var(--gold300); }

/* The "Sample data" caption (template: hero.sample) sits outside the scaled canvas, so it is exactly 12px */
/* it sits in the free strip under the window (canvas foot, 26px), right-aligned with the window edge */
.hxa[data-page="pi"] .hxa-note { right: 1.4%; bottom: 0; padding: 4px 4px; background: none; }

/* The pause button: in the free foot of the app rail */
.hxa[data-page="pi"] .hxa-pause { top: auto; bottom: 11.5%; left: 3.1%; right: auto; }

/* Phones: no rail; the dashboard is one column (as the app reads on a phone) and the camera travels down it */
@media (max-width: 767px) {
  .hxa[data-page="pi"] .hxa-stage { aspect-ratio: 288 / 384; }
  .hxa[data-page="pi"] .hxa-stage > .canvas { width: 288px; height: 384px; }
  [data-page="pi"] .pz { inset: 4px 4px 46px; grid-template-columns: minmax(0, 1fr); }
  [data-page="pi"] .pz-rail { display: none; }
  [data-page="pi"] .pz-world { width: 268px; padding: 14px; transform: translate(32px, 8px) scale(.8); }
  [data-page="pi"] .pz-head { flex-wrap: wrap; gap: 4px 12px; height: auto; }
  [data-page="pi"] .pz-head .pz-who { flex: 1; }
  [data-page="pi"] .pz-who b { font-size: 21px; line-height: 26px; }
  [data-page="pi"] .pz-who span { white-space: normal; }
  [data-page="pi"] .pz-tags { margin-left: 62px; }
  [data-page="pi"] .pz-grid { grid-template-columns: minmax(0, 1fr); }
  [data-page="pi"] .pz-row { display: contents; }
  [data-page="pi"] .pz-row--a, [data-page="pi"] .pz-row--b { height: auto; }
  [data-page="pi"] .pz-c { width: auto !important; padding: 14px 16px; }
  [data-page="pi"] .pz-c--call .pz-lab, [data-page="pi"] .pz-c--team .pz-lab, [data-page="pi"] .pz-c--media .pz-lab { margin-bottom: 8px !important; }
  /* phones: the foot under the window is a small control bar, pause left, caption right (nothing covers the dashboard) */
  .hxa[data-page="pi"] .hxa-pause { top: auto; bottom: 2px; left: 4px; right: auto; }
  .hxa[data-page="pi"] .hxa-note { right: 4px; bottom: 12px; }
  [data-page="pi"] .pz-tally { flex-wrap: wrap; row-gap: 2px; }
  [data-page="pi"] .pz-tally > span:last-child { white-space: nowrap; }
}
/* Pause stops every motion (WCAG 2.2.2); a visible ink focus ring on the pause button (2.4.11) */
.hxa[data-page="pi"] .hxa-opt:not(.is-playing) .canvas, .hxa[data-page="pi"] .hxa-opt:not(.is-playing) .canvas * { animation-play-state: paused !important; }
.hxa[data-page="pi"] .hxa-pause[hidden] { display: none; }
.hxa[data-page="pi"] .hxa-pause:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
/* Reduced motion: the whole dashboard, still (pi.js applies the overview camera at once) */
.hxa-reduced [data-page="pi"] .canvas, .hxa-reduced [data-page="pi"] .canvas * { transition: none !important; animation: none !important; }

/* Oct 20 W2 anims B: Walmart's real mark beside the company name; illustrated avatars for the people (no letter tiles) */
[data-page="pi"] .pz-co { display: inline-block; width: 16px; height: 16px; margin: 0 4px 0 1px; vertical-align: -2px; }
[data-page="pi"] .pz-av, [data-page="pi"] .pz-m i { background: none; overflow: hidden; }
[data-page="pi"] .pz-av .hx-av, [data-page="pi"] .pz-m i .hx-av { display: block; width: 100%; height: 100%; }

/* Oct 27 restore (RESTORE-PRODUCTS-oct27; AK: "Walma", "DISC P" cut off inside the box): while the camera is on one section, every
   other panel and the name row fade out, so nothing is ever sliced by the frame (CSS only, keyed on the data-z the player already sets;
   same idea as the pre-merge W16 .pz-off fade). Out: quick, as the zoom starts. Back in: once the camera is on its way back. */
[data-page="pi"] .pz-c, [data-page="pi"] .pz-head { transition: opacity 280ms ease 560ms; } /* Nov 5 hero fix: was 960ms, so the camera finished zooming out (1020ms) onto one card and an empty dashboard for about a second; now the panels are back while it is still travelling */
[data-page="pi"] .canvas[data-z]:not([data-z="all"]) .pz-head,
[data-page="pi"] .canvas[data-z="fact"] .pz-c:not(.pz-c--fact), [data-page="pi"] .canvas[data-z="disc"] .pz-c:not(.pz-c--disc),
[data-page="pi"] .canvas[data-z="talk"] .pz-c:not(.pz-c--talk), [data-page="pi"] .canvas[data-z="call"] .pz-c:not(.pz-c--call),
[data-page="pi"] .canvas[data-z="team"] .pz-c:not(.pz-c--team), [data-page="pi"] .canvas[data-z="media"] .pz-c:not(.pz-c--media) { opacity: 0; transition: opacity 140ms ease 0ms; }

/* Nov 5 fix3 (AK: People Research Agent hero "pause disc floats below", empty band under the dashboard). The window kept a free foot strip
   under it (26px here, 46px on phones) for the "Sample data" caption, which is no longer shown (AK Oct 20), so the frame showed an empty
   band. The strip is gone: the window sits 8px (phones 4px) inside the frame on every side, and the pause disc stays attached to the
   window (desktop: the foot of the app rail, as before; phones: the window's bottom-left corner, where the dashboard is empty margin).
   Backup: 04-build/backups/heroes-fix3-nov05/public/v2/product-pages/anim/pi.css */
.hxa[data-page="pi"] .hxa-stage { aspect-ratio: 600 / 326; }
.hxa[data-page="pi"] .hxa-stage > .canvas { height: 326px; }
[data-page="pi"] .pz { inset: 8px; }
.hxa[data-page="pi"] .hxa-pause { bottom: 6.75%; }
@media (max-width: 767px) {
  .hxa[data-page="pi"] .hxa-stage { aspect-ratio: 288 / 342; }
  .hxa[data-page="pi"] .hxa-stage > .canvas { height: 342px; }
  [data-page="pi"] .pz { inset: 4px; }
  .hxa[data-page="pi"] .hxa-pause { bottom: 4.5%; left: 4.5%; }
}