/* runAtlas home, block "Delivery" (From business priority to production): self-contained. It is delivery study 8
   (explore/delivery-study-8), accepted by a reference; it replaces study 7. Markup _build/home_blocks/delivery.html, script
   assets/js/home-delivery.js, pictures assets/img/delivery7/. The section's words keep the site's type (site.css and v5/*.css);
   the rules here for them are the same as before. */
/* Delivery study 7: a simpler stage floating in space (1536 x 960). The room is CSS 3D; u = 1/1536 of the picture's width;
   geom.css (generated) holds the geometry. The picture reads in three parts (of 1536): the board 0–495 | space 495–1050 |
   the projection wall 1050–1536. The steps' grid follows them. */
.bx-note{padding-top:28px;font:400 var(--s-small)/1.5 var(--f);color:var(--fg3);max-width:980px}
.bx-note a{color:var(--fg2);text-decoration:underline;text-underline-offset:3px}
.bx{position:relative;background:#0e090b;padding:clamp(96px,10vw,150px) 0 var(--sec);isolation:isolate;overflow:clip}
/* the scene's universe fills the whole section (client r14 289 "universe should fill the whole section", 292 "instead of black bg
   after page tear, extend the whole space we see in the graphic to whole section"): the painted space (delivery7/sky.webp, space.webp
   extended around itself) sits behind everything, placed by home-delivery.js in the picture's own units so that through the
   stage's opening it reads exactly as before; it moves with the scene's camera, as anything at infinity does */
/* the section ends in the page's black, so the next section follows on as before */
.bx::after{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(90px,9vw,140px);z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(10,10,10,0),var(--bg))}
/* the stage floats: the floor's front edge, a thin face of the same stone */
.bx-slab{position:absolute;left:0;right:0;bottom:0;height:.72cqw;min-height:5px;pointer-events:none;
  background:linear-gradient(#cfcabd 0,#cfcabd 1px,#a29d91 1px,#857f74 100%);box-shadow:0 -1px 0 rgba(255,255,255,.18)}
.bx-sky{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;background:url(../img/delivery7/sky.webp) 0 0 / 100% 100% no-repeat;
  transform:translate3d(var(--skx,0px),var(--sky,0px),0);will-change:transform;pointer-events:none}
/* the heading, its line and its button, centred above the scene (client r14 292 "center this"); the same measures as before */
.bx-head{display:flex;flex-direction:column;align-items:center;text-align:center;row-gap:22px}
.bx-head .h2{max-width:calc((100% - 11 * var(--gap)) / 12 * 6 + 5 * var(--gap))}
.bx-head .lede{max-width:calc((100% - 11 * var(--gap)) / 12 * 5 + 4 * var(--gap))}
.bx-head .ctas{justify-content:center}
.bx-stage{margin-top:clamp(48px,5vw,72px)}

/* the scene runs edge to edge, no taller than the screen (it is held at the top edge until the curtain has opened) */
.bx-pic{position:relative;aspect-ratio:1536 / 960;overflow:hidden;width:min(100%,calc(100svh * 1.6));margin:0 auto;background:transparent;
  container-type:inline-size;isolation:isolate;touch-action:pan-x pan-y}
@media (min-width:761px) and (min-aspect-ratio:1601 / 1000){  /* wider screens: the stage's sides ease into the universe */
  .bx-pic{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}}
.bx-space,.bx-beam{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bx-space{z-index:-1}                 /* the section's: over the painted space, under the words and the stage */
.bx-beam{mix-blend-mode:screen}
.bx-view{position:absolute;inset:0;--u:calc(100cqw / 1536)}
.bx-world{position:absolute;inset:0;transform-style:preserve-3d}
.bx-plane{position:absolute;background-repeat:no-repeat;backface-visibility:hidden}
.bx-back{background-image:url(../img/delivery7/w_back.webp)}
.bx-floor{background-image:url(../img/delivery7/w_floor.webp)}
.bx-right{background-image:url(../img/delivery7/w_right.webp)}
/* the curtain across the open back, with no rod: real cloth (box.js, WebGL), drawn on a plane square to the view just in front
   of it (geom.css). It answers the pointer while it hangs; when the last line is drawn it falls and crumples onto the floor */
.bx-cloth{pointer-events:none}
.bx-man1 img{position:absolute;max-width:none;pointer-events:none;user-select:none}
/* man 1 (round 5, client: "hand needs to go back in pocket realistically, and its broken from coat in between"): his body
   is whole (img/man8_body.webp); his drawing arm is one piece of painting bent on shoulder, elbow and wrist by box.js
   (#bxm8arm, WebGL) and drawn in front of him only where it is clear of his body, so it always comes out from behind his
   chest; it draws the line and travels on into his pocket, where the painted hand (img/man8_hand.webp) takes over */
.bx-m8-body,.bx-m8-arm{position:absolute;inset:0;width:100%;height:100%}
.bx-m8-hand{opacity:0}
.bx-fig{position:absolute;max-width:none;pointer-events:none;user-select:none}
.bx-snap{position:absolute;top:0;width:1px;height:1px}
.bx-snap[data-i="0"]{left:16.1%}.bx-snap[data-i="1"]{left:50.3%}.bx-snap[data-i="2"]{left:84.2%}

/* section 1: the network in chalk on the slate, drawn by man 1's hand: box.js moves the chalk along each stroke and
   reveals the line behind it (man 1 is three pieces: body, upper arm, forearm with hand and chalk) */
.bx-board{position:absolute;overflow:visible}
.bx-board line{stroke:#e9ece4;stroke-width:2.4;stroke-linecap:round;opacity:.84;stroke-dasharray:1 1}
.bx-board line.done{stroke-dashoffset:0}
.bx-board line.fin{stroke-dashoffset:1;stroke-width:2.8;opacity:.95}
.bx-board circle{fill:#eef0ea;opacity:.92}
/* the work already on the board: the starting baseline, the goal (vermilion chalk), the rising path to it, erased traces */
.bx-board .pr{fill:none;stroke:#e9ece4;stroke-width:2.4;stroke-linecap:round;opacity:.8}
.bx-board .pr-goal{stroke:#e2462a;stroke-width:3.4;opacity:.95}
/* what is written on the slate: the step's own words in chalk (the site's type, roughened by the chalk filter) */
.bx-board .bw text{fill:#e9ece4;opacity:.86;font-family:var(--f);font-weight:500;letter-spacing:.01em}
.bx-board .bw .bw-title{font-weight:600;opacity:.92}
.bx-board .bw line{stroke-dasharray:none;stroke-width:2.8}
/* the graphs under the words: chalk lines, dashed guides, and a light rub of chalk in the bars and the marked slice */
.bx-board .bg .pr{stroke-dasharray:none}
.bx-board .bg .bg-dash{stroke-dasharray:6 7;opacity:.78}
.bx-board .bg .bg-fill{fill:#e9ece4;opacity:.16;stroke:none}
.bx-board .bg circle.pr{fill:none}
.bx-board .pr-smudge{stroke-width:20;opacity:.07;filter:blur(3px)}
.bx-man1{position:absolute}
.bx-curtain{position:absolute;inset:0;width:100%;height:100%}

/* section 3: the projection on the right wall; the light reaches the wall as the projector starts (--on, --flick from box.js).
   The projector lights a white square around the chart (client: "retain a white square around the diagram on wall"); the
   beam's cone ends on that square (home-delivery.js). Square in the chart's units (581 x 906.81): x 28..568, y 84..712. */
.bx-proj-light{position:absolute}
.bx-lamp,.bx-grain,.bx-ui{position:absolute;inset:0;width:100%;height:100%}
.bx-lamp,.bx-grain{left:4.819%;top:9.263%;width:92.943%;height:69.254%}
.bx-lamp{background:radial-gradient(90% 85% at 46% 50%,#f7f8f4 0,#eef0ea 60%,#e2e6dc 100%);filter:blur(1.4px);
  box-shadow:0 0 calc(40*var(--u)) calc(8*var(--u)) rgba(232,236,226,.22);mix-blend-mode:screen;opacity:0}
.bx-grain{background:url(../img/delivery7/w_right.webp) no-repeat;filter:grayscale(1) contrast(2.2);mix-blend-mode:soft-light;opacity:0}
.bx-pic[data-step="2"] .bx-lamp{opacity:calc(var(--on,0) * (.82 + var(--flick,0) * .16))}
.bx-pic[data-step="2"] .bx-grain{opacity:calc(var(--on,0) * .3)}
.bx-ui{overflow:visible;filter:brightness(calc(.86 + var(--flick,0) * .14))}
.bx-ui{overflow:visible}
.bx-base{stroke:rgba(30,34,30,.55);stroke-width:2.6;stroke-dasharray:9 9;fill:none}
.bx-golive{stroke:rgba(30,34,30,.3);stroke-width:2;stroke-dasharray:4 7;fill:none}
.bx-chart>*{opacity:0;transition:opacity .6s var(--ease)}
.bx-chart>.bx-bars{opacity:1}
/* outcome bars rise from the baseline (rounded data ends); then the arrow is drawn upward over them */
.bar{transform-box:fill-box;transform:scaleY(0);transform-origin:50% 100%;fill:var(--verm);transition:transform .9s var(--spring) var(--d,0s)}
.bx-arrow{fill:none;stroke:var(--verm);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--ease-io) .9s,opacity .3s}
.bx-arrowhead{fill:var(--verm);transition:opacity .25s var(--ease) 1.65s}
.bx-sw{fill:var(--verm)}
.bx-t{font-family:var(--f);font-weight:600;letter-spacing:-.012em;fill:#1e221e}
.bx-t-dim{font-weight:500;fill:rgba(30,34,30,.66)}
/* the network on the projection: shown first, then each node travels to a bar top or onto the arrow */
.bx-pnet line{stroke:rgba(30,34,30,.42);stroke-width:2.2;opacity:0;transition:opacity .5s var(--ease)}
.bx-pnet circle{fill:#2b2f2b;opacity:0;transform:translate(0,0);
  transition:opacity .4s var(--ease),transform 1.05s var(--ease-io) var(--d,0s),fill .6s var(--ease) var(--d,0s)}
.bx-pic[data-proj="net"] .bx-pnet line,.bx-pic[data-proj="net"] .bx-pnet circle{opacity:1}
.bx-pic[data-proj="morph"] .bx-pnet circle,.bx-pic[data-proj="chart"] .bx-pnet circle{opacity:1;transform:translate(var(--tx),var(--ty));fill:var(--verm)}
.bx-pic[data-proj="chart"] .bx-pnet circle{opacity:0;transition:opacity .5s var(--ease) .5s}
.bx-pic:is([data-proj="morph"],[data-proj="chart"]) :is(.bx-base,.bx-golive,.bx-t-dim){opacity:1}
.bx-pic[data-proj="chart"] .bx-chart>*{opacity:1}
.bx-pic[data-proj="chart"] .bar{transform:scaleY(1)}
.bx-pic[data-proj="chart"] .bx-arrow{stroke-dashoffset:0}
.bx-pic[data-proj="chart"] :is(.bx-sw,.bx-t-lab){transition-delay:.7s}

/* steps under their sections */
.bx-steps{display:grid;grid-template-columns:495fr 555fr 486fr;column-gap:var(--gap);margin-top:36px}
.bx-steps li{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.bx-steps li:nth-child(1){grid-column:1}.bx-steps li:nth-child(2){grid-column:2}.bx-steps li:nth-child(3){grid-column:3}
.bx-steps li::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:calc(var(--fill,0) * 100%);background:#fff;transition:width .3s linear} /* v1.2 (Manav: "the line animation can be scroll based"): --fill follows the scene's progress (home-delivery.js) instead of a 1.1 s wipe */
.bx-steps li.on::before{width:calc(var(--fill,0) * 100%)}
.bx-steps h3{font:560 var(--s-lede)/1.25 var(--f);letter-spacing:-.012em;color:var(--fg3);transition:color .6s}
.bx-steps li.on h3{color:var(--fg)}
.bx-steps p{margin-top:10px;color:var(--fg2);max-width:30em}

@media (max-width:760px){
  .bx-head{row-gap:18px}.bx-head .h2,.bx-head .lede{max-width:none}
  .bx-stage{padding:0}
  .bx-reel{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bx-reel::-webkit-scrollbar{display:none}
  .bx-pic{height:500px;width:calc(500px * 1536 / 960);aspect-ratio:auto;border-radius:0}
  .bx-snap{scroll-snap-align:center}
  .bx-steps{display:grid;grid-template-columns:1fr;padding:0 var(--m);margin-top:28px}
  .bx-steps li,.bx-steps li:nth-child(n){grid-column:1;grid-row:1;opacity:0;transition:opacity .45s var(--ease)}
  .bx-steps li.cur{opacity:1}
  .bx-steps li h3{color:var(--fg)}
}
@media (prefers-reduced-motion:reduce){
  .bx-pic *,.bx-steps li::before{transition:none!important}
}


/* generated by build/emit8.py from build/scene8.json -- do not edit by hand */
.bx-view{perspective:calc(1500.00*var(--u));perspective-origin:calc((300.00 + var(--cx,0))*var(--u)) calc((426.00 + var(--cy,0))*var(--u))}
.bx-back{left:calc(-151.50*var(--u));top:calc(-9.19*var(--u));width:calc(731.57*var(--u));height:calc(1028.09*var(--u));transform:translateZ(calc(-642.86*var(--u)));background-position:calc(1.50*var(--u)) calc(1.50*var(--u));background-size:calc(728.57*var(--u)) calc(1025.09*var(--u))}
.bx-floor{left:calc(-151.50*var(--u));top:calc(374.54*var(--u));width:calc(2123.85*var(--u));height:calc(642.86*var(--u));transform-origin:50% 100%;transform:rotateX(90deg);background-position:calc(1.50*var(--u)) 0;background-size:calc(2120.85*var(--u)) calc(642.86*var(--u))}
.bx-right{left:calc(1371.43*var(--u));top:calc(-9.19*var(--u));width:calc(980.00*var(--u));height:calc(1028.09*var(--u));transform-origin:0 50%;transform:translateZ(calc(-642.86*var(--u))) rotateY(-28.000deg);background-position:0 calc(1.50*var(--u));background-size:calc(980.00*var(--u)) calc(1025.09*var(--u))}
.bx-cloth{left:calc(428.57*var(--u));top:calc(-77.69*var(--u));width:calc(1132.86*var(--u));height:calc(1094.59*var(--u));transform:translateZ(calc(-402.86*var(--u)))}
.bx-proj-light{left:calc(0.00*var(--u));top:calc(64.58*var(--u));width:calc(581.00*var(--u));height:calc(906.81*var(--u))}
.bx-grain{background-size:calc(980.00*var(--u)) calc(1025.09*var(--u));background-position:calc(-28*var(--u)) calc((-63.08 - 84)*var(--u))}   /* the square sits 28 u in and 84 u down */
.bx-man1{left:calc(1.93*var(--u));top:calc(295.92*var(--u));width:calc(378.92*var(--u));height:calc(721.97*var(--u));transform-origin:21.660% 99.932%;transform:translateZ(calc(-460.78*var(--u))) rotate(var(--lean,0deg))}
.bx-m8-hand{left:36.1868%;top:36.8278%;width:8.9494%;height:20.1498%}
.bx-proj{left:calc(739.29*var(--u));top:calc(820.13*var(--u));width:calc(206.47*var(--u));height:calc(197.52*var(--u));transform:translateZ(calc(-224.14*var(--u)))}

/* the three steps sit above the scene, under the heading; each step's rule runs below it (client, 17 Oct) */
.bx-head .bx-steps{width:100%;max-width:none;padding-inline:0;margin:44px 0 0;text-align:left;justify-self:stretch;align-self:stretch}
.bx-steps li{border-top:0;border-bottom:1px solid var(--line);padding-top:0;padding-bottom:22px}
.bx-steps li::before{top:auto;bottom:-1px}
@media (max-width:760px){.bx-head .bx-steps{padding-inline:0;margin-top:28px}}