/* =====================================================================
 * Custom software stage ("build", template-parts/stages/build.php)
 *
 * .bs-stack is the app screen laid flat in 3D (rotateX 48deg, rotateZ
 * -32deg, pushed back so its near corner stays behind the panels). Its three
 * layers share one 360 x 240 geometry and sit apart in Z (--lz): open out
 * for the wireframe, the design down onto it, all three closed for live.
 *
 * Printed (no script) and reduced motion: the stack open, every layer
 * finished, the terminal done and the phone live. The scene looks (which
 * layer is lit, how far apart they are, what the phone and terminal show)
 * apply only with motion allowed; "before" looks only in their own scene.
 * ===================================================================== */
/* Phones: centre on the content, which reaches a little further left. */
@media (max-width:899px){.stage-build .stage-3d{translate:8px 0}}

/* ---------- The stack ---------- */
.bs-stack{position:absolute;left:56px;top:180px;width:360px;height:240px;transform-style:preserve-3d;scale:.88;transform:translateZ(-110px) rotateX(48deg) rotateZ(-32deg);animation:bs-rise 1.3s var(--ease) both}
@keyframes bs-rise{from{translate:0 70px}}
.bs-floor{position:absolute;left:-80px;top:-70px;right:-80px;bottom:-70px;transform:translateZ(-34px);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(47,125,246,.4),rgba(47,125,246,.1) 56%,transparent)}
.bs-floor::after{content:"";position:absolute;inset:17%;border-radius:50%;border:1.5px solid rgba(90,160,255,.45);box-shadow:0 0 26px rgba(90,160,255,.45),inset 0 0 26px rgba(90,160,255,.25)}

.bs-l{position:absolute;inset:0;border-radius:14px;--lz:0px;transform:translateZ(var(--lz));transition:transform 1.2s cubic-bezier(.65,0,.25,1),opacity .6s,box-shadow .6s}
.bs-l.ds{--lz:110px}
.bs-l.lv{--lz:220px}
.bs-l.wf{background:rgba(90,160,255,.05);box-shadow:inset 0 0 0 1px rgba(120,175,255,.22)}
.bs-l.ds{background:#121B2D;box-shadow:inset 0 0 0 1px rgba(185,166,255,.26),0 26px 50px -22px rgba(0,0,0,.85)}
.bs-l.lv{background:#0F1727;box-shadow:inset 0 0 0 1px rgba(160,195,255,.32),0 26px 50px -22px rgba(0,0,0,.85),0 0 60px -22px rgba(47,125,246,.7)}
.bs-tab{position:absolute;top:100%;font:600 8.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:5px 8px 6px;border-radius:0 0 7px 7px}
.bs-l.wf .bs-tab{left:96px;color:#A9CCFF;background:rgba(47,125,246,.22);box-shadow:inset 0 0 0 1px rgba(120,175,255,.35)}
.bs-l.ds .bs-tab{left:178px;color:#DDD0FF;background:rgba(139,108,246,.28);box-shadow:inset 0 0 0 1px rgba(185,166,255,.35)}
.bs-l.lv .bs-tab{left:248px;color:#7EE8B5;background:rgba(62,213,152,.18);box-shadow:inset 0 0 0 1px rgba(62,213,152,.35)}

/* Wireframe: outlines that draw themselves */
.bs-wf{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bs-w path{stroke:rgba(140,190,255,.85);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
.bs-w path.t{stroke:rgba(140,190,255,.42);stroke-width:4;stroke-linecap:round}
.js .stage-3d[data-on="wf"] .bs-w:not(.on) path{stroke-dashoffset:1}
.bs-an text{font:500 7px var(--f-mono);letter-spacing:.08em;fill:rgba(170,205,255,.8)}
.bs-an{transition:opacity .5s}
.js .stage-3d[data-on="wf"] .bs-an:not(.on){opacity:0}

/* One screen, three looks: shared boxes */
.bs-scr{position:absolute;inset:0;border-radius:14px;overflow:hidden;color:#EAF1FF;font-family:var(--f-body)}
.bs-tb{position:absolute;left:0;top:0;right:0;height:32px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.bs-logo{flex:none;width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,#2F7DF6,#8FC0FF)}
.bs-tb b{font:600 10.5px var(--f-disp);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.bs-srch{margin-left:auto;width:112px;height:16px;box-sizing:border-box;border-radius:8px;background:rgba(255,255,255,.06);font-size:7.5px;line-height:16px;padding-left:9px;color:rgba(234,241,255,.45);white-space:nowrap}
.bs-tb .bs-srch{margin-left:auto}
.bs-av{flex:none;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.14);margin-left:42px}
.bs-tb .bs-srch+.bs-av{margin-left:42px}
.bs-sb{position:absolute;left:0;top:32px;bottom:0;width:44px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:14px;box-sizing:border-box;border-right:1px solid rgba(255,255,255,.06)}
.bs-sb i{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.07)}
.bs-sb i.on{background:#2F7DF6;box-shadow:0 0 12px -2px rgba(47,125,246,.9)}
.bs-k{position:absolute;top:44px;width:92px;height:42px;box-sizing:border-box;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bs-k.k1{left:56px}.bs-k.k2{left:156px}.bs-k.k3{left:256px}
.bs-or{position:absolute;left:56px;top:96px;width:176px;height:132px;box-sizing:border-box;border-radius:9px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bs-ch{position:absolute;left:240px;top:96px;width:108px;height:132px;box-sizing:border-box;border-radius:9px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.bs-r{display:flex;justify-content:space-between;align-items:center;gap:6px;height:26px;box-sizing:border-box;padding:0 10px;border-top:1px solid rgba(255,255,255,.06)}
.bs-or>.sk.hd,.bs-ch>.sk.hd{margin:7px 10px 6px}
.bs-oh{display:flex;justify-content:space-between;align-items:center;height:20px;padding:0 10px}
.bs-oh b{font:600 9px var(--f-body);color:#fff;white-space:nowrap}
.bs-oh small{font:500 7px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(234,241,255,.5)}
.bs-bars{position:absolute;left:16px;bottom:18px;display:flex;align-items:flex-end;gap:8px;height:80px}
.bs-bars i{position:relative;width:14px;height:var(--h);border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#8FC0FF,rgba(47,125,246,.45));transform-origin:50% 100%;transition:transform .9s var(--ease)}
.bs-bars em{position:absolute;left:50%;top:-11px;transform:translateX(-50%);font:600 7.5px/1 var(--f-mono);font-style:normal;color:#fff}
.bs-tot{position:absolute;left:16px;bottom:4px;font:500 7.5px/1 var(--f-mono);letter-spacing:.04em;color:rgba(234,241,255,.55);white-space:nowrap}
/* Status chips */
.bs-st{flex:none;display:inline-block;font:600 6.8px/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:3px 6px;border-radius:99px}
.bs-st.pr,.bs-sw i.pr{color:#FFD27A;background:rgba(254,188,46,.16)}
.bs-st.tr,.bs-sw i.tr{color:#A8CCFF;background:rgba(47,125,246,.22)}
.bs-st.ok,.bs-sw i.ok{color:#7EE8B5;background:rgba(62,213,152,.15)}
.bs-sw{display:inline-grid;justify-items:end;padding:0;background:none}
.bs-sw i{grid-area:1/1;font-style:normal;padding:3px 6px;border-radius:99px;transition:opacity .35s,transform .35s}
.bs-sw .a{opacity:0}
.js .stage-3d[data-on="lv"] .bs-sw:not(.go) .a{opacity:1}
.js .stage-3d[data-on="lv"] .bs-sw:not(.go) .b{opacity:0;transform:translateY(3px)}

/* Design: the styled screen, no data yet */
.sk{display:block;width:var(--w);height:5px;border-radius:3px;background:rgba(234,241,255,.2)}
.sk.lg{height:9px;margin-top:7px;background:rgba(234,241,255,.34)}
.sk.sm{height:4px;margin-top:4px;background:rgba(234,241,255,.13)}
.sk.hd{height:6px;background:rgba(234,241,255,.28)}
.bs-l.ds .bs-st{width:46px;height:14px;box-sizing:border-box;padding:0}
.bs-l.ds .bs-k{background:linear-gradient(160deg,rgba(139,108,246,.16),rgba(255,255,255,.03))}
.bs-d{transition:opacity .5s,transform .5s var(--ease)}
.js .stage-3d[data-on="ds"] .bs-d:not(.on){opacity:0;transform:translateY(5px)}
.js .stage-3d[data-on="ds"] .bs-ch:not(.on) .bs-bars i{transform:scaleY(.08)}

/* Live: the same screen with the customer's data */
.bs-k small{display:block;font:500 7.5px/1 var(--f-body);color:rgba(234,241,255,.6);white-space:nowrap}
.bs-n{display:block;margin-top:5px;font:700 15px/1 var(--f-disp);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.bs-n .ct{display:none}
.stage-3d[data-on="lv"] .bs-n:not(.go) .ct{display:inline}
.stage-3d[data-on="lv"] .bs-n:not(.go) .fx{display:none}
.stage-3d[data-on="lv"] .bs-n.go .fx{display:inline-block;animation:bs-flash 1.2s ease-out}
@keyframes bs-flash{0%{color:#7EE8B5;transform:translateY(-3px)}}
.bs-r>span{min-width:0}
.bs-r b{display:block;font:600 8.5px/1.1 var(--f-mono);color:#fff}
.bs-r small{display:block;margin-top:2px;font-size:7px;line-height:1;color:rgba(234,241,255,.5);white-space:nowrap}
.bs-v{transition:opacity .45s,transform .45s var(--ease)}
.js .stage-3d[data-on="lv"] .bs-v:not(.on){opacity:0;transform:translateY(4px)}
.js .stage-3d[data-on="lv"] .bs-bars.bs-v:not(.on) i{transform:scaleY(.08)}
.js .stage-3d[data-on="lv"] .bs-bars.bs-v:not(.on){transform:none}
.bs-sweep{position:absolute;top:0;bottom:0;left:-45%;width:45%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(170,210,255,.22),transparent);opacity:0}
.bs-sweep.on{animation:bs-sweep 1.4s ease-out}
@keyframes bs-sweep{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(330%)}}

/* ---------- Panels ---------- */
.stage-build .bs-p>div{animation-duration:8s}
.bs-gl{position:relative;border-radius:16px;background:linear-gradient(180deg,rgba(23,32,52,.95),rgba(10,15,26,.97));border:1px solid rgba(140,180,255,.2);box-shadow:0 44px 76px -40px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.08);color:#EAF1FF;font:400 12px/1.35 var(--f-body)}

/* The three steps */
.bs-pk{display:flex;gap:4px;padding:4px;border-radius:13px}
.bs-pick{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--f-body);color:rgba(234,241,255,.62);background:transparent;border:0;border-radius:9px;padding:7px 12px 7px 7px;cursor:pointer;pointer-events:auto;white-space:nowrap;transition:color .25s,background .25s,box-shadow .25s}
.bs-pick:hover{color:#fff}
.bs-pick i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font:600 10px/1 var(--f-mono);font-style:normal;color:rgba(234,241,255,.75);background:rgba(255,255,255,.08);transition:background .25s,color .25s}
.bs-pick.cur,.stage-3d:not([data-on]) .bs-pick[data-pick="lv"]{color:#fff;background:rgba(47,125,246,.3);box-shadow:inset 0 0 0 1px rgba(120,175,255,.55),0 0 18px -6px rgba(47,125,246,.9)}
.bs-pick.cur i,.stage-3d:not([data-on]) .bs-pick[data-pick="lv"] i{color:#fff;background:#2F7DF6}

/* The phone: a slab with a side face, showing the same portal */
.bs-psp>div{transform-style:preserve-3d}
.bs-ph{position:relative;width:160px;height:304px;transform-style:preserve-3d;transform:rotateY(-22deg)}
.bs-pf{position:absolute;inset:0;box-sizing:border-box;padding:7px;border-radius:26px;background:linear-gradient(160deg,#2E3850,#0A0E16);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 50px 80px -30px rgba(0,0,0,.9)}
.bs-ps{position:absolute;left:100%;top:22px;width:13px;height:260px;transform-origin:0 50%;transform:rotateY(90deg);border-radius:0 7px 7px 0;background:linear-gradient(180deg,#46536F,#1A2030 60%,#121722)}
.bs-pscr{position:relative;height:100%;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#121A2A,#0B111D);color:#EAF1FF;font-family:var(--f-body)}
.bs-notch{position:absolute;z-index:3;top:6px;left:50%;width:46px;height:12px;margin-left:-23px;border-radius:8px;background:#05080F}
.bs-pv{display:none;position:absolute;inset:0;box-sizing:border-box;padding:26px 8px 8px}
.bs-pv.lv{display:block}
.bs-pv.wf{padding:0}
.bs-pv.wf svg{position:absolute;left:8px;top:14px;width:120px;height:262px}
.bs-pv.wf path{stroke:rgba(140,190,255,.8);stroke-width:1.1}
.bs-phd{display:flex;justify-content:space-between;align-items:center;height:22px;margin-bottom:8px}
.bs-phd b{font:600 10.5px var(--f-disp);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.bs-phd .bs-av{margin-left:0;width:14px;height:14px}
.bs-pk3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-bottom:8px}
.bs-pk3>span,.bs-pk3>i{display:block;height:36px;box-sizing:border-box;padding:6px 4px;border-radius:7px;background:rgba(255,255,255,.05)}
.bs-pk3>i{background:linear-gradient(160deg,rgba(139,108,246,.18),rgba(255,255,255,.04))}
.bs-pk3 .bs-n{margin-top:0;font-size:13px}
.bs-pk3 small{display:block;margin-top:4px;font-size:5.8px;line-height:1;color:rgba(234,241,255,.55);white-space:nowrap}
.bs-pr{display:flex;justify-content:space-between;align-items:center;gap:4px;height:32px;box-sizing:border-box;margin-bottom:5px;padding:0 7px;border-radius:7px;background:rgba(255,255,255,.035)}
.bs-pr>span{min-width:0}
.bs-pr b{display:block;font:600 8.5px/1.1 var(--f-mono);color:#fff}
.bs-pr small{display:block;margin-top:2px;font-size:6.8px;line-height:1;color:rgba(234,241,255,.5);white-space:nowrap}
.bs-pv.ds .bs-st{width:34px;height:12px;box-sizing:border-box;padding:0}
.bs-ptab{position:absolute;left:8px;right:8px;bottom:8px;display:flex;justify-content:space-around;align-items:center;height:24px;border-top:1px solid rgba(255,255,255,.07)}
.bs-ptab i{width:12px;height:12px;border-radius:4px;background:rgba(255,255,255,.12)}
.bs-ptab i.on{background:#2F7DF6}
.bs-toast{position:absolute;z-index:2;left:7px;right:7px;top:24px;padding:7px 9px;border-radius:9px;font-size:8px;line-height:1.3;color:#141A26;background:rgba(255,255,255,.96);box-shadow:0 10px 22px -8px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .45s var(--ease)}
.bs-toast b{font-family:var(--f-mono);font-size:8px}
.bs-toast.on{opacity:1;transform:none}

/* The terminal */
.bs-term{width:214px;padding:0 0 10px;font:500 11px/1.62 var(--f-mono);background:linear-gradient(160deg,rgba(9,13,21,.96),rgba(5,8,14,.98));border-color:rgba(255,255,255,.12)}
.bs-tbar{display:flex;align-items:center;gap:5px;padding:9px 12px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07);font-size:10px;line-height:1;color:rgba(234,241,255,.45)}
.bs-tbar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)}
.bs-tbar i:first-child{background:rgba(255,95,87,.75)}.bs-tbar i:nth-child(2){background:rgba(254,188,46,.7)}.bs-tbar i:nth-child(3){background:rgba(40,200,64,.65)}
.bs-tbar span{margin-left:6px}
.bs-tl{margin:0;padding:0 12px;white-space:nowrap;color:rgba(234,241,255,.86);transition:opacity .3s}
.bs-tl>i{display:inline-block;width:15px;font-style:normal;color:#6AABFF}
.bs-tl.ok{color:#5FE0A6}
.bs-tl.ok>i::before{content:"";display:inline-block;width:4px;height:7px;margin-left:2px;border:solid #5FE0A6;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translateY(-2px)}
.bs-tl .ct{display:none}
.stage-3d[data-on="lv"] .bs-tl .ct{display:inline}
.stage-3d[data-on="lv"] .bs-tl .fx{display:none}
.js .stage-3d[data-on="lv"] .bs-tl:not(.on):not(.bs-cur){opacity:0}
.bs-caret{display:inline-block;width:6px;height:12px;vertical-align:-2px;background:#6AABFF;animation:blink 1s steps(2) infinite}

/* ---------- Scenes (motion allowed only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .stage-3d[data-on="wf"] .bs-l.ds{opacity:.14}
  .stage-3d[data-on="wf"] .bs-l.lv{opacity:.1}
  .stage-3d[data-on="wf"] .bs-l.wf{box-shadow:inset 0 0 0 1px rgba(140,190,255,.6),0 0 50px -14px rgba(47,125,246,.7)}
  .stage-3d[data-on="ds"] .bs-l.ds{--lz:22px;box-shadow:inset 0 0 0 1px rgba(185,166,255,.55),0 0 50px -14px rgba(139,108,246,.75)}
  .stage-3d[data-on="ds"] .bs-l.lv{--lz:176px;opacity:.12}
  .stage-3d[data-on="lv"] .bs-l.ds{--lz:10px}
  .stage-3d[data-on="lv"] .bs-l.lv{--lz:20px}
  .stage-3d[data-on="wf"] .bs-pv.lv,.stage-3d[data-on="ds"] .bs-pv.lv{display:none}
  .stage-3d[data-on="wf"] .bs-pv.wf,.stage-3d[data-on="ds"] .bs-pv.ds{display:block;animation:bs-in .5s var(--ease)}
  .stage-3d[data-on="lv"] .bs-pv.lv{animation:bs-in .5s var(--ease)}
  .stage-3d[data-on="wf"] .bs-tl:not(.bs-cur),.stage-3d[data-on="ds"] .bs-tl:not(.bs-cur){opacity:0}
}
@keyframes bs-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .bs-stack,.bs-sweep.on,.bs-n .fx,.bs-pv,.bs-caret{animation:none!important}
  .bs-l,.bs-w path,.bs-d,.bs-v,.bs-bars i,.bs-toast{transition:none}
  /* The story does not play, so no step is the current one but the last. */
  .bs-pick.cur{color:rgba(234,241,255,.62);background:transparent;box-shadow:none}
  .bs-pick.cur i{color:rgba(234,241,255,.75);background:rgba(255,255,255,.08)}
  .bs-pick[data-pick="lv"]{color:#fff;background:rgba(47,125,246,.3);box-shadow:inset 0 0 0 1px rgba(120,175,255,.55)}
  .bs-pick[data-pick="lv"] i{color:#fff;background:#2F7DF6}
}