/* /vidar hero (Oct 20 W2 anims B; Krish O20-027..031): the US map lights Denver, New York and San Francisco in turn, then a real
   Slack channel opens over it with one Vidar message per city (who, company logo, city, ICP fit, Account and People Intelligence links).
   One area moves at a time (AK). Canvas 576 x 340 (288 x 392 on phones), sized so the box draws it at about 1:1 (text stays 12px+).
   Website tokens (.hxa vars) everywhere except inside the Slack window, which keeps Slack's own aubergine bar and link blue
   so it reads as real Slack (Krish: "show it like real, with a bit of colour"). Motion: opacity and transform only, 320-520 ms.
   Rollback: 04-build/backups/oct20-w2-anims-b/anim/vidar.css. */
.hxa[data-page="vidar"] .hxa-stage { aspect-ratio: 576 / 340; }
.hxa[data-page="vidar"] .hxa-stage > .canvas { width: 576px; height: 340px; }
[data-page="vidar"] .canvas { --slack: #4A154B; --slack-link: #1264A3; color: var(--ink); font-family: var(--f-body); transition: opacity 240ms ease; }
[data-page="vidar"] .canvas.out { opacity: 0; }
[data-page="vidar"] .canvas.rs, [data-page="vidar"] .canvas.rs * { transition: none !important; }
[data-page="vidar"] .vd :where(p) { margin: 0; }
[data-page="vidar"] .vd :where(i, em) { font-style: normal; }
[data-page="vidar"] .vd { position: absolute; inset: 0; }

/* 1. The map (left to right: Denver, New York, San Francisco) */
[data-page="vidar"] .vd-map { position: absolute; inset: 8px 8px 22px; display: flex; flex-direction: column; padding: 14px 16px 10px; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav), var(--sh-sm); }
[data-page="vidar"] .vd-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 40px; }
[data-page="vidar"] .vd-hd b { font: 700 16px/20px var(--f-display); }
[data-page="vidar"] .vd-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--lav); font: 700 12px/16px var(--f-body); }
[data-page="vidar"] .vd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 198, 30, .3); }
[data-page="vidar"] .vd-geo { position: relative; flex: none; width: 480px; aspect-ratio: 544 / 276; margin: auto; }
[data-page="vidar"] .vd-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-page="vidar"] .us circle { fill: rgba(17, 10, 51, .14); }
[data-page="vidar"] .vd-ft { font: 600 12px/16px var(--f-body); color: var(--slate); }

/* A pin per city: drops in, keeps its spot; only the newest city shows its label */
[data-page="vidar"] .vd-pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
[data-page="vidar"] .vd-pin > svg { position: absolute; left: -11px; top: -28px; width: 22px; height: 28px; filter: drop-shadow(0 2px 3px rgba(17, 10, 51, .25)); opacity: 0; transform: translateY(-10px); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
[data-page="vidar"] .vd-pin path { fill: var(--ink); }
[data-page="vidar"] .vd-pin circle { fill: var(--gold); }
[data-page="vidar"] .vd-lb { position: absolute; top: -50px; display: grid; gap: 1px; padding: 6px 12px; border-radius: 12px; background: var(--white); box-shadow: var(--sh-md), inset 0 0 0 1px var(--lav); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); }
[data-page="vidar"] .vd-pin.is-r .vd-lb { left: 16px; }
[data-page="vidar"] .vd-pin.is-l .vd-lb { right: 16px; }
[data-page="vidar"] .vd-lb b { font: 700 14px/18px var(--f-display); }
[data-page="vidar"] .vd-lb span { font: 600 12px/16px var(--f-body); color: var(--slate); }
[data-page="vidar"] .c1 .vd-pin--1 > svg, [data-page="vidar"] .c2 .vd-pin--2 > svg, [data-page="vidar"] .c3 .vd-pin--3 > svg { opacity: 1; transform: none; }
[data-page="vidar"] .c1:not(.c2) .vd-pin--1 .vd-lb, [data-page="vidar"] .c2:not(.c3) .vd-pin--2 .vd-lb, [data-page="vidar"] .c3:not(.sl) .vd-pin--3 .vd-lb { opacity: 1; transform: none; }

/* 2. The Slack channel opens over the map (the map is fully covered, so it never moves at the same time) */
[data-page="vidar"] .vd-sl { position: absolute; inset: 8px 8px 22px; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: var(--sh-lg), 0 0 0 1px var(--lav); opacity: 0; transform: translateY(16px) scale(.985); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out); }
[data-page="vidar"] .sl .vd-sl { opacity: 1; transform: none; }
[data-page="vidar"] .vd-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 52px 0 14px; background: var(--slack); color: #fff; }
[data-page="vidar"] .vd-slk { flex: none; width: 18px; height: 18px; }
[data-page="vidar"] .vd-bar b { display: inline-flex; gap: 3px; font: 800 15px/20px var(--f-body); }
[data-page="vidar"] .vd-bar b i { opacity: .7; }
[data-page="vidar"] .vd-ws { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 700 13px/16px var(--f-body); white-space: nowrap; }
[data-page="vidar"] .vd-ws i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #fff; }
[data-page="vidar"] .vd-ws img { width: 14px; height: 14px; }
[data-page="vidar"] .vd-pane { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 8px 14px 8px; }
[data-page="vidar"] .vd-list { transition: transform 480ms var(--ease-out); }
[data-page="vidar"] .vd-snd { display: flex; align-items: center; gap: 8px; height: 28px; margin-bottom: 6px; }
[data-page="vidar"] .vd-app { flex: none; width: 28px; height: 28px; border-radius: 7px; }
[data-page="vidar"] .vd-snd b { font: 800 14px/18px var(--f-body); }
[data-page="vidar"] .vd-snd em { padding: 1px 5px; border-radius: 4px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); font: 800 12px/14px var(--f-body); color: var(--slate); }
[data-page="vidar"] .vd-snd > span { font: 600 12px/16px var(--f-body); color: var(--slate); }
[data-page="vidar"] .vd-snd .vd-snd-t { margin-left: 4px; font-weight: 500; color: var(--ink); font-size: 14px; }

/* One message per city */
[data-page="vidar"] .vd-m { margin: 0 0 6px 36px; padding: 7px 10px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); opacity: 0; transform: translateY(8px); transition: opacity 400ms var(--ease-out), transform 480ms var(--ease-out), box-shadow 400ms ease; }
[data-page="vidar"] .m1 .vd-m--1, [data-page="vidar"] .m2 .vd-m--2, [data-page="vidar"] .m3 .vd-m--3 { opacity: 1; transform: none; }
[data-page="vidar"] .canvas[data-m="1"] .vd-m--1, [data-page="vidar"] .canvas[data-m="2"] .vd-m--2, [data-page="vidar"] .canvas[data-m="3"] .vd-m--3 { box-shadow: inset 0 0 0 1.5px var(--gold), var(--sh-sm); }
[data-page="vidar"] .vd-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; grid-template-areas: "av who co icp"; align-items: center; column-gap: 10px; }
[data-page="vidar"] .vd-av { grid-area: av; width: 32px; height: 32px; display: block; }
[data-page="vidar"] .vd-who { grid-area: who; display: grid; min-width: 0; }
[data-page="vidar"] .vd-who b { font: 700 14px/18px var(--f-display); white-space: nowrap; }
[data-page="vidar"] .vd-who > span { font: 600 12px/16px var(--f-body); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-page="vidar"] .vd-co { grid-area: co; display: block; width: auto; justify-self: start; }
[data-page="vidar"] .vd-icp { grid-area: icp; padding: 3px 9px; border-radius: 999px; background: var(--gold300); font: 800 12px/16px var(--f-body); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
/* Oct 27 (Amar C14: bars, not scores): the fit as a short bar inside the chip */
[data-page="vidar"] .vd-fit { position: relative; display: block; width: 36px; height: 6px; border-radius: 999px; background: var(--white); overflow: hidden; }
[data-page="vidar"] .vd-fit b { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 999px; background: var(--ink); }
[data-page="vidar"] .vd-cty2 { display: none; }
[data-page="vidar"] .vd-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 5px; padding-left: 42px; }
[data-page="vidar"] .vd-links span { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/16px var(--f-body); color: var(--slack-link); white-space: nowrap; }
[data-page="vidar"] .vd-links img { width: 14px; height: 14px; border-radius: 4px; }

/* The pause button: top right, over the map header and then the Slack bar (both leave room for it) */
.hxa[data-page="vidar"] .hxa-pause { top: 3.2%; bottom: auto; right: 2.6%; }
.hxa[data-page="vidar"] .hxa-note { right: 1.6%; bottom: 0; padding: 2px 4px; background: none; }

/* Phones: a narrow canvas so text stays 12px+; the newest message scrolls into view */
@media (max-width: 767px) {
  .hxa[data-page="vidar"] .hxa-stage { aspect-ratio: 284 / 392; }
  .hxa[data-page="vidar"] .hxa-stage > .canvas { width: 284px; height: 392px; }
  [data-page="vidar"] .vd-map { inset: 6px 6px 22px; padding: 12px 12px 10px; }
  [data-page="vidar"] .vd-hd { padding-right: 36px; }
  [data-page="vidar"] .vd-hd b { font-size: 14px; line-height: 18px; }
  [data-page="vidar"] .vd-geo { width: 100%; }
  [data-page="vidar"] .vd-now { display: none; }
  [data-page="vidar"] .vd-pin > svg { left: -9px; top: -23px; width: 18px; height: 23px; }
  [data-page="vidar"] .vd-lb { top: -46px; padding: 5px 10px; }
  [data-page="vidar"] .vd-pin.is-r .vd-lb { left: 12px; }
  [data-page="vidar"] .vd-pin.is-l .vd-lb { right: 12px; }
  [data-page="vidar"] .vd-sl { inset: 6px 6px 22px; }
  [data-page="vidar"] .vd-bar { height: 38px; padding: 0 12px; gap: 8px; }
  [data-page="vidar"] .vd-bar b { white-space: nowrap; }
  [data-page="vidar"] .vd-bar b { font-size: 14px; }
  [data-page="vidar"] .vd-ws { font-size: 12px; }
  [data-page="vidar"] .vd-pane { padding: 8px 10px; }
  [data-page="vidar"] .vd-snd .vd-snd-t { display: none; }
  [data-page="vidar"] .vd-m { margin-left: 0; padding: 8px 10px; }
  [data-page="vidar"] .vd-row { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "av who icp" "co co cty"; row-gap: 6px; column-gap: 8px; }
  [data-page="vidar"] .vd-av { width: 30px; height: 30px; }
  [data-page="vidar"] .vd-cty { display: none; }
  [data-page="vidar"] .vd-cty2 { grid-area: cty; display: block; justify-self: end; font: 600 12px/16px var(--f-body); color: var(--slate); white-space: nowrap; }
  [data-page="vidar"] .vd-links { flex-direction: column; padding-left: 0; margin-top: 6px; }
  /* Nov 5 hero restore: since the Oct 27 renames the two links ("Account Intelligence (Account Research Agent)") are wider than the
     phone message card, so they ran 28 to 48px past its edge and were cut. On phones a link may wrap under its icon. */
  [data-page="vidar"] .vd-links span { align-items: flex-start; white-space: normal; }
  [data-page="vidar"] .vd-links img { margin-top: 1px; }
  /* phones: the strip under the window is a small control bar, pause left, caption right (nothing covers the channel) */
  .hxa[data-page="vidar"] .hxa-pause { top: auto; bottom: 0; left: 4px; right: auto; width: 28px; height: 28px; }
  [data-page="vidar"] .vd-map, [data-page="vidar"] .vd-sl { bottom: 30px; }
  [data-page="vidar"] .vd-hd { padding-right: 0; }
}
/* Pause stops every motion (WCAG 2.2.2); a visible ink focus ring on the pause button (2.4.11) */
.hxa[data-page="vidar"] .hxa-opt:not(.is-playing) .canvas, .hxa[data-page="vidar"] .hxa-opt:not(.is-playing) .canvas * { animation-play-state: paused !important; }
.hxa[data-page="vidar"] .hxa-pause[hidden] { display: none; }
.hxa[data-page="vidar"] .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 finished channel, still */
.hxa-reduced [data-page="vidar"] .canvas, .hxa-reduced [data-page="vidar"] .canvas * { transition: none !important; animation: none !important; }