/* Scene upgrade (21/10): compete — layout and looks on top of the shared material (up-material.css).
   One dark desktop (02's wallpaper and bezel) holds the forwarder's chain of work as five real windows (236 × 196, 12 apart, x 540–1768):
   a contact card, a quotation sheet, a booking form, stamped documents with a checklist, a ledger. Above them the three groups of report 3.4
   as tinted slabs with a lip and a shadow (depth), each on the row of its label: slate = domestic systems (whole chain, seams per segment),
   teal = international platforms (the quotation segment; dashed "tùy sản phẩm" over CRM and booking), warm = Excel · email · Zalo (the tools,
   rendered, on every segment, joined by a dotted hand-off line).
   1 the desktop settles, windows rise one by one, slabs run out left to right, the tools drop on their band (≈1.3 s)
   2 the quotation column lights through every band; the other windows go under a veil
   3 the quotation window turns NEXQUOTE blue (header, source link on every masked amount, one light sweep); step 1 hangs from it on a blue
     stem; step 2 dashed, later. Only transform and opacity move; shadows are static. */
#s-compete :is(.c6-map,.c6-seg,.c6-col){display:none!important}
#s-compete :is(.c6-lab,.c6-opt,.c6-st1,.c6-st2,.c6-say,.c6-pilot,.c6-src){position:absolute;margin:0}
#s-compete .c7{position:absolute;inset:0;pointer-events:none}
#s-compete .c7>*{position:absolute;margin:0;box-sizing:border-box;display:block}
#s-compete .c7 svg{display:block;overflow:visible}
#s-compete .c7>.c7-defs{left:0;top:0;width:0;height:0;overflow:hidden}

/* ---- the desktop ---- */
#s-compete .c7-desk{left:520px;top:216px;width:1268px;height:496px;border-radius:16px;background-color:#1A2846;background-image:
  radial-gradient(900px 520px at 22% 14%,rgba(120,150,210,.17),rgba(120,150,210,0) 70%),
  radial-gradient(1000px 640px at 84% 100%,rgba(70,96,160,.15),rgba(70,96,160,0) 70%),
  radial-gradient(ellipse 80% 90% at 50% 46%,rgba(4,10,30,0) 60%,rgba(4,10,30,.45) 100%),
  linear-gradient(160deg,#25365A 0,#1A2846 45%,#131E36 100%);
  box-shadow:inset 0 0 0 8px #0B111E,inset 0 0 0 9px rgba(160,180,215,.2),0 2px 4px rgba(0,0,0,.5),0 34px 50px -30px rgba(0,0,0,.85);
  opacity:0;transform:translateY(16px);transition:opacity .45s var(--out),transform .7s var(--out)}
#s-compete .c7-glass{left:528px;top:224px;width:1252px;height:480px;border-radius:9px;z-index:5;background:linear-gradient(118deg,rgba(255,196,128,.09) 0,rgba(255,196,128,.035) 24%,rgba(255,196,128,0) 42%),linear-gradient(118deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.03) 66%,rgba(255,255,255,0) 72%);opacity:0;transition:opacity .6s}

/* ---- the coverage bands: a lit face, a darker lip below it (its thickness), a contact shadow ---- */
#s-compete .c7-band{height:36px;border-radius:8px;transform-origin:0 50%;transform:scaleX(0);opacity:0;transition:transform .5s var(--io),opacity .2s}
#s-compete .c7-band::after{content:"";position:absolute;left:2px;right:2px;top:100%;height:7px;border-radius:0 0 7px 7px;background:var(--lip)}
#s-compete .c7-b1{left:540px;top:234px;width:1228px;--lip:linear-gradient(#36435F,#232D44);
  background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 240px,rgba(12,18,32,.6) 240px 243px,rgba(255,255,255,.16) 243px 244px,rgba(0,0,0,0) 244px 248px),
  linear-gradient(#7486A6 0,#5A6B8C 55%,#4B5B7A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(200,214,240,.22),0 18px 22px -12px rgba(0,0,0,.75)}
#s-compete .c7-b2{left:788px;top:332px;width:236px;--lip:linear-gradient(#22525C,#173A42);background:linear-gradient(#5AA0AB 0,#41808C 55%,#356F7A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(170,225,232,.25),0 18px 22px -12px rgba(0,0,0,.75)}
#s-compete .c7-gh{top:332px;width:236px;height:36px;border-radius:8px;border:2px dashed rgba(122,196,206,.7);background:rgba(65,128,140,.12);opacity:0;transition:opacity .35s}
#s-compete .c7-gh.g1{left:540px}#s-compete .c7-gh.g2{left:1036px}
#s-compete .c7-b3{left:540px;top:426px;width:1228px;height:48px;--lip:linear-gradient(#5E4219,#43300F);
  background:linear-gradient(#A6875A 0,#8A6C42 60%,#7B603B 100%);
  box-shadow:inset 0 1px 0 rgba(255,232,190,.42),inset 0 0 0 1px rgba(255,206,140,.3),0 18px 22px -12px rgba(0,0,0,.7)}
#s-compete .c7-hand{left:540px;top:426px;z-index:2;opacity:0;transition:opacity .4s}
#s-compete .c7-hand path{fill:none;stroke:rgba(255,206,140,.75);stroke-width:2.2;stroke-dasharray:.5 7;stroke-linecap:round}
#s-compete .c7-ic{z-index:2;opacity:0;transform:translateY(-18px) scale(.9);transition:opacity .22s,transform .38s cubic-bezier(.3,1.45,.55,1)}

/* ---- the five windows ---- */
#s-compete .c7-t{top:496px;width:236px;height:196px;z-index:3;border-radius:10px;overflow:hidden;background:#F5F7FA;color:#18212F;
  box-shadow:0 0 0 1px rgba(20,32,56,.55),0 2px 3px rgba(0,0,0,.35),0 20px 34px -14px rgba(0,0,0,.7);contain:paint;
  opacity:0;transform:translateY(30px);transition:opacity .3s,transform .65s cubic-bezier(.2,.9,.25,1)}
#s-compete .c7-t>*{position:absolute;left:0;margin:0}
#s-compete .c7-tb,#s-compete .c7-qtb{top:0;width:236px;height:40px;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;background:linear-gradient(#ECEFF4,#E0E5EC);border-bottom:1px solid #C6CEDA}
#s-compete .c7-tb b,#s-compete .c7-qtb b{font-size:21px;line-height:1;font-weight:600;color:#253042;white-space:nowrap;letter-spacing:-.012em}
#s-compete .c7-bd,#s-compete .c7-ql{top:40px;width:236px;height:156px}
#s-compete .c7-ql,#s-compete .c7-qtb{opacity:0;transition:opacity .35s}
#s-compete .c7-tb{background-color:#E6EAF0}
#s-compete .c7-qtb{background:#2C64D8 linear-gradient(#3C79EE,#2558CC);border-bottom-color:#1B47AE}
#s-compete .c7-qtb b{color:#fff}
#s-compete .c7-sw{top:0;left:-130px;width:120px;height:196px;opacity:0;background:linear-gradient(100deg,rgba(150,195,255,0) 0,rgba(170,208,255,.5) 50%,rgba(150,195,255,0) 100%);transform:translateX(0)}
#s-compete .c7-t .nq-veil{top:0;left:0;width:100%;height:100%;transition:opacity .4s}

/* ---- the quotation column (beat 2) and the lit window (beat 3) ---- */
#s-compete .c7-colb{left:788px;top:226px;width:236px;height:256px;z-index:1;border-radius:9px;background:linear-gradient(rgba(79,134,240,.34),rgba(47,107,224,.16));opacity:0;transition:opacity .35s}
#s-compete .c7-qg{left:736px;top:440px;width:340px;height:310px;background:radial-gradient(closest-side,rgba(47,107,224,.5),rgba(47,107,224,0));opacity:0;transition:opacity .5s}
#s-compete .c7-col{left:780px;top:224px;width:252px;height:476px;z-index:4;border-radius:14px;border:2px solid #5A8EF2;box-shadow:0 0 0 1px rgba(10,20,40,.4),0 0 26px rgba(47,107,224,.45),inset 0 0 20px rgba(47,107,224,.18);opacity:0;transition:opacity .35s}
#s-compete .c7-qf{left:782px;top:484px;width:248px;height:208px;z-index:4;border-radius:13px;box-shadow:0 0 0 3px #3D7BF0,0 0 0 8px rgba(47,107,224,.24),0 0 46px rgba(80,140,255,.55);opacity:0;transition:opacity .35s}
#s-compete .c7-stem{left:903px;top:686px;width:6px;height:56px;z-index:4;border-radius:3px;background:linear-gradient(#9CC2FF,#3D7BF0);box-shadow:0 0 0 4px rgba(90,143,246,.22),0 0 16px rgba(127,176,255,.7);transform-origin:50% 0;transform:scaleY(0);opacity:0;transition:transform .3s var(--io),opacity .15s}

/* ---- the labels (rows of the bands), the chain, the team's route ---- */
#s-compete .c6-lab{left:160px;width:340px;opacity:0;translate:-10px 0;transition:opacity .4s var(--out),translate .5s var(--out)}
#s-compete .c6-lab .k{display:flex;align-items:center;gap:9px;font-size:20px;line-height:1.1;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#AFBDD3}
#s-compete .c6-lab b{display:block;margin-top:2px;font-size:28px;line-height:1.12;font-weight:600;color:var(--white)}
#s-compete .c6-lab .x{display:block;margin-top:2px;font-size:20px;line-height:1.2;color:#BAC6D8;white-space:nowrap}
#s-compete :is(.l-f,.l-q,.l-x) .k::before{content:"";flex:none;width:14px;height:14px;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#s-compete .l-f .k::before{background:linear-gradient(#7486A6,#4B5B7A)}
#s-compete .l-q .k::before{background:linear-gradient(#5AA0AB,#356F7A)}
#s-compete .l-x .k::before{background:linear-gradient(#FFC46B,#C8822A)}
#s-compete .l-f{top:212px}#s-compete .l-q{top:310px}#s-compete .l-x{top:410px}#s-compete .l-b{top:582px}#s-compete .l-n{top:752px}
#s-compete .l-n b{color:#7FB0FF}#s-compete .l-n .k{color:#A9C4F5}
#s-compete .c6-opt{top:332px;width:236px;height:36px;display:grid;place-items:center;font-size:20px;font-weight:500;color:#B5D6DB;opacity:0;transition:opacity .35s}
#s-compete .c6-opt.o1{left:540px}#s-compete .c6-opt.o2{left:1036px}

/* step 1: a blue card hanging from the quotation window · step 2: dashed, later */
#s-compete .c6-st1{left:741px;top:742px;width:330px;box-sizing:border-box;padding:12px 18px 13px;border-radius:12px;background-color:#173E95;background-image:linear-gradient(180deg,#2559C9 0,#173E95 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(127,176,255,.6),0 0 0 5px rgba(47,107,224,.2),0 18px 34px -12px rgba(0,0,0,.75);
  opacity:0;transform:translateY(-22px) scale(.97);transform-origin:50% 0;transition:opacity .3s,transform .5s var(--out)}
#s-compete .c6-st1 .k,#s-compete .c6-st2 .k{display:block;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#D8E6FF}
#s-compete .c6-st1 b{display:block;margin-top:3px;font-size:22px;line-height:1.25;font-weight:700;color:#fff;white-space:nowrap}
#s-compete .c6-st1 .x{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:20px;line-height:1.25;color:#E1EBFF;white-space:nowrap}
#s-compete .c6-st1 .x .c7-mi{flex:none;display:block;margin-right:1px}
#s-compete .c6-st1 .x .c7-mi svg{display:block;overflow:visible}
#s-compete .c6-st2{left:1090px;top:742px;width:678px;height:106px;box-sizing:border-box;padding:13px 20px;border-radius:12px;border:2px dashed rgba(127,176,255,.62);background:rgba(47,107,224,.06);opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .55s var(--out)}
#s-compete .c6-st2 .k{color:#A9C4F5}
#s-compete .c6-st2 .x{display:block;margin-top:6px;font-size:21px;line-height:1.3;color:#C9D5E8}

#s-compete .c6-say{left:160px;top:884px;font-size:40px;line-height:1.15;font-weight:600;color:var(--white);opacity:0;translate:0 10px;transition:opacity .4s var(--out),translate .5s var(--out)}
#s-compete .c6-pilot{left:160px;top:940px;font-size:22px;line-height:1.3;color:#BAC6D8;opacity:0;transition:opacity .4s}
#s-compete .c6-src{left:160px;top:984px;font-size:20px;line-height:1.3;color:#A4B1C5}

/* the build's layers exist (and are rastered) from the moment the scene is shown, so the first beat does not pay for all of them in one frame */
#s-compete.active :is(.c7-desk,.c7-glass,.c7-band,.c7-gh,.c7-hand,.c7-ic,.c7-t,.c6-lab,.c6-opt){will-change:transform,opacity}

/* ================= states ================= */
/* 1 · the landscape: the desktop, the five windows, the three groups on their bands */
#s-compete:not([data-k="0"]) :is(.c7-desk,.c7-glass,.c7-t,.c7-ic){opacity:1;transform:none}
#s-compete:not([data-k="0"]) .c7-band{opacity:1;transform:none}
#s-compete:not([data-k="0"]) :is(.c7-gh,.c7-hand,.c6-opt){opacity:1}
#s-compete:not([data-k="0"]) .c6-lab:not(.l-n){opacity:1;translate:0 0}
#s-compete[data-k="1"] .c7-t{transition-delay:calc(.08s + var(--i) * .07s)}
#s-compete[data-k="1"] .c7-glass{transition-delay:.3s}
#s-compete[data-k="1"] :is(.c7-b1,.l-f){transition-delay:.3s}
#s-compete[data-k="1"] :is(.c7-b2,.l-q){transition-delay:.46s}
#s-compete[data-k="1"] :is(.c7-gh,.c6-opt){transition-delay:.62s}
#s-compete[data-k="1"] :is(.c7-b3,.l-x){transition-delay:.52s}
#s-compete[data-k="1"] .c7-ic{transition-delay:calc(.66s + var(--i) * .025s)}
#s-compete[data-k="1"] .c7-hand{transition-delay:.85s}
#s-compete[data-k="1"] .l-b{transition-delay:.12s}
/* 2 · the quotation segment: every group passes through it; the rest stays as context */
#s-compete:is([data-k="2"],[data-k="3"]) :is(.c7-colb,.c7-col){opacity:1}
#s-compete:is([data-k="2"],[data-k="3"]) .c7-qg{opacity:.85}
#s-compete:is([data-k="2"],[data-k="3"]) .c7-t:not(.q) .nq-veil{opacity:.42}
#s-compete:is([data-k="2"],[data-k="3"]) .c7-t.q{transform:translateY(-6px);transition:transform .5s var(--out)}
#s-compete:is([data-k="2"],[data-k="3"]) :is(.c7-ic.o,.c7-gh){opacity:.4}
#s-compete:is([data-k="2"],[data-k="3"]) .c6-opt{opacity:.72}
#s-compete:is([data-k="2"],[data-k="3"]) .c7-hand{opacity:.45}
#s-compete[data-k="2"] .c7-col{transition-delay:.06s}
#s-compete[data-k="2"] .s2{opacity:1;translate:0 0;transition-delay:.3s}
/* 3 · NEXQUOTE's route: the quotation window lights blue (step 1), the card drops from it; step 2 is later and dashed */
#s-compete[data-k="3"] :is(.c7-b1,.c7-b3,.c7-ic.q){opacity:.55;transition:opacity .4s}
#s-compete[data-k="3"] .c7-b2{opacity:.6;transition:opacity .4s}
#s-compete[data-k="3"] :is(.c7-ic.o,.c7-gh,.c7-hand){opacity:.3}
#s-compete[data-k="3"] .c6-lab:not(.l-n):not(.l-b){opacity:.74}
#s-compete[data-k="3"] .c7-col{opacity:.25}
#s-compete[data-k="3"] .c7-colb{opacity:.45}
#s-compete[data-k="3"] .c7-qg{opacity:1}
#s-compete[data-k="3"] :is(.c7-ql,.c7-qtb,.c7-qf){opacity:1;transition-delay:.1s}
#s-compete[data-k="3"] .c7-t.q .c7-tb b{opacity:0;transition:opacity .2s .1s}
#s-compete[data-k="3"] .c7-sw{opacity:1;transform:translateX(500px);transition:opacity .1s .15s,transform .8s cubic-bezier(.45,0,.3,1) .15s}
#s-compete[data-k="3"] .c7-stem{opacity:1;transform:none;transition-delay:.32s}
#s-compete[data-k="3"] .c6-st1{opacity:1;transform:none;transition-delay:.48s}
#s-compete[data-k="3"] .l-n{opacity:1;translate:0 0;transition-delay:.35s}
#s-compete[data-k="3"] .c6-st2{opacity:1;transform:none;transition-delay:.85s}
#s-compete[data-k="3"] .s3{opacity:1;translate:0 0;transition-delay:.7s}
#s-compete[data-k="3"] .c6-pilot{opacity:1;transition-delay:1s}