/* Scene 02 · "Một yêu cầu. Nhiều lần chép lại." — what the team observed at LogiForce (report 2.1–2.3, figure 2.1), one tracking shot
   following the real case of section 2.3.
   The world is three frames wide (5760 px); the camera is .ev-world's transform.
   data-k 1 frame 1 customer → Sales: a short message on a personal channel, Sales asks back, a summary goes to Pricing
   data-k 2 frame 2 Pricing: personal sheets, Drive, agents' email (one out of date), re-typed into a private sheet
   data-k 3 frame 3 Sales → customer: margin by judgement, verbal approval, copied into a document, no single record id
   data-k 4 the camera pulls back: the request was typed again at every handoff (the copy marks); the conclusion.
   rch1..rch4 = beats reached (end states); data-play only on an animated entry. Labels only: no names, no amounts. */
#s-evidence :is(.ev-src,.ev-route,.ev-view,.ev-lim,.ev-say,.ev-end){position:absolute;margin:0}
#s-evidence p{margin:0}
#s-evidence .head .h1{font-size:64px}
#s-evidence .ev-src{right:160px;top:74px;display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:500;color:#C6D3E8;background:rgba(158,178,220,.13);padding:5px 16px 6px;border-radius:999px}
#s-evidence .ev-src::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

/* ---- the route, top: where the camera is ---- */
#s-evidence .ev-route{left:160px;right:160px;top:226px;display:flex;align-items:center;gap:0;list-style:none;padding:0;font-size:24px;font-weight:600;color:#6F7E98;opacity:0;transition:opacity .4s}
#s-evidence .ev-route li{display:flex;align-items:center;transition:color .4s}
#s-evidence .ev-route li+li::before{content:"";width:46px;height:2px;margin:0 16px;background:currentColor;opacity:.5}
#s-evidence.rch1 .ev-route{opacity:1}
#s-evidence.rch1 .ev-r1,#s-evidence.rch2 :is(.ev-r2,.ev-r3),#s-evidence.rch3 :is(.ev-r4,.ev-r5){color:#C9D4E5}
#s-evidence[data-k="1"] .ev-r1,#s-evidence[data-k="2"] :is(.ev-r2,.ev-r3),#s-evidence[data-k="3"] :is(.ev-r4,.ev-r5){color:var(--white)}
#s-evidence.rch4 .ev-route{opacity:0}

/* ---- the world and the camera ---- */
#s-evidence .ev-view{inset:0;overflow:hidden;pointer-events:none}
#s-evidence .ev-world{position:absolute;left:0;top:0;width:5760px;height:1080px;transform-origin:0 0;transition:transform 1.2s var(--io)}
#s-evidence[data-k="2"] .ev-world{transform:translateX(-1920px)}
#s-evidence[data-k="3"] .ev-world{transform:translateX(-3840px)}
#s-evidence[data-k="4"] .ev-world{transform:translate(67px,318px) scale(.31);transition-duration:1.5s}
#s-evidence .ev-world > *{position:absolute;margin:0;opacity:0;transition:opacity .45s var(--out),translate .6s var(--out),color .4s}
#s-evidence .ev-world :is(p,span,small,b,i){transition:color .4s}

/* people */
#s-evidence .ev-pp{display:flex;align-items:center;gap:16px;font-size:32px;font-weight:700;color:var(--white)}
#s-evidence .ev-av{position:relative;flex:none;width:72px;height:72px;box-sizing:border-box;border-radius:50%;border:3px solid #8FBAFF;background:#0A1326}
#s-evidence .ev-av::before{content:"";position:absolute;left:50%;top:13px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#CFE0FF}
#s-evidence .ev-av::after{content:"";position:absolute;left:50%;top:36px;width:34px;height:18px;margin-left:-17px;border-radius:17px 17px 4px 4px;background:#CFE0FF}
#s-evidence .ev-sales1{left:1200px;top:398px}#s-evidence .ev-pricing{left:2440px;top:300px}#s-evidence .ev-sales2{left:4000px;top:300px}

/* frame 1 · customer → Sales */
#s-evidence .ev-bub{left:160px;top:330px;width:600px;box-sizing:border-box;padding:20px 28px 26px;border-radius:24px 24px 24px 6px;background:#F2EEE6;box-shadow:0 30px 60px -26px rgba(0,0,0,.8)}
#s-evidence .ev-bk{font-size:22px;font-weight:600;color:#5B6B82}
#s-evidence .ev-bm{margin-top:6px!important;font-size:32px;font-weight:700;line-height:1.25;color:#1B2433;text-wrap:balance}
#s-evidence .ev-bw{margin-top:8px!important;font-size:24px;font-weight:600;color:#3E4B60}
#s-evidence .ev-bx{left:160px;top:556px;font-size:22px;font-weight:600;color:#A9B8CF}
#s-evidence .ev-chs{left:160px;top:604px;display:flex;gap:12px}
#s-evidence .ev-chs span{padding:5px 14px 6px;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(190,208,235,.3);font-size:24px;font-weight:600;color:#A9B8CF}
#s-evidence .ev-chs .ev-on{box-shadow:inset 0 0 0 2px #CFE0FF;color:var(--white)}
#s-evidence .ev-q{left:830px;padding:9px 20px 11px;border-radius:18px 18px 18px 4px;background:rgba(240,166,58,.12);box-shadow:inset 0 0 0 2.5px rgba(240,166,58,.75);font-size:28px;font-weight:600;color:var(--white);white-space:nowrap}
#s-evidence .ev-q1{top:338px}#s-evidence .ev-q2{top:418px}#s-evidence .ev-q3{top:498px}
#s-evidence .ev-qk{left:830px;top:586px;font-size:24px;font-weight:600;color:#FFC46B}
#s-evidence .ev-note{width:300px;box-sizing:border-box;padding:18px 22px 20px;border-radius:12px;background:#E7E2D8;box-shadow:0 24px 46px -22px rgba(0,0,0,.8)}
#s-evidence .ev-note .ev-nk{font-size:26px;font-weight:700;color:#1B2433}
#s-evidence .ev-note i{display:block;height:10px;margin-top:14px;border-radius:5px;background:#B9B2A4}
#s-evidence .ev-note i.ev-w6{width:60%}
#s-evidence .ev-note .ev-nv{margin-top:14px!important;font-size:22px;font-weight:600;line-height:1.3;color:#3E4B60}
#s-evidence .ev-n1{left:1470px;top:350px;rotate:-2deg}
#s-evidence .ev-n2{left:2080px;top:360px;rotate:2deg}

/* frame 2 · Pricing */
#s-evidence .ev-srcs{left:2440px;top:420px;width:400px}
#s-evidence .ev-sc{display:flex;align-items:center;gap:14px;height:60px;margin-bottom:16px!important;padding:0 18px;box-sizing:border-box;border-radius:12px;background:#E7E2D8;font-size:26px;font-weight:650;color:#1B2433;opacity:0;translate:-12px 0;transition:opacity .4s var(--out),translate .55s var(--out)}
#s-evidence .ev-sc i{flex:none;position:relative;width:28px;height:22px;box-sizing:border-box;border:2.5px solid #3A4352;border-radius:4px}
#s-evidence .ev-g-grid{background:linear-gradient(#3A4352,#3A4352) 0 7px/100% 2px no-repeat,linear-gradient(#3A4352,#3A4352) 9px 0/2px 100% no-repeat}
#s-evidence .ev-g-drive{border-radius:3px 9px 3px 3px!important}
#s-evidence .ev-g-mail::after{content:"";position:absolute;left:3px;top:-2px;width:14px;height:10px;border-right:2.5px solid #3A4352;border-bottom:2.5px solid #3A4352;transform:rotate(45deg)}
#s-evidence .ev-exp{left:2600px;top:652px;padding:4px 14px 6px;border-radius:8px;box-shadow:inset 0 0 0 2.5px var(--amber);font-size:24px;font-weight:700;color:#FFC46B;rotate:-3deg}
#s-evidence .ev-sheet{left:2980px;top:322px;width:620px;box-sizing:border-box;padding:16px 24px 18px;border-radius:12px;background:#F2EEE6;box-shadow:0 30px 60px -26px rgba(0,0,0,.8)}
#s-evidence .ev-shk{font-size:24px;font-weight:700;color:#5B6B82;padding-bottom:8px}
#s-evidence .ev-row{display:flex;align-items:center;gap:20px;height:56px;border-top:1.5px solid rgba(27,36,51,.12);font-size:26px;font-weight:650;color:#1B2433}
#s-evidence .ev-row span{width:230px;flex:none}
#s-evidence .ev-row i{height:14px;width:220px;border-radius:7px;background:#B9B2A4;transform-origin:0 50%}
#s-evidence .ev-row.ev-tot i{width:300px;background:#1B2433}
#s-evidence .ev-ret{left:3330px;top:656px;font-size:24px;font-weight:600;color:#C9D4E5}

/* frame 3 · Sales → customer */
#s-evidence .ev-mg{left:4000px;top:410px;padding:10px 20px 12px;border-radius:14px;box-shadow:inset 0 0 0 2.5px rgba(240,166,58,.75);background:rgba(240,166,58,.1);font-size:28px;font-weight:700;color:var(--white)}
#s-evidence .ev-mg small,#s-evidence .ev-ask small{display:block;margin-top:2px;font-size:22px;font-weight:500;color:#C9D4E5}
#s-evidence .ev-ask{left:4000px;top:530px;padding:10px 20px 12px;border-radius:20px 20px 20px 4px;border:2.5px dashed rgba(190,208,235,.55);font-size:28px;font-weight:650;color:var(--white)}
#s-evidence .ev-doc{left:4600px;top:300px;width:320px;height:370px;box-sizing:border-box;padding:22px 26px;border-radius:10px;background:#F2EEE6;box-shadow:0 30px 60px -26px rgba(0,0,0,.8)}
#s-evidence .ev-d2{background:#CFC8BA;rotate:5deg;translate:28px -14px}
#s-evidence .ev-dk{font-size:30px;font-weight:800;color:#1B2433;padding-bottom:8px}
#s-evidence .ev-d1 i{display:block;height:12px;margin-top:22px;border-radius:6px;background:#B9B2A4;transform-origin:0 50%}
#s-evidence .ev-d1 i.ev-w7{width:70%}#s-evidence .ev-d1 i.ev-w5{width:50%}
#s-evidence .ev-fn{left:4600px;top:700px;font-size:24px;font-weight:600;color:#E9C58F}
#s-evidence .ev-out{left:5040px;top:430px;display:flex;gap:12px}
#s-evidence .ev-out span{padding:6px 16px 8px;border-radius:999px;box-shadow:inset 0 0 0 2px #CFE0FF;font-size:26px;font-weight:600;color:var(--white)}
#s-evidence .ev-noid{left:5020px;top:560px;padding:6px 18px 8px;border-radius:10px;box-shadow:inset 0 0 0 3px var(--amber);font-size:30px;font-weight:800;color:#FFC46B;rotate:-4deg;scale:1.3}

/* the data trail */
#s-evidence .ev-trail{left:0;top:0;width:5760px;height:1080px;overflow:visible;opacity:1!important}
#s-evidence .ev-tr{fill:none;stroke:#8FBAFF;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--io)}
#s-evidence .ev-cp{top:798px;width:44px;height:44px;margin-left:-22px;scale:.5}
#s-evidence .ev-cp::before,#s-evidence .ev-cp::after{content:"";position:absolute;width:26px;height:26px;box-sizing:border-box;border-radius:6px;border:3.5px solid var(--amber);background:#0A1326}
#s-evidence .ev-cp::before{left:4px;top:4px}#s-evidence .ev-cp::after{left:14px;top:14px}
#s-evidence .ev-tk{left:160px;top:770px;font-size:22px;font-weight:600;color:#A9B8CF}

/* ---- captions, lines, conclusion ---- */
/* the five current limits of figure 2.1, one per step, in the order the request meets them */
#s-evidence .ev-lim{left:160px;right:160px;top:300px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;list-style:none;padding:0}
#s-evidence .ev-lim li{opacity:0;translate:0 10px;transition:opacity .45s var(--out),translate .6s var(--out)}
#s-evidence .ev-lim b{display:block;font-size:28px;font-weight:700;line-height:1.15;color:#FFC46B}
#s-evidence .ev-lim span{display:block;margin-top:4px;font-size:22px;color:#C9D4E5}
#s-evidence .ev-pain{left:2440px;top:724px;width:1180px;font-size:24px;font-weight:600;color:#E9C58F}
#s-evidence .ev-pain b{color:#FFC46B}
#s-evidence .ev-lgd{position:absolute;left:160px;top:618px;display:flex;align-items:center;gap:12px;font-size:22px;font-weight:600;color:#E9C58F;opacity:0;transition:opacity .45s}
#s-evidence .ev-lgd i{position:relative;width:34px;height:34px}
#s-evidence .ev-lgd i::before,#s-evidence .ev-lgd i::after{content:"";position:absolute;width:20px;height:20px;box-sizing:border-box;border-radius:5px;border:3px solid var(--amber);background:#0A1326}
#s-evidence .ev-lgd i::before{left:3px;top:3px}#s-evidence .ev-lgd i::after{left:11px;top:11px}
#s-evidence.rch4 .ev-lgd{opacity:1}
#s-evidence[data-k="4"] .ev-lgd{transition-delay:2s}
#s-evidence .ev-say{left:160px;right:160px;top:880px;font-size:34px;font-weight:600;letter-spacing:-.01em;color:var(--white);opacity:0;translate:0 10px;transition:opacity .45s var(--out),translate .6s var(--out)}
#s-evidence .ev-say b{color:#FFC46B;font-weight:650}
#s-evidence .ev-end{left:160px;right:160px;top:700px;opacity:0;translate:0 12px;transition:opacity .6s var(--out),translate .8s var(--out)}
#s-evidence .ev-e1{font-size:44px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--white)}
#s-evidence .ev-e1 b{color:#FFC46B}
#s-evidence .ev-e2{margin-top:14px!important;font-size:26px;color:#C9D4E5}

/* ================= states ================= */
/* frame 1 */
#s-evidence.rch1 :is(.ev-bub,.ev-bx,.ev-chs,.ev-q,.ev-sales1,.ev-qk,.ev-n1,.ev-tk){opacity:1}
#s-evidence.rch1 .ev-tr1,#s-evidence.rch2 :is(.ev-tr2,.ev-tr3,.ev-tr4),#s-evidence.rch3 :is(.ev-tr5,.ev-tr6,.ev-tr7){stroke-dashoffset:0}
#s-evidence.rch1 .ev-cp1,#s-evidence.rch2 :is(.ev-cp2,.ev-cp3,.ev-cp4),#s-evidence.rch3 :is(.ev-cp5,.ev-cp6){opacity:1;scale:1;transition:opacity .3s,scale .45s var(--out)}
#s-evidence[data-k="1"] .ev-bub{transition-delay:.25s}#s-evidence[data-k="1"] .ev-bx{transition-delay:.7s}#s-evidence[data-k="1"] .ev-chs{transition-delay:.85s}
#s-evidence[data-k="1"] .ev-sales1{transition-delay:1s}
#s-evidence[data-k="1"] .ev-q1{transition-delay:1.3s}#s-evidence[data-k="1"] .ev-q2{transition-delay:1.6s}#s-evidence[data-k="1"] .ev-q3{transition-delay:1.9s}
#s-evidence[data-k="1"] .ev-qk{transition-delay:2.2s}#s-evidence[data-k="1"] .ev-n1{transition-delay:2.5s}
#s-evidence[data-k="1"] .ev-tk{transition-delay:.4s}#s-evidence[data-k="1"] .ev-tr1{transition:stroke-dashoffset 2.2s var(--io) .4s}
#s-evidence[data-k="1"] .ev-cp1{transition-delay:2.7s}
#s-evidence[data-k="1"] .ev-s1x{opacity:1;translate:0 0;transition-delay:1.2s}
#s-evidence[data-play="1"] .ev-q{animation:evPop .5s var(--out) both}
#s-evidence[data-play="1"] .ev-q1{animation-delay:1.3s}#s-evidence[data-play="1"] .ev-q2{animation-delay:1.6s}#s-evidence[data-play="1"] .ev-q3{animation-delay:1.9s}
/* frame 2 */
#s-evidence.rch2 :is(.ev-n2,.ev-pricing,.ev-srcs,.ev-exp,.ev-sheet,.ev-ret,.ev-pain){opacity:1}
#s-evidence.rch2 .ev-sc{opacity:1;translate:0 0}
#s-evidence[data-k="2"] .ev-n2{transition-delay:1.1s}#s-evidence[data-k="2"] .ev-pricing{transition-delay:1.4s}#s-evidence[data-k="2"] .ev-srcs{transition-delay:1.5s}
#s-evidence[data-k="2"] .ev-s1{transition-delay:1.7s}#s-evidence[data-k="2"] .ev-s2{transition-delay:1.9s}#s-evidence[data-k="2"] .ev-s3{transition-delay:2.1s}
#s-evidence[data-k="2"] .ev-exp{transition-delay:2.6s}#s-evidence[data-k="2"] .ev-pain{transition-delay:3.3s}#s-evidence[data-k="2"] .ev-sheet{transition-delay:2.9s}#s-evidence[data-k="2"] .ev-ret{transition-delay:4.1s}
#s-evidence[data-k="2"] .ev-tr2{transition:stroke-dashoffset .8s var(--io) .9s}#s-evidence[data-k="2"] .ev-tr3{transition:stroke-dashoffset .8s var(--io) 2s}#s-evidence[data-k="2"] .ev-tr4{transition:stroke-dashoffset .8s var(--io) 3.6s}
#s-evidence[data-k="2"] .ev-cp2{transition-delay:1.5s}#s-evidence[data-k="2"] .ev-cp3{transition-delay:2.8s}#s-evidence[data-k="2"] .ev-cp4{transition-delay:4.2s}
#s-evidence[data-k="2"] .ev-s2x{opacity:1;translate:0 0;transition-delay:1.3s}
#s-evidence[data-play="2"] .ev-exp{animation:evStamp .5s var(--out) 2.6s both}
#s-evidence[data-play="2"] .ev-row i{animation:evType .5s var(--out) both}
#s-evidence[data-play="2"] .ev-row:nth-of-type(1) i{animation-delay:3.1s}#s-evidence[data-play="2"] .ev-row:nth-of-type(2) i{animation-delay:3.35s}
#s-evidence[data-play="2"] .ev-row:nth-of-type(3) i{animation-delay:3.6s}#s-evidence[data-play="2"] .ev-row:nth-of-type(4) i{animation-delay:3.85s}
/* frame 3 */
#s-evidence.rch3 :is(.ev-sales2,.ev-mg,.ev-ask,.ev-doc,.ev-fn,.ev-out,.ev-noid){opacity:1}
#s-evidence.rch3 .ev-noid{scale:1;transition:opacity .25s,scale .5s var(--out)}
#s-evidence[data-k="3"] .ev-sales2{transition-delay:1.1s}#s-evidence[data-k="3"] .ev-mg{transition-delay:1.4s}#s-evidence[data-k="3"] .ev-ask{transition-delay:1.8s}
#s-evidence[data-k="3"] .ev-d1{transition-delay:2.2s}#s-evidence[data-k="3"] .ev-d2{transition-delay:2.7s}#s-evidence[data-k="3"] .ev-fn{transition-delay:2.9s}
#s-evidence[data-k="3"] .ev-out{transition-delay:3.2s}#s-evidence[data-k="3"] .ev-noid{transition-delay:3.6s}
#s-evidence[data-k="3"] .ev-tr5{transition:stroke-dashoffset .8s var(--io) 1s}#s-evidence[data-k="3"] .ev-tr6{transition:stroke-dashoffset .8s var(--io) 2.4s}#s-evidence[data-k="3"] .ev-tr7{transition:stroke-dashoffset .6s var(--io) 3.3s}
#s-evidence[data-k="3"] .ev-cp5{transition-delay:2.3s}#s-evidence[data-k="3"] .ev-cp6{transition-delay:3.2s}
#s-evidence[data-k="3"] .ev-s3x{opacity:1;translate:0 0;transition-delay:1.3s}
#s-evidence[data-play="3"] .ev-d1 i{animation:evType .45s var(--out) both}
#s-evidence[data-play="3"] .ev-d1 i:nth-of-type(1){animation-delay:2.4s}#s-evidence[data-play="3"] .ev-d1 i:nth-of-type(2){animation-delay:2.55s}#s-evidence[data-play="3"] .ev-d1 i:nth-of-type(3){animation-delay:2.7s}
#s-evidence[data-play="3"] .ev-d1 i:nth-of-type(4){animation-delay:2.85s}#s-evidence[data-play="3"] .ev-d1 i:nth-of-type(5){animation-delay:3s}
/* the pull-back: words go, the shapes and the broken trail stay */
#s-evidence.rch4 .ev-world :is(p,span,small,b,div){color:transparent!important}
#s-evidence.rch4 .ev-world :is(.ev-bx,.ev-qk,.ev-tk,.ev-ret,.ev-fn,.ev-pain){opacity:0}
#s-evidence.rch4 .ev-world .ev-chs span,#s-evidence.rch4 .ev-world .ev-out span{color:transparent}
#s-evidence.rch4 .ev-cp{scale:1.9}
#s-evidence.rch4 .ev-tr{stroke-width:9}
#s-evidence.rch4 .ev-lim li{opacity:1;translate:0 0}
#s-evidence[data-k="4"] .ev-lim li{transition-delay:calc(1.4s + var(--o) * .14s)}
#s-evidence .ev-l1{--o:0}#s-evidence .ev-l2{--o:1}#s-evidence .ev-l3{--o:2}#s-evidence .ev-l4{--o:3}#s-evidence .ev-l5{--o:4}
#s-evidence.rch4 .ev-end{opacity:1;translate:0 0}
#s-evidence[data-k="4"] .ev-end{transition-delay:2.3s}
#s-evidence[data-k="4"] .ev-cp{transition:scale .6s var(--out) 1.3s}
#s-evidence[data-play="4"] .ev-cp{animation:evPulse 1s var(--out) 1.5s 2 both}

@keyframes evPop{0%{opacity:0;scale:.85}100%{opacity:1;scale:1}}
@keyframes evStamp{0%{opacity:0;scale:1.4}100%{opacity:1;scale:1}}
@keyframes evType{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes evPulse{0%{filter:drop-shadow(0 0 0 rgba(240,166,58,0))}50%{filter:drop-shadow(0 0 14px rgba(240,166,58,.9))}100%{filter:drop-shadow(0 0 0 rgba(240,166,58,0))}}
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-evidence *,body.calm #s-evidence *::before,body.calm #s-evidence *::after{transition:none!important;animation:none!important}