/* Scene 03 · "Chậm ở đâu? Vì điều gì?" — a root-cause investigation on one illustrative record (report 2.2, figure 2.2, table 2.2).
   data-k 1 the symptom: the record, two stamps, the evidence scattered around it
   data-k 2 the descent: each "why" opens a deeper layer under the record; the fifth is the root (auto-paced, Space completes it)
   data-k 3 what it costs: the 5 Whys result, then the record fans out into the five risk groups of table 2.2
   data-k 4 the conclusion: the root is a gap in data governance. rch1..rch4 mark beats reached; data-play is set only on an animated entry (Back / jump / replay cut). */
#s-cause .head .h1{font-size:64px}
#s-cause :is(.cz-src,.cz-rec,.cz-bit,.cz-say,.cz-dig,.cz-w,.cz-q,.cz-n,.cz-a,.cz-shaft,.cz-drill,.cz-res,.cz-fan,.cz-harm,.cz-end){position:absolute;margin:0}
#s-cause .cz-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-cause .cz-src::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

/* ---- the record: one paper object that moves through the scene ---- */
:is(#s-cause,#rfq-ghost) .cz-rec{left:760px;top:360px;width:400px;box-sizing:border-box;padding:20px 26px 22px;border-radius:14px;background:#F2EEE6;color:#1B2433;transform-origin:0 0;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -24px rgba(0,0,0,.75)}
#s-cause .cz-rec{opacity:0;transform:translateY(-18px);transition:opacity .5s var(--out),transform 1s var(--io)}
:is(#s-cause,#rfq-ghost) .cz-rec p{margin:0}
:is(#s-cause,#rfq-ghost) .cz-rk{font-size:22px;font-weight:600;color:#5B6B82}
:is(#s-cause,#rfq-ghost) .cz-rt{margin-top:6px!important;font-size:30px;font-weight:700;letter-spacing:-.01em}
:is(#s-cause,#rfq-ghost) .cz-cg{margin-top:2px!important;font-size:24px;font-weight:600;color:#3E4B60}
:is(#s-cause,#rfq-ghost) .cz-st{margin-top:14px!important;display:flex;gap:14px}
:is(#s-cause,#rfq-ghost) .cz-st span{display:inline-block;padding:2px 12px 3px;border:2.5px solid #C77A12;border-radius:7px;font-size:24px;font-weight:700;color:#9A5A08;rotate:-3deg}
:is(#s-cause,#rfq-ghost) .cz-st span+span{rotate:2deg}
#s-cause .cz-st span{opacity:0;scale:1.3;transition:opacity .25s,scale .45s var(--out)}
#rfq-ghost .cz-rec{position:relative;left:auto;top:auto;transform:none;opacity:1}

/* ---- beat 1 · evidence scattered around the record ---- */
#s-cause .cz-bit{display:flex;align-items:center;gap:12px;padding:14px 20px 15px;border-radius:9px;background:#E7E2D8;color:#1B2433;font-size:24px;font-weight:600;white-space:nowrap;
  box-shadow:0 18px 36px -18px rgba(0,0,0,.8);opacity:0;transition:opacity .5s var(--out),transform .9s var(--out)}
#s-cause .cz-i1{left:296px;top:356px;transform:translate(-260px,-30px) rotate(-14deg)}
#s-cause .cz-i2{left:384px;top:540px;transform:translate(-260px,50px) rotate(12deg)}
#s-cause .cz-i3{left:1296px;top:352px;transform:translate(260px,-30px) rotate(14deg)}
#s-cause .cz-i4{left:1262px;top:544px;transform:translate(260px,50px) rotate(-12deg)}
#s-cause .cz-bit i{flex:none;position:relative;width:28px;height:22px;box-sizing:border-box;border:2.5px solid #3A4352;border-radius:4px}
#s-cause .g-chat{border-radius:9px!important}
#s-cause .g-chat::after{content:"";position:absolute;left:4px;bottom:-7px;width:7px;height:7px;border-left:2.5px solid #3A4352;border-bottom:2.5px solid #3A4352;transform:skewX(-20deg);background:#E7E2D8}
#s-cause .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);transform-origin:50% 50%}
#s-cause .g-grid{background:linear-gradient(#3A4352,#3A4352) 0 7px/100% 2px no-repeat,linear-gradient(#3A4352,#3A4352) 9px 0/2px 100% no-repeat}
#s-cause .g-note{border-radius:2px 8px 2px 2px!important;background:linear-gradient(#3A4352,#3A4352) 4px 6px/12px 2px no-repeat,linear-gradient(#3A4352,#3A4352) 4px 11px/9px 2px no-repeat}
#s-cause .cz-say{left:160px;right:160px;top:740px;text-align:center;font-size:40px;font-weight:600;letter-spacing:-.01em;color:var(--white);opacity:0;translate:0 10px;transition:opacity .5s var(--out),translate .7s var(--out)}
#s-cause .cz-say b{color:#FFC46B}

/* ---- beat 2 · the descent through the 5 Whys ---- */
#s-cause .cz-dig{inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
#s-cause .cz-shaft{left:698px;top:384px;width:4px;height:560px;border-radius:2px;background:linear-gradient(#8FBAFF,rgba(143,186,255,.35));transform-origin:50% 0;transform:scaleY(0)}
#s-cause .cz-drill{left:686px;top:430px;width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:3px solid #CFE2FF;background:#0A1326;box-shadow:0 0 0 8px rgba(127,176,255,.18),0 0 26px rgba(127,176,255,.6);opacity:0}
#s-cause .cz-w{left:160px;right:160px;height:104px;opacity:0;translate:0 18px;transition:opacity .45s var(--out),translate .6s var(--out)}
#s-cause .cz-w::before{content:"";position:absolute;inset:0 -160px;border-top:1px solid rgba(190,208,235,.16);background:rgba(127,176,255,var(--t))}
#s-cause .cz-w1{top:392px;--t:.03}#s-cause .cz-w2{top:504px;--t:.05}#s-cause .cz-w3{top:616px;--t:.07}#s-cause .cz-w4{top:728px;--t:.09}#s-cause .cz-w5{top:840px}
#s-cause .cz-w5::before{background:rgba(240,166,58,.12);border-top-color:rgba(240,166,58,.4)}
#s-cause .cz-q{left:0;top:50%;width:500px;translate:0 -50%;text-align:right;font-size:24px;line-height:1.3;color:#A9B8CF}
#s-cause .cz-n{left:520px;top:50%;width:40px;height:40px;translate:0 -50%;box-sizing:border-box;border-radius:50%;border:2.5px solid #8FBAFF;background:#0A1326;display:grid;place-items:center;font-size:22px;font-weight:700;color:var(--white)}
#s-cause .cz-a{left:600px;right:0;top:50%;translate:0 -50%;font-size:32px;font-weight:600;line-height:1.2;color:var(--white)}
#s-cause .cz-root .cz-n{border-color:var(--amber);background:var(--amber);color:#1A1205}
#s-cause .cz-root .cz-a{color:#FFC46B}

/* ---- beat 3 · what it costs: the result line, then the record fans out into the five risk groups (table 2.2) ---- */
#s-cause .cz-res{left:160px;top:252px;font-size:26px;color:#DCE4F0;opacity:0;translate:0 8px;transition:opacity .45s var(--out),translate .6s var(--out)}
#s-cause .cz-res b{margin-right:14px;padding:2px 12px 4px;border-radius:8px;background:rgba(240,166,58,.16);color:#FFC46B;font-weight:700}
#s-cause .cz-fan{left:0;top:0;width:1920px;height:1080px;overflow:visible;pointer-events:none}
#s-cause .cz-fan path{fill:none;stroke:#F0A63A;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.85;transition:stroke-dashoffset .55s var(--io),opacity .4s}
#s-cause .cz-harm{left:812px;top:326px;width:948px}
#s-cause .cz-hm{position:relative;height:88px;display:grid;grid-template-columns:330px 1fr;column-gap:24px;align-items:center;border-top:1px solid rgba(190,208,235,.14);opacity:0;translate:16px 0;transition:opacity .45s var(--out),translate .6s var(--out)}
#s-cause .cz-hm b{font-size:30px;font-weight:700;line-height:1.15;color:var(--white)}
#s-cause .cz-hm span{font-size:22px;line-height:1.3;color:#C9D4E5}
#s-cause .cz-hm span em{display:block;font-style:normal;font-weight:700;color:#FFC46B}
/* ---- beat 4 · the conclusion ---- */
#s-cause .cz-end{left:160px;top:808px;width:1600px;opacity:0;translate:0 12px;transition:opacity .6s var(--out),translate .8s var(--out)}
#s-cause .cz-end p{margin:0}
#s-cause .cz-e1{font-size:46px;font-weight:700;letter-spacing:-.015em;color:var(--white)}
#s-cause .cz-e2{margin-top:8px!important;font-size:32px;line-height:1.25;color:#DCE4F0}
#s-cause .cz-e3{margin-top:12px!important;font-size:22px;color:#A9B8CF}

/* ---- states ---- */
#s-cause.rch1 .cz-rec{opacity:1;transform:none}
#s-cause.rch1 .cz-st span{opacity:1;scale:1}
#s-cause[data-k="1"] .cz-st span{transition-delay:1.1s}#s-cause[data-k="1"] .cz-st span+span{transition-delay:1.3s}
#s-cause[data-k="1"] .cz-bit{opacity:1}
#s-cause[data-k="1"] .cz-i1{transform:rotate(-6deg);transition-delay:.3s}#s-cause[data-k="1"] .cz-i2{transform:rotate(4deg);transition-delay:.45s}
#s-cause[data-k="1"] .cz-i3{transform:rotate(5deg);transition-delay:.6s}#s-cause[data-k="1"] .cz-i4{transform:rotate(-4deg);transition-delay:.75s}
#s-cause[data-k="1"] .cz-say{opacity:1;translate:0 0;transition-delay:1.5s}
/* the scraps are pulled into the record when the descent starts */
#s-cause.rch2 .cz-bit{opacity:0;transition:opacity .35s,transform .6s var(--io)}
#s-cause.rch2 .cz-i1{transform:translate(420px,60px) scale(.4)}#s-cause.rch2 .cz-i2{transform:translate(330px,-110px) scale(.4)}
#s-cause.rch2 .cz-i3{transform:translate(-500px,60px) scale(.4)}#s-cause.rch2 .cz-i4{transform:translate(-460px,-110px) scale(.4)}
#s-cause[data-k="2"] .cz-rec{transform:translate(-220px,-138px) scale(.78)}
#s-cause[data-k="2"] .cz-dig{opacity:1}
#s-cause[data-k="2"] .cz-shaft{transform:scaleY(1);transition:transform 8.2s linear .4s}
#s-cause[data-k="2"] .cz-drill{opacity:1;transform:translateY(448px);transition:opacity .3s .3s}
#s-cause[data-k="2"] .cz-w{opacity:1;translate:0 0}
#s-cause[data-k="2"] .cz-w1{transition-delay:.4s}#s-cause[data-k="2"] .cz-w2{transition-delay:2.3s}#s-cause[data-k="2"] .cz-w3{transition-delay:4.2s}
#s-cause[data-k="2"] .cz-w4{transition-delay:6.1s}#s-cause[data-k="2"] .cz-w5{transition-delay:8s}
#s-cause[data-play="2"] .cz-drill{animation:czDrill 8.4s linear both}
@keyframes czDrill{0%,4%{transform:translateY(0)}22%,26%{transform:translateY(112px)}45%,49%{transform:translateY(224px)}68%,72%{transform:translateY(336px)}91%,100%{transform:translateY(448px)}}
/* what it costs: the descent closes, the record moves left and fans out into the five consequences */
#s-cause.rch3 .cz-rec{transform:translate(-560px,96px)}
#s-cause.rch3 .cz-res{opacity:1;translate:0 0}
#s-cause.rch3 .cz-fan path{stroke-dashoffset:0}
#s-cause.rch3 .cz-hm{opacity:1;translate:0 0}
#s-cause[data-k="3"] .cz-res{transition-delay:.3s}
#s-cause[data-k="3"] .cz-fan path{transition-delay:calc(.8s + var(--o) * .18s)}
#s-cause .cz-fl1{--o:0}#s-cause .cz-fl2{--o:1}#s-cause .cz-fl3{--o:2}#s-cause .cz-fl4{--o:3}#s-cause .cz-fl5{--o:4}
#s-cause[data-k="3"] .cz-hm{transition-delay:calc(1.05s + var(--o) * .18s)}
/* the conclusion: the consequences step back, the root is named */
#s-cause.rch4 .cz-hm{opacity:.32;translate:0 0}
#s-cause.rch4 .cz-fan path{opacity:.3}
#s-cause.rch4 .cz-res{opacity:0}
#s-cause.rch4 .cz-end{opacity:1;translate:0 0;transition-delay:.4s}
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-cause *{transition:none!important;animation:none!important}