/* viz-agt: data visuals for agent, migration, WhatsApp and partner pages.
   All classes prefixed vagt-. Animate on [data-io].play (added by site.js), final state under reduced motion.
   Tokens from site.css :root only. Square corners. One red highlight per visual. */

/* 1. Flow: columns joined by animated connectors (stacks vertically on mobile) */
.vagt-flow{display:flex;align-items:stretch}
.vagt-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px}
.vagt-col.wide{flex-grow:1.35}
.vagt-lb{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:4px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .6s var(--ease) calc(var(--i,0)*.35s)}
.vagt-nd{position:relative;border:1px solid var(--line-strong);background:var(--ink-raise);padding:13px 15px;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) calc(var(--i,0)*.35s + var(--j,0)*.07s),transform .7s var(--ease) calc(var(--i,0)*.35s + var(--j,0)*.07s)}
.vagt-nd b{display:block;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;overflow-wrap:anywhere}
.vagt-nd span{display:block;font-size:13px;color:var(--ash);line-height:1.4;margin-top:4px}
.vagt-nd.core{flex:1;display:flex;flex-direction:column;justify-content:center;background:var(--ink-deep);border-color:var(--bone);padding:20px}
.vagt-nd.core b{font-size:clamp(17px,1.5vw,21px);font-weight:800;letter-spacing:.04em}
.vagt-nd.hi{border-color:var(--red)}
.vagt-nd.hi::before{content:"";position:absolute;right:10px;top:10px;width:7px;height:7px;background:var(--red)}
.vagt-nd.grow{flex:1}
.vagt-nd.gt{border-style:dashed;background:transparent}
.vagt-nd.gt b{font-size:12px;letter-spacing:.14em;color:var(--mist)}
.vagt-nd ul{list-style:none;margin-top:14px;display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.vagt-nd li{position:relative;padding-left:16px;font-size:13px;color:var(--mist);line-height:1.35}
.vagt-nd li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--ash)}
.vagt-m{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--mist);line-height:1.35;opacity:0;transition:opacity .7s var(--ease) calc(.5s + var(--i,0)*.35s)}
.vagt-m i{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:2px}
.vagt-ln{flex:0 0 clamp(28px,3.6vw,60px);position:relative;overflow:hidden}
.vagt-ln::before{content:"";position:absolute;left:5px;right:6px;top:50%;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) calc(.25s + var(--i,0)*.35s)}
.vagt-ln::after{content:"";position:absolute;right:7px;top:calc(50% - 4px);width:8px;height:8px;border-top:1px solid var(--mist);border-right:1px solid var(--mist);transform:rotate(45deg);opacity:0;transition:opacity .4s var(--ease) calc(.9s + var(--i,0)*.35s)}
.vagt-ln i{position:absolute;left:0;top:50%;width:34%;height:1px;background:linear-gradient(90deg,transparent,var(--white));opacity:0;transform:translateX(-100%)}
.vagt-flow.play .vagt-lb,.vagt-flow.play .vagt-m{opacity:1}
.vagt-flow.play .vagt-nd{opacity:1;transform:none}
.vagt-flow.play .vagt-ln::before{transform:none}
.vagt-flow.play .vagt-ln::after{opacity:1}
.vagt-flow.play .vagt-ln i{animation:vagt-run 2.6s var(--ease) calc(1.6s + var(--i,0)*.3s) infinite}
@keyframes vagt-run{0%{opacity:0;transform:translateX(-100%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(300%)}}
@keyframes vagt-runv{0%{opacity:0;transform:translateY(-100%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(300%)}}

/* Feedback loop under a flow */
.vagt-loop{position:relative;margin:0 26% 0 18%;height:34px;border:1px dashed var(--line-strong);border-top:0;opacity:0;transition:opacity .8s var(--ease) 1.8s}
.vagt-loop::before{content:"";position:absolute;left:-5px;top:-2px;width:8px;height:8px;border-top:1px solid var(--mist);border-left:1px solid var(--mist);transform:rotate(45deg)}
.vagt-loop span{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);background:var(--ink);padding:0 12px;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.vagt-flow.play + .vagt-loop{opacity:1}

/* 2. Object map: source objects to HubSpot objects */
.vagt-map{border-top:1px solid var(--line-strong)}
.vagt-mh,.vagt-map li{display:grid;grid-template-columns:minmax(0,1fr) clamp(36px,6vw,96px) minmax(0,1.1fr);align-items:center;column-gap:clamp(10px,1.6vw,24px)}
.vagt-mh{padding:16px 0 14px;border-bottom:1px solid var(--line-strong);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.vagt-mh > span:first-child{text-align:right}
.vagt-mh .to{color:var(--white)}
.vagt-mh .to::after{content:"";display:block;width:40px;height:2px;background:var(--red);margin-top:8px}
.vagt-map ol{list-style:none}
.vagt-map li{padding:13px 0;border-bottom:1px solid var(--line)}
.vagt-src{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease) calc(var(--i,0)*.12s),transform .6s var(--ease) calc(var(--i,0)*.12s)}
.vagt-src b,.vagt-dst b{display:inline-block;max-width:100%;font-size:clamp(12px,1.1vw,15px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;padding:8px 10px;overflow-wrap:anywhere}
.vagt-src b{border:1px solid var(--line-strong);color:var(--mist)}
.vagt-dst{display:flex;flex-wrap:wrap;gap:6px;opacity:0;transform:translateX(10px);transition:opacity .6s var(--ease) calc(.55s + var(--i,0)*.12s),transform .6s var(--ease) calc(.55s + var(--i,0)*.12s)}
.vagt-dst b{border:1px solid var(--bone);background:var(--ink-raise);color:var(--white)}
.vagt-dst small{display:block;flex-basis:100%;margin-top:0;font-size:13px;line-height:1.4;color:var(--ash)}
.vagt-ar{position:relative;height:12px}
.vagt-ar::before{content:"";position:absolute;left:0;right:2px;top:50%;height:1px;background:var(--line-strong);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease) calc(.3s + var(--i,0)*.12s)}
.vagt-ar::after{content:"";position:absolute;right:3px;top:calc(50% - 4px);width:8px;height:8px;border-top:1px solid var(--mist);border-right:1px solid var(--mist);transform:rotate(45deg);opacity:0;transition:opacity .3s var(--ease) calc(.75s + var(--i,0)*.12s)}
.vagt-map.play .vagt-src,.vagt-map.play .vagt-dst{opacity:1;transform:none}
.vagt-map.play .vagt-ar::before{transform:none}
.vagt-map.play .vagt-ar::after{opacity:1}

/* 3. Cutover lanes: old CRM and HubSpot across five phases */
.vagt-cut{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:4px;row-gap:8px}
.vagt-cut .ph{grid-row:1;padding:0 8px 14px 0;border-bottom:1px solid var(--line-strong)}
.vagt-cut .ph span{display:block;font-size:12px;color:var(--ash);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.vagt-cut .ph b{display:block;font-size:clamp(12px,1.2vw,16px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.vagt-cut .lane{grid-column:1/-1;margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.vagt-cut .bar{display:flex;align-items:center;min-height:46px;padding:6px 12px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) calc(.2s + var(--i,0)*.22s)}
.vagt-cut .bar.old{background:var(--graphite);color:var(--white)}
.vagt-cut .bar.frz{background:repeating-linear-gradient(135deg,var(--ink-raise2) 0 6px,var(--ink-deep) 6px 12px);border:1px solid var(--line-strong);color:var(--mist)}
.vagt-cut .bar.tst{border:1px dashed var(--line-strong);color:var(--mist)}
.vagt-cut .bar.new{background:var(--bone);color:var(--ink-deep)}
.vagt-cut .cut{grid-column:5;grid-row:2/6;justify-self:start;width:2px;margin-left:-3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease) 1.6s;z-index:1}
.vagt-cut .cutl{grid-column:5;grid-row:6;padding-left:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);opacity:0;transition:opacity .6s var(--ease) 2.1s}
.vagt-cut.play .bar,.vagt-cut.play .cut{transform:none}
.vagt-cut.play .cutl{opacity:1}

/* 4. WhatsApp customer service window */
.vagt-win{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-strong);padding-top:22px}
.vagt-win .wt{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:26px}
.vagt-win ol{list-style:none;display:flex;gap:4px}
.vagt-win li{position:relative;min-width:0;padding-top:30px}
.vagt-win li.open{flex:3}.vagt-win li.shut{flex:2}
.vagt-win li .fill{display:block;height:14px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) calc(var(--i,0)*.45s)}
.vagt-win li.open .fill{background:var(--bone)}
.vagt-win li.shut .fill{border:1px dashed var(--red);background:transparent}
.vagt-win li.open::before{content:"";position:absolute;left:0;top:0;width:1px;height:44px;background:var(--white);opacity:0;transition:opacity .5s var(--ease) calc(var(--i,0)*.45s)}
.vagt-win li .ev{position:absolute;left:10px;top:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white);white-space:nowrap;opacity:0;transition:opacity .5s var(--ease) calc(var(--i,0)*.45s)}
.vagt-win li b{display:block;margin-top:14px;font-size:clamp(13px,1.2vw,16px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
.vagt-win li em{display:block;margin-top:4px;font-style:normal;font-size:13px;color:var(--ash);line-height:1.4;padding-right:8px}
.vagt-win li b,.vagt-win li em{opacity:0;transition:opacity .6s var(--ease) calc(.4s + var(--i,0)*.45s)}
.vagt-win.play li .fill{transform:none}
.vagt-win.play li::before,.vagt-win.play li .ev,.vagt-win.play li b,.vagt-win.play li em{opacity:1}

/* 5. Layers: HubSpot core with partner layers around it */
.vagt-layers{position:relative}
.vagt-ly{position:relative;padding:52px clamp(14px,2.4vw,32px) clamp(14px,2.4vw,32px)}
.vagt-ly.l3{background:var(--ink-deep)}.vagt-ly.l2{background:var(--ink)}.vagt-ly.l1{background:var(--ink-raise)}
.vagt-ly::before{content:"";position:absolute;inset:0;border:1px solid var(--line-strong);opacity:0;transform:scale(.97);transition:opacity .8s var(--ease) calc(var(--i,0)*.3s),transform .8s var(--ease) calc(var(--i,0)*.3s);pointer-events:none}
.vagt-lt{position:absolute;left:clamp(14px,2.4vw,32px);top:18px;right:14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);opacity:0;transition:opacity .6s var(--ease) calc(.2s + var(--i,0)*.3s)}
.vagt-lt i{font-style:normal;color:var(--mist);margin-right:10px}
.vagt-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(14px,2vw,26px)}
.vagt-tags li{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);border:1px solid var(--line-strong);padding:8px 11px;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease) calc(.3s + var(--i,0)*.3s + var(--j,0)*.05s),transform .5s var(--ease) calc(.3s + var(--i,0)*.3s + var(--j,0)*.05s)}
.vagt-core{border:1px solid var(--red);background:var(--ink-deep);padding:clamp(24px,3.4vw,44px) 16px;text-align:center;opacity:0;transform:scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.vagt-core span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.vagt-core b{display:block;margin:6px 0;font-size:clamp(22px,2.6vw,36px);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.vagt-core em{display:block;font-style:normal;font-size:14px;color:var(--mist)}
.vagt-layers.play .vagt-ly::before{opacity:1;transform:none}
.vagt-layers.play .vagt-lt,.vagt-layers.play .vagt-tags li,.vagt-layers.play .vagt-core{opacity:1;transform:none}

/* Single bar chart without callout (reuses vz-chart / vz-bars) */
.vz-chart.vagt-solo{grid-template-columns:minmax(0,1fr)}

@media (max-width:820px){
  .vagt-flow{flex-direction:column}
  .vagt-ln{flex:0 0 38px}
  .vagt-ln::before{left:50%;right:auto;top:4px;bottom:6px;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .vagt-ln::after{right:auto;left:calc(50% - 4px);top:auto;bottom:8px;transform:rotate(135deg)}
  .vagt-ln i{left:50%;top:0;width:1px;height:34%;background:linear-gradient(180deg,transparent,var(--white));transform:translateY(-100%)}
  .vagt-flow.play .vagt-ln i{animation-name:vagt-runv}
  .vagt-nd.core{padding:18px 16px}
  .vagt-loop{margin:18px 0 0;height:auto;border:1px dashed var(--line-strong);padding:12px 14px}
  .vagt-loop::before{display:none}
  .vagt-loop span{position:static;transform:none;padding:0;white-space:normal;background:none;display:block}
  .vagt-mh,.vagt-map li{grid-template-columns:minmax(0,1fr) 22px minmax(0,1.25fr);column-gap:8px}
  .vagt-src b,.vagt-dst b{font-size:11px;letter-spacing:.04em;padding:7px 8px}
  .vagt-dst small{font-size:12px}
  .vagt-mh{font-size:11px;letter-spacing:.1em}
  .vagt-cut{column-gap:3px}
  .vagt-cut .ph{padding-right:2px}
  .vagt-cut .ph b{font-size:10px;letter-spacing:.02em}
  .vagt-cut .ph span{font-size:10px}
  .vagt-cut .bar{font-size:9px;letter-spacing:.02em;padding:6px 5px;min-height:50px;overflow-wrap:anywhere}
  .vagt-cut .cutl{padding-left:6px;font-size:10px;letter-spacing:.08em;grid-column:4/6;justify-self:end}
  .vagt-win ol{flex-direction:column;gap:0}
  .vagt-win li{padding:0 0 18px 26px}
  .vagt-win li .fill{position:absolute;left:0;top:0;bottom:6px;width:12px;height:auto;transform:scaleY(0);transform-origin:top}
  .vagt-win li.open::before{display:none}
  .vagt-win li .ev{position:static;display:block}
  .vagt-win li b{margin-top:6px}
  .vagt-win.play li .fill{transform:none}
  .vagt-ly{padding-top:48px}
  .vagt-tags li{font-size:11px;letter-spacing:.08em;padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){
  .vagt-lb,.vagt-nd,.vagt-m,.vagt-loop,.vagt-src,.vagt-dst,.vagt-cut .cutl,.vagt-win li b,.vagt-win li em,.vagt-win li .ev,.vagt-win li::before,.vagt-ly::before,.vagt-lt,.vagt-tags li,.vagt-core{opacity:1!important;transform:none!important;transition:none!important}
  .vagt-ln::before,.vagt-ar::before,.vagt-cut .bar,.vagt-cut .cut,.vagt-win li .fill{transform:none!important;transition:none!important}
  .vagt-ln::after,.vagt-ar::after{opacity:1!important;transition:none!important}
  .vagt-ln i{display:none}
}