/* QuantaFinder — the enclosure machine Amro liked (the earlier version: bed, three walls, glass lid,
   gantry with the head above), sized to fit and recoloured in the site blues.
   Loaded last; fully defines the machine so the earlier blocks in lab.css do not leak through. */
.lab-machine { perspective: 1500px; perspective-origin: 50% 22%; }
.lab-machine::after { background: radial-gradient(ellipse, rgba(10,30,70,.45), rgba(10,30,70,0) 70%); top: 88%; width: 70%; margin-left: -35%; }
.lab-bed { --lean-x: 0deg; --lean-z: 0deg; width: 540px; height: 300px; margin: -150px 0 0 -270px; top: 54%; border-radius: 10px;
  transform: scale(.92) rotateX(calc(60deg + var(--lean-x))) rotateZ(calc(-16deg + var(--lean-z)));
  background: linear-gradient(135deg, #24365C, #182847); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 60px 90px -30px rgba(10,30,70,.7); }
.lab-bed::before { content: ""; display: block; position: absolute; inset: 12px; border-radius: 6px; pointer-events: none; background-color: transparent;
  background-image: linear-gradient(rgba(140,190,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(140,190,255,.14) 1px, transparent 1px); background-size: 20px 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.lab-bed::after { content: ""; display: block; position: absolute; inset: -12px; border-radius: 14px; background: linear-gradient(135deg, #1B2C4F, #0F1D3A); transform: translateZ(-22px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 40px 60px -20px rgba(0,0,0,.7); pointer-events: none; }

/* three walls standing up from the bed edges: blue glass */
.lab-wall { display: block; position: absolute; opacity: 1; pointer-events: none; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.lab-wall-back { left: -12px; right: -12px; top: -12px; height: 170px; width: auto; bottom: auto; transform-origin: bottom center; transform: translateY(-170px) rotateX(-90deg); background: linear-gradient(rgba(70,125,200,.45), rgba(30,60,115,.78)); border-radius: 8px 8px 0 0; }
.lab-wall-left { left: -12px; top: -12px; bottom: -12px; width: 170px; height: auto; transform-origin: left center; transform: translateX(-170px) rotateY(90deg); background: linear-gradient(90deg, rgba(30,60,115,.8), rgba(70,125,200,.5)); border-radius: 8px 0 0 0; }
.lab-wall-right { display: block; right: -12px; left: auto; top: -12px; bottom: -12px; width: 170px; height: auto; transform-origin: right center; transform: translateX(170px) rotateY(-90deg); background: linear-gradient(90deg, rgba(70,125,200,.5), rgba(30,60,115,.8)); border-radius: 0 8px 0 0; }
.lab-wall::before { display: none; }
.lab-front, .lab-side, .lab-console, .lab-post, .lab-nozzle, .lab-rails { display: none; }

/* glass lid with a frame */
.lab-lid { display: block; position: absolute; left: -12px; right: -12px; top: -12px; bottom: -12px; border-radius: 10px; transform: translateZ(170px); pointer-events: none; border: 8px solid rgba(40,80,150,.9);
  background: linear-gradient(135deg, rgba(190,225,255,.28), rgba(255,255,255,.06) 40%, rgba(120,170,230,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.15), 0 30px 50px -20px rgba(0,0,0,.5); }
.lab-lid::after { content: ""; position: absolute; left: 6%; right: 50%; top: 8%; height: 18%; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,0)); filter: blur(6px); }

/* queue of blanks waiting at the left */
.lab-tray { display: block; left: 14px; top: 50%; width: 64px; height: 64px; margin-top: -32px; }
.lab-blank { filter: saturate(.4) brightness(.7); }

/* gantry rail with end blocks, and the head riding on it */
.lab-gantry { left: -16px; right: -16px; top: 60px; height: 16px; border-radius: 8px; transform: translateZ(150px); transition: top .9s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(#DCE6F7 0%, #B9C8E3 50%, #7B90B5 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 22px 30px -10px rgba(0,0,0,.6); }
.lab-gantry::before, .lab-gantry::after { content: ""; display: block; position: absolute; top: -7px; width: 28px; height: 30px; border-radius: 5px; background: linear-gradient(#8FA3C6, #4A5E8A); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.lab-gantry::before { left: -4px; }
.lab-gantry::after { right: -4px; }
.lab-head { width: 44px; height: 44px; top: -14px; border-radius: 8px; background: linear-gradient(#F4F7FD, #C9D5EA 60%, #9FB0D0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 0 -2px #6E86B0, 0 18px 24px -8px rgba(0,0,0,.7); transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1); }
.lab-head::before { content: ""; display: block; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #4A5E8A, #182847 70%); box-shadow: inset 0 0 0 2px #B9C8E3; }
.lab-head::after { display: none; }
.lab-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #E8384F; box-shadow: none; }
.lab-head.is-on .lab-dot { background: #fff; box-shadow: 0 0 0 2px #E8384F, 0 0 12px 4px rgba(232,56,79,.9); }
.lab-beam { height: 150px; width: 3px; top: 50%; margin-top: 0; transform: rotateX(-90deg); }
.lab-head.is-center { left: calc(50% - 22px + 16px); top: 60px; }
@keyframes head-trace { 0% { left: calc(50% - 22px + 16px - 105px); top: 60px; } 25% { left: calc(50% - 22px + 16px + 105px); top: 60px; } 50% { left: calc(50% - 22px + 16px + 105px); top: 250px; } 75% { left: calc(50% - 22px + 16px - 105px); top: 250px; } 100% { left: calc(50% - 22px + 16px - 105px); top: 60px; } }
@keyframes bar-trace { 0%, 25% { top: 60px; } 50%, 75% { top: 250px; } 100% { top: 60px; } }

/* the piece being made */
.lab-job { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
.lab-img-blank { filter: saturate(.5) brightness(.9); opacity: 1; }
.lab-job.is-cutting .lab-slab { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 40px 6px rgba(232,56,79,.35); }
.lab-job.is-done .lab-slab { box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 30px 50px -16px rgba(0,0,0,.6); }
.lab-sparks { transform: translateZ(14px); }
.lab-sparks i { background: #fff; box-shadow: 0 0 8px 2px rgba(232,56,79,.9); }
.lab-made { box-shadow: 0 8px 0 -4px rgba(10,30,70,.35), 0 12px 16px -8px rgba(10,30,70,.45); }

@media (max-width: 640px) { .lab-bed { transform: scale(.5) rotateX(calc(60deg + var(--lean-x))) rotateZ(calc(-16deg + var(--lean-z))); top: 50%; } .lab-tray { display: none; } }
@media (min-width: 1400px) { .lab-bed { transform: scale(1) rotateX(calc(60deg + var(--lean-x))) rotateZ(calc(-16deg + var(--lean-z))); } }

/* the head stays over the piece: small moves only, never past the bed */
.lab-gantry { top: 142px; }
.lab-head.is-center { left: calc(50% - 22px + 16px); top: 0; }
.lab-head { top: 0; }
@keyframes head-trace { 0% { left: calc(50% - 22px + 16px - 44px); top: 0; } 25% { left: calc(50% - 22px + 16px + 44px); top: 0; } 50% { left: calc(50% - 22px + 16px + 44px); top: 0; } 75% { left: calc(50% - 22px + 16px - 44px); top: 0; } 100% { left: calc(50% - 22px + 16px - 44px); top: 0; } }
@keyframes bar-trace { 0%, 25% { top: 108px; } 50%, 75% { top: 190px; } 100% { top: 142px; } }

/* park the head over the piece between cuts too */
.lab-head { left: calc(50% - 22px + 16px); }

/* glass walls on all four sides, hinged on the bed edges so they meet the lid and the bed */
.lab-wall, .lab-front { display: block; position: absolute; opacity: 1; pointer-events: none; border-radius: 0; background: linear-gradient(rgba(190,225,255,.26), rgba(120,170,230,.16) 60%, rgba(90,140,210,.22)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), inset 0 0 30px rgba(255,255,255,.08); }
.lab-wall-left { left: -182px; right: auto; top: -12px; bottom: -12px; width: 170px; height: auto; transform-origin: right center; transform: rotateY(90deg); }
.lab-wall-right { left: calc(100% + 12px); right: auto; top: -12px; bottom: -12px; width: 170px; height: auto; transform-origin: left center; transform: rotateY(-90deg); }
.lab-wall-back { left: -12px; right: -12px; top: -182px; bottom: auto; height: 170px; width: auto; transform-origin: bottom center; transform: rotateX(-90deg); }
.lab-front { left: -12px; right: -12px; top: calc(100% + 12px); bottom: auto; height: 170px; transform-origin: top center; transform: rotateX(90deg); }
.lab-front > * { display: none; }
.lab-wall-back::after, .lab-front::after { content: ""; position: absolute; left: 6%; right: 55%; top: 10%; height: 20%; border-radius: 50%; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0)); filter: blur(5px); }