/* Hero 3D — the team's hero diagram (inbox -> Classify -> Extract -> Match -> Validate -> Approve -> Kizen) in the
   Custom App Builder hero's 3D style: the stage and slab-edge rules below are the sister page's
   (~/Deck/custom-app-builder/assets/hero3d/hero3d.css); the faces are this page's. Each face is printed per state:
   .st-hot (the packet is inside), .st-done (the step keeps its result); idle is the bare class. */

.h3d{position:relative;width:100vw;left:50%;margin-left:-50vw;height:clamp(300px,23vw,430px);margin-top:26px;overflow:hidden;
  --k:.6;--P:1900;contain:layout paint}
.h3d-glow{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.h3d-glow-front{z-index:2}
/* Three.js renders the slabs here; the DOM slabs (.h3d-view) are its source (printed to face-*.webp) and the no-WebGL view */
/* the hero's foot cuts the slabs dead straight, glow and all: the row stands inside the stage, running on below it */
.h3d-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}
.h3d.gl3d .h3d-view{display:none}
.h3d.nogl .h3d-gl{display:none}
.h3d-view{position:absolute;inset:0;z-index:1;perspective:calc(var(--P) * var(--k) * 1px);perspective-origin:50% 60%}
.h3d-world{position:absolute;left:50%;top:112.36%;width:0;height:0;transform-style:preserve-3d}
.h3d-card{position:absolute;left:0;top:0;transform-style:preserve-3d;transform-origin:0 0}
.h3d-rise{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translate3d(0,var(--rise,520px),0);transition:transform 2.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.h3d.in .h3d-rise{transform:none}
.h3d-edge{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.h3d-edge i,.h3d-face{position:absolute;inset:0;border-radius:var(--r,30px)}
.h3d-edge i{display:block;transform:translateZ(calc(var(--z) * -1px));
  /* brushed-aluminium side: bright at the face, deeper toward the back; the foot picks up the glow */
  background:linear-gradient(180deg,hsl(200 22% calc(100% - var(--d2) * 5%)) 0%,hsl(204 14% calc(92% - var(--d2) * 15%)) 12%,hsl(206 11% calc(85% - var(--d2) * 19%)) 55%,hsl(200 12% calc(82% - var(--d2) * 17%)) 82%,hsl(186 30% calc(80% - var(--d2) * 12%)) 100%)}
.h3d-face{overflow:hidden;transform:translateZ(.6px);backface-visibility:hidden;font-family:var(--sans);color:#1F2937}
.h3d-face .i{width:1em;height:1em;flex:none}

/* ---------- the five steps (faces 320 x 330) ---------- */
.c-step{--r:30px}
/* left-aligned (the next slab covers the right part): icon above the thread, words below it; the thread goes through
   the face at x 70, y 165 (under the icon's middle), on bare ground */
.c-step .h3d-face{display:flex;flex-direction:column;align-items:flex-start;padding:30px 0 0 31px;box-sizing:border-box;background:#fff}
.fx-ico{display:grid;place-items:center;width:78px;height:78px;border-radius:22px;background:#E4F0EF;color:#0C595C}
.fx-ico .ico{width:36px;height:36px}
.fx-t{margin-top:96px;font:400 36px/1 var(--sans);color:#1F2937}
.fx-r{position:relative;display:grid;place-items:center start;height:26px;margin-top:18px}
.fx-r em{font:400 21px/26px var(--sans);font-style:normal;color:#0C595C;white-space:nowrap;visibility:hidden}
.fx-r i{position:absolute;left:0;top:50%;width:96px;height:10px;margin-top:-5px;border-radius:5px;background:#EEF0F2}
/* the packet is inside: the step lights */
.c-step .st-hot{background:#0C595C}
.st-hot .fx-ico{background:#18696C;color:#fff}
.st-hot .fx-t{color:#fff}
.st-hot .fx-r i{background:#18696C}
/* the packet has passed: the step keeps its result */
.st-done .fx-ico{background:#0C595C;color:#fff}
.st-done .fx-r em{visibility:visible}
.st-done .fx-r i{visibility:hidden}

/* ---------- the two ends (faces 170 x 170): the packet in, Kizen out ---------- */
.c-tile{--r:40px}
.c-tile .h3d-face{display:grid;place-items:center;background:#fff}
.fx-end{display:grid;place-items:center;color:#0C595C}
.c-in .fx-end .ico{width:72px;height:72px}
.c-in .st-hot{background:#E4F0EF}
.c-out .h3d-face{background:#0C595C}
.c-out .fx-end{color:#fff}
.c-out .fx-end .kz-mark{width:80px;height:80px}
.c-out .st-hot{background:#15999D}

@media (max-width:760px){
  .h3d{height:clamp(250px,70vw,340px);margin-top:20px}
  .h3d-view{perspective-origin:50% 58%}
}
@media (prefers-reduced-motion:reduce){
  .h3d-rise{transition:none}
}
/* no WebGL: a still band, the steps in their finished state */
.h3d.nogl .h3d-glow-back{background:radial-gradient(70% 34% at 50% 100%,rgba(76,190,210,.55) 0%,rgba(76,190,210,.22) 40%,rgba(255,255,255,0) 78%)}
.h3d.nogl .c-step .fx-ico{background:#0C595C;color:#fff}
.h3d.nogl .c-step .fx-r em{visibility:visible}
.h3d.nogl .c-step .fx-r i{visibility:hidden}