/* Scene 01 · "Điều kiện bị rơi" (upgrade 20/10).
   The Sales → Pricing handover is a gap. Route and equipment are handed across it into the Pricing file; the trucking condition
   slides to the lip and falls in. The quotation goes out without that line and gets the "Phải sửa lại" stamp (the same stamp
   scene 03 opens with). Four beats on #s-problem[data-pb], run on their own by app.js (config.js problem.beats):
   1 the email arrives · 2 handover across the gap · 3 the condition falls (JS physics, camera on .pb-stage) · 4 pull back, consequence.
   Geometry (card tops, gap, ports, tokens, the fall) comes from app.js pbLayout(). A cut (.pb-cut) lands on the same end frame.
   Type floor on the 1920 stage: 20 px. Only transform and opacity move during the pitch. */
/* performance: one 100 px shadow instead of three stacked 48–120 px blurs (looks the same on the navy ground, a third of the raster/blend work) */
#s-problem{--pb-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 0 0 1px rgba(190,208,235,.09),0 60px 100px -28px rgba(0,0,0,.92);--pc:#E8EDF4;--pi:#0E1727;--pm:#4F5F77;--pl:#D3DCE8;--amb:#F0A63A;--amb-ink:#9A5A08}
#s-problem .pb-stage{position:absolute;inset:0;transform-origin:var(--cox,950px) var(--coy,690px);transition:transform .9s var(--io)}
#s-problem .pb-stage>*,#s-problem .pb-tag{position:absolute;margin:0}
#s-problem.pb-cut,#s-problem.pb-cut *,#s-problem.pb-cut *::before,#s-problem.pb-cut *::after{transition:none!important;animation:none!important}

#s-problem .pb-tag{right:160px;top:112px;display:inline-flex;align-items:center;gap:10px;font:var(--nq-pill-font);color:var(--nq-pill-ink);background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px rgba(240,166,58,.92);padding:var(--nq-pill-pad);border-radius:999px}   /* LỆNH 42 §B4: the one label; amber edge and dot: the problem */
#s-problem .pb-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber)}

/* ---- title: turns over on beat 4 ---- */
#s-problem .pb-h{position:relative}
#s-problem .pb-t1,#s-problem .pb-t2{display:block;transition:opacity .4s var(--out),transform .6s var(--out)}
#s-problem .pb-t2{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(60%)}
#s-problem .pb-t2 em{font-style:normal;color:var(--amber)}
#s-problem[data-pb="4"] .pb-t1{opacity:0;transform:translateY(-60%);transition-delay:.25s}
#s-problem[data-pb="4"] .pb-t2{opacity:1;transform:none;transition-delay:.42s}

/* ---- camera: pushes in on the lip as the condition falls, holds, pulls back on beat 4 ---- */
#s-problem[data-pb="3"] .pb-stage{transform:translateY(-30px) scale(1.15);transition:transform 1.1s cubic-bezier(.45,0,.2,1) 1.62s}
#s-problem[data-pb="4"] .pb-stage{transform:none;transition:transform 1.05s var(--io)}

/* ---- 1 · the email: arrives like a new message, big and centred; lines come in quickly, left to right ---- */
#s-problem .pb-rfq{left:160px;top:300px;width:780px;box-sizing:border-box;padding:28px 40px 30px;border-radius:22px;background:var(--pc);color:var(--pi);transform-origin:0 0;z-index:2;
  box-shadow:var(--pb-shadow);transform:var(--hero0);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s var(--out)}
#s-problem:not([data-pb="0"]) .pb-rfq{opacity:1;transform:var(--hero)}
#s-problem[data-pb="2"] .pb-rfq{transform:none;transition:transform .85s var(--io)}
#s-problem:is([data-pb="3"],[data-pb="4"]) .pb-rfq{transform:var(--shrink);opacity:.5;transition:transform .8s var(--io),opacity .8s var(--io)}
#s-problem .pb-new{position:absolute;left:0;bottom:calc(100% + 14px);margin:0;display:inline-flex;align-items:center;gap:10px;padding:6px 16px 7px;border-radius:999px;
  font-size:20px;font-weight:600;color:#DCE6F7;background:rgba(127,176,255,.16);white-space:nowrap;transition:opacity .35s}
#s-problem .pb-new::before{content:"";width:9px;height:9px;border-radius:50%;background:#7FB0FF;box-shadow:0 0 10px #7FB0FF}
#s-problem:not([data-pb="1"]) .pb-new{opacity:0}
#s-problem .pb-rfq header{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--pl)}
#s-problem .pb-av{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:23px;color:#fff;background:linear-gradient(135deg,#3C6FE0,#6E9FF5)}
#s-problem .pb-rfq header b{display:block;font-size:25px;font-weight:600;line-height:1.25}
#s-problem .pb-rfq header span{display:block;font-size:23px;color:var(--pm);margin-top:1px}
#s-problem .pb-l{position:relative;margin:0;display:flex;align-items:baseline;gap:14px}
#s-problem .pb-l::after{content:"";position:absolute;inset:-3px -8px;background:var(--pc);transform-origin:100% 50%;transform:scaleX(1);transition:transform .3s cubic-bezier(.5,0,.75,0)}
#s-problem:not([data-pb="0"]) .pb-l::after{transform:scaleX(0)}
#s-problem[data-pb="1"] .pb-greet::after{transition-delay:.3s}#s-problem[data-pb="1"] .pb-route::after{transition-delay:.44s}#s-problem[data-pb="1"] .pb-eq::after{transition-delay:.56s}
#s-problem[data-pb="1"] .pb-gap-l::after{transition-delay:.66s}#s-problem[data-pb="1"] .pb-truck::after{transition-delay:.74s}#s-problem[data-pb="1"] .pb-sign::after{transition-delay:.88s}
#s-problem .pb-l>i{font-style:normal;color:#66758C;width:14px;flex:none}
#s-problem .pb-greet{display:block;font-size:24px;line-height:1.45;color:var(--pm);margin:16px 0 8px;text-wrap:balance}
#s-problem .pb-route,#s-problem .pb-eq,#s-problem .pb-truck{font-size:30px;line-height:1.3;font-weight:500;margin:6px 0}
#s-problem .k{font-weight:600;color:var(--pi);border-radius:6px;padding:0 5px;margin:0 -5px;background:linear-gradient(rgba(42,99,230,.18),rgba(42,99,230,.18)) no-repeat 0 0/0% 100%;transition:background-size .4s var(--io)}
#s-problem .pb-eq>span{color:#33445C}
#s-problem .pb-gap-l{font-size:23px;line-height:1.2;color:#7E8BA0}
#s-problem .pb-truck mark{color:inherit;padding:0 5px;margin:0 -5px;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 52%,rgba(240,166,58,.55) 52%) no-repeat 0 0/0% 100%;transition:background-size .4s var(--io)}
#s-problem .pb-sign{display:block;font-size:23px;color:var(--pm);margin-top:14px}
#s-problem[data-pb="2"] .k{background-size:100% 100%}
#s-problem[data-pb="2"] .pb-route .k{transition-delay:.62s}#s-problem[data-pb="2"] .pb-eq .k{transition-delay:.78s}
#s-problem:is([data-pb="3"],[data-pb="4"]) .pb-truck mark{background-size:100% 100%}
#s-problem[data-pb="3"] .pb-truck .m1{transition-delay:.25s}#s-problem[data-pb="3"] .pb-truck .m2{transition-delay:.5s}

/* ---- 2 · the gap: a dark slot with depth between the two desks; three inputs, one per field ---- */
#s-problem .pb-gap{left:950px;top:var(--gpt,250px);width:160px;height:var(--gph,740px);z-index:1;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,rgba(2,6,18,0) 0%,rgba(2,6,18,.6) 14%,rgba(1,3,10,.94) 100%);
  box-shadow:inset 1.5px 0 0 rgba(150,186,240,.34),inset -1.5px 0 0 rgba(150,186,240,.34),inset 0 -40px 50px -30px rgba(0,0,0,.9);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70px);mask-image:linear-gradient(180deg,transparent 0,#000 70px);
  transform:scaleY(0);transform-origin:50% 0;opacity:0;transition:transform .7s var(--io),opacity .3s}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) .pb-gap{transform:none;opacity:1}
#s-problem[data-pb="2"] .pb-gap{transition-delay:.2s}
#s-problem .pb-floor{position:absolute;left:10px;right:10px;bottom:var(--flb,16px);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(240,166,58,.6),transparent);opacity:0;transition:opacity .8s}
#s-problem:is([data-pb="3"],[data-pb="4"]) .pb-floor{opacity:1}
#s-problem[data-pb="3"] .pb-floor{transition-delay:2.3s}
#s-problem .pb-port{position:absolute;left:71px;width:18px;height:18px;margin-top:-9px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(190,208,235,.55);background:#0A1736;
  opacity:0;transition:opacity .4s,background-color .3s,border-color .3s,box-shadow .3s}
#s-problem .pb-port.p1{top:var(--q1)}#s-problem .pb-port.p2{top:var(--q2)}#s-problem .pb-port.p3{top:var(--q3)}
#s-problem .pb-port::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #9CC3FF;opacity:0}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) .pb-port{opacity:1}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) :is(.p1,.p2){background-color:#7FB0FF;border-color:#D6E6FF;box-shadow:0 0 16px rgba(127,176,255,.85)}
#s-problem[data-pb="2"] .pb-port{transition-delay:.5s}
#s-problem[data-pb="2"] .p1{transition-delay:.5s,1.95s,1.95s,1.95s}#s-problem[data-pb="2"] .p2{transition-delay:.5s,2.2s,2.2s,2.2s}
#s-problem[data-pb="2"] .p1::after{animation:pbPing .7s cubic-bezier(.2,.7,.2,1) 1.95s}
#s-problem[data-pb="2"] .p2::after{animation:pbPing .7s cubic-bezier(.2,.7,.2,1) 2.2s}
@keyframes pbPing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
#s-problem:is([data-pb="3"],[data-pb="4"]) .p3{border-color:rgba(240,166,58,.6)}
#s-problem .pb-side{top:var(--sdt,230px);font-size:22px;font-weight:600;letter-spacing:.04em;color:#C6D3E8;opacity:0;transition:opacity .5s var(--out)}
#s-problem .pb-side.l{right:980px}#s-problem .pb-side.r{left:1120px}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) .pb-side{opacity:1}
#s-problem[data-pb="2"] .pb-side{transition-delay:.45s}

/* ---- the Pricing file: two fields receive their values; the third stays empty ---- */
#s-problem .pb-file{left:1120px;top:300px;width:640px;height:361px;box-sizing:border-box;border-radius:22px;background:var(--pc);color:var(--pi);overflow:hidden;z-index:2;
  box-shadow:var(--pb-shadow);opacity:0;translate:44px 0;transition:opacity .6s var(--out),translate .9s var(--out)}
#s-problem .pb-file header{display:flex;align-items:center;height:62px;padding:0 36px;border-bottom:1px solid var(--pl)}
#s-problem .pb-file header b{font-size:20px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#33445C}
#s-problem .pb-f{position:absolute;left:0;right:0;height:99px;box-sizing:border-box;padding:14px 36px 0;border-bottom:1px solid #DCE3EC;transition:background-color .5s var(--io)}
#s-problem .f-route{top:62px}#s-problem .f-eq{top:161px}#s-problem .f-scope{top:260px;border-bottom:0;height:101px}
#s-problem .pb-f>span{display:block;font-size:20px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pm);transition:color .45s}
#s-problem .pb-f .slot{position:absolute;left:36px;top:80px;width:300px;border-bottom:2px dashed #B9C5D6;transition:opacity .3s,border-color .4s}
#s-problem .pb-dash{position:absolute;left:36px;top:52px;font-size:32px;font-weight:600;line-height:1;color:#66758C;opacity:0;transition:opacity .4s}
#s-problem .pb-nr{position:absolute;right:36px;top:46px;font-style:normal;font-size:22px;font-weight:600;color:var(--amb-ink);opacity:0;transition:opacity .4s}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) .pb-file{opacity:1;translate:0 0}
#s-problem[data-pb="2"] .pb-file{transition-delay:.3s}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) :is(.f-route,.f-eq) .slot{opacity:0}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) :is(.f-route,.f-eq)>span{color:#2A5BD0}
#s-problem[data-pb="2"] .f-route .slot{transition-delay:1.9s}#s-problem[data-pb="2"] .f-eq .slot{transition-delay:2.15s}
#s-problem[data-pb="2"] .f-route>span{transition-delay:1.95s}#s-problem[data-pb="2"] .f-eq>span{transition-delay:2.2s}
#s-problem:is([data-pb="3"],[data-pb="4"]) .f-scope{background-color:rgba(240,166,58,.09)}
#s-problem:is([data-pb="3"],[data-pb="4"]) .f-scope>span{color:var(--amb-ink)}
#s-problem:is([data-pb="3"],[data-pb="4"]) .f-scope .slot{left:84px;width:252px;border-bottom:2.5px dashed #7A889C}
#s-problem:is([data-pb="3"],[data-pb="4"]) :is(.pb-dash,.pb-nr){opacity:1}
#s-problem[data-pb="3"] .f-scope,#s-problem[data-pb="3"] .f-scope>span,#s-problem[data-pb="3"] .f-scope .slot,#s-problem[data-pb="3"] .pb-dash{transition-delay:2.25s}
#s-problem[data-pb="3"] .pb-nr{transition-delay:2.45s}

/* ---- the two values handed across (the email keeps its lines) ---- */
#s-problem .pb-tok{left:0;top:0;z-index:4;opacity:0;pointer-events:none;white-space:nowrap}
#s-problem:is([data-pb="2"],[data-pb="3"],[data-pb="4"]) .pb-tok{opacity:1}
#s-problem .pb-tok>div{position:relative;display:inline-block;padding:2px 10px;margin:-2px -10px;border-radius:10px;font-size:30px;line-height:1.3;font-weight:600;color:var(--pi);
  background-color:rgba(255,255,255,0);box-shadow:0 0 0 2px rgba(42,99,230,0),0 18px 36px -16px rgba(0,0,0,0);transition:background-color .3s,box-shadow .3s}
#s-problem .pb-tok.lift>div{background-color:#fff;box-shadow:0 0 0 2px rgba(42,99,230,.75),0 20px 38px -14px rgba(0,0,0,.6)}
#s-problem .pb-tok span{display:block;transition:opacity .25s}
#s-problem .pb-tok .b{position:absolute;left:10px;top:2px;opacity:0}
#s-problem .pb-tok.norm .a{opacity:0}#s-problem .pb-tok.norm .b{opacity:1}

/* ---- 3 · the condition that falls ---- */
#s-problem .pb-drop{left:0;top:0;z-index:5;display:flex;flex-direction:column;align-items:flex-start;padding:9px 16px 10px;border-radius:14px;background:#FFE2B0;color:#5E3404;
  box-shadow:0 0 0 2px var(--amb),0 16px 30px -12px rgba(0,0,0,.6);opacity:0;will-change:transform}
#s-problem .pb-drop b{font-size:26px;font-weight:700;line-height:1.15}
#s-problem .pb-drop span{font-size:22px;font-weight:600;line-height:1.2}
#s-problem .pb-drop::after{content:"";position:absolute;inset:-28px;z-index:-1;border-radius:34px;background:radial-gradient(closest-side,rgba(240,166,58,.5),rgba(240,166,58,0));opacity:0;transition:opacity .7s}
#s-problem .pb-drop.rest::after{opacity:1}

/* ---- 4 · the consequence: the quotation goes out without that line ---- */
#s-problem .pb-quote{left:1150px;top:var(--qt,720px);width:580px;box-sizing:border-box;padding:18px 26px 20px;border-radius:14px;background:#F2EEE6;color:#1B2433;z-index:1;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 30px 60px -24px rgba(0,0,0,.75);opacity:0;transform:translateY(-130px)}
#s-problem[data-pb="4"] .pb-quote{opacity:1;transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) .3s,opacity .3s .3s}
#s-problem .pb-quote p{margin:0}
#s-problem .pq-k{font-size:22px;font-weight:600;color:#4A5970}
#s-problem .pq-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px!important;font-size:28px;font-weight:600;letter-spacing:-.005em}
#s-problem .pq-ok{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:#D9E6FB}
#s-problem .pq-ok::after{content:"";position:absolute;left:12px;top:6px;width:8px;height:15px;border:solid #2A5BD0;border-width:0 3px 3px 0;transform:rotate(45deg)}
#s-problem .pq-gap{flex:none;min-width:68px;box-sizing:border-box;text-align:center;padding:0 12px;border:2px dashed #C77A12;border-radius:8px;font-size:26px;font-weight:700;color:#7E4705;background:rgba(240,166,58,.1)}
#s-problem .pq-st{position:absolute;right:24px;top:14px}
#s-problem .pq-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;opacity:0;scale:1.3}
#s-problem[data-pb="4"] .pq-st span{opacity:1;scale:1;transition:opacity .2s 1.72s,scale .42s var(--out) 1.72s}

/* ---- click to trace (Q&A only: end frame, after the mouse has moved) ---- */
#s-problem .pb-link{left:0;top:0;width:1920px;height:1080px;overflow:visible;pointer-events:none;z-index:6}
#s-problem .pb-tr{fill:none;stroke:#7FB0FF;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 6px rgba(127,176,255,.7))}
#s-problem .pb-tr-x{fill:none;stroke:var(--amb);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:2 10;opacity:0}
#s-problem[data-tr] .pb-tr{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.3,0,.2,1)}
#s-problem[data-tr="scope"] .pb-tr{stroke:var(--amb);filter:drop-shadow(0 0 6px rgba(240,166,58,.7))}
#s-problem[data-tr="scope"] .pb-tr-x{opacity:1;transition:opacity .2s .55s}
#s-problem .pb-nf{left:950px;width:160px;top:var(--nfy,560px);text-align:center;font-size:20px;font-weight:600;line-height:1.2;color:#FFC46B;opacity:0;pointer-events:none}
#s-problem[data-tr="scope"] .pb-nf{opacity:1;transition:opacity .25s .6s}
#s-problem[data-tr] .pb-rfq{opacity:1}
#s-problem[data-tr="route"] .pb-route .k,#s-problem[data-tr="eq"] .pb-eq .k{background-size:100% 100%;transition-delay:.45s}
#s-problem.pb-tr-on .pb-f{cursor:pointer}
#s-problem.pb-tr-on .pb-f:hover{background-color:rgba(42,99,230,.08)}
#s-problem.pb-tr-on .f-scope:hover{background-color:rgba(240,166,58,.16)}

/* the stage vignette would grey the right edge of the Pricing file; soften it only while this scene is on */
#stage[data-scene="problem"] #shade{opacity:.72;transition:opacity .8s}   /* = the old .35 shade under the chain vignette */
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #s-problem *,body.calm #s-problem *::before,body.calm #s-problem *::after{transition:none!important;animation:none!important}

/* ================= the fallen condition, carried across scenes (HUD outside the scenes, app.js NQ_LOST) ================= */
#nq-hud{position:absolute;inset:0;z-index:46;pointer-events:none;transition:transform .25s var(--out)}
/* the navigation pill (bottom-left, shown while the mouse moves) never covers the chip */
body.pill-on #nq-hud{transform:translateY(-96px)}
#nq-lost{position:absolute;left:0;top:0;opacity:0;visibility:hidden;transform:translate(160px,980px);transform-origin:0 0;will-change:transform,opacity}
#nq-lost.on{opacity:1;visibility:visible}
/* LỆNH 42 §B4: the chip is the deck's one label (tokens: pitch.css), the amber edge and dot: the problem that travels with the quote */
#nq-lost .lc-in{display:flex;align-items:center;gap:14px;padding:8px 26px 10px 20px;border-radius:999px;background:var(--nq-pill-bg);
  box-shadow:inset 0 0 0 1px rgba(240,166,58,.92);animation:lcBreath 3s ease-in-out infinite}
#nq-lost .lc-dot{flex:none;width:12px;height:12px;border-radius:50%;background:#F0A63A}
#nq-lost .lc-tx b{display:block;font:var(--nq-pill-font);color:var(--nq-pill-ink);white-space:nowrap}
#nq-lost .lc-tx small{display:block;font-size:20px;font-weight:500;line-height:1.25;color:rgba(255,226,184,.92);white-space:nowrap}
@keyframes lcBreath{0%,100%{opacity:.7}50%{opacity:1}}
.nq-pin{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;line-height:1;color:#3B2203;
  background:#F0A63A;box-shadow:0 0 0 4px rgba(240,166,58,.25),0 8px 16px rgba(0,0,0,.5)}
/* hidden whenever Q&A, the appendix, the index or the Q&A 100 layer is open */
body:is(.qa100-active,.qa-open,.nav-open,.ov-open) #nq-hud{opacity:0;visibility:hidden}   /* classes set by app.js / nav.js / qa-ui.js */
/* calm: was @media (prefers-reduced-motion:reduce); body.calm is set by app.js and can be turned off */
body.calm #nq-lost .lc-in{animation:none}