/* PAGE-SPECIFIC: Steel Erection
   1) Hero: a crane lowers numbered beam 07 onto the frame, slings release, bolts tighten (14s loop).
   2) Statement frame: beam-to-column connection, bolts inserted and tightened one by one (12s loop).
   Base styles show the finished state, so the shared reduced-motion rule leaves complete drawings.
   .how-intro is the same rule used on the Structural Steel Fabrication page. */
.how-intro{max-width:60ch;margin:calc(var(--space-5) * -1) 0 var(--space-7)}
/* hero */
.er-hero{width:100%;height:auto;max-height:540px}
.er-hero line,.er-hero polyline,.er-hero polygon,.er-hero rect,.er-hero path{fill:none;stroke:var(--art-on-light);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.er-hero .er-thin{stroke-width:.6}
.er-hero .er-grid line,.er-hero .er-grid circle{fill:none;stroke:var(--line-light);stroke-width:.7}
.er-hero .er-grid circle{stroke:var(--ink-muted);stroke-width:.6}
.er-hero .er-slab{stroke:var(--line-light);stroke-dasharray:3 3;stroke-width:.8}
.er-hero .er-laydown polygon{stroke:var(--ink-muted);stroke-dasharray:3 3;stroke-width:.7}
.er-hero .er-laydown line{stroke:var(--ink-muted);stroke-width:1.4}
.er-hero .er-plate{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.er-hero .er-face,.er-hero .er-trolley rect,.er-hero .er-hook rect{fill:var(--off-white)}
.er-hero .er-cw{fill:var(--off-white)}
.er-hero .er-cable{stroke-width:.8}
.er-hero .er-tag rect{fill:var(--yellow);stroke:var(--black);stroke-width:.6}
.er-hero .er-tag line{stroke:var(--black);stroke-width:.5}
.er-hero text{font-family:var(--font-mono);font-size:6.5px;font-weight:500;fill:var(--ink-muted)}
.er-hero .er-tag text{fill:var(--black);font-weight:600}
.er-hero .er-cap{font-size:7px;letter-spacing:.06em;fill:var(--black)}
.er-bolt .ring{fill:var(--yellow);stroke:none;opacity:0}
.er-bolt .head{fill:var(--off-white);stroke:var(--black);stroke-width:.8}
.er-bolt .x{stroke:var(--black);stroke-width:.8}
.er-bolt,.er-bolt .ring,.er-bolt .x{transform-box:fill-box;transform-origin:center}
.er-beam{animation:er-beam 14s cubic-bezier(.45,0,.35,1) infinite}
.er-trolley{transform:translate(0.0px,0.0px);animation:er-trolley 14s cubic-bezier(.45,0,.35,1) infinite}
.er-hook{transform:translate(0.0px,-20.0px);animation:er-hook 14s cubic-bezier(.45,0,.35,1) infinite}
.er-cable{transform-box:fill-box;transform-origin:50% 0;transform:translate(0.0px,0.0px) scaleY(0.231);animation:er-cable 14s cubic-bezier(.45,0,.35,1) infinite}
.er-slings{opacity:0;animation:er-slings 14s linear infinite}
.er-bolt.b0{animation:er-b0 14s ease-out infinite}.er-bolt.b1{animation:er-b1 14s ease-out infinite}
.er-bolt.b2{animation:er-b2 14s ease-out infinite}.er-bolt.b3{animation:er-b3 14s ease-out infinite}
.er-bolt .ring{animation:er-ring 14s linear infinite}
.er-bolt .x{animation:er-turn 14s ease-in-out infinite}
@keyframes er-beam{0%{transform:translate(-121.2px,29.0px);opacity:0}5%{transform:translate(-121.2px,29.0px);opacity:1}9%{transform:translate(-121.2px,29.0px);opacity:1}30%{transform:translate(-121.2px,-92.0px);opacity:1}48%{transform:translate(0.0px,-22.0px);opacity:1}64%{transform:translate(0.0px,0.0px);opacity:1}92%{transform:translate(0.0px,0.0px);opacity:1}97%{transform:translate(0.0px,0.0px);opacity:0}100%{transform:translate(0.0px,0.0px);opacity:0}}@keyframes er-trolley{0%{transform:translate(-121.2px,-70.0px)}30%{transform:translate(-121.2px,-70.0px)}48%{transform:translate(0.0px,0.0px)}84%{transform:translate(0.0px,0.0px)}97%{transform:translate(-121.2px,-70.0px)}100%{transform:translate(-121.2px,-70.0px)}}@keyframes er-hook{0%{transform:translate(-121.2px,29.0px)}9%{transform:translate(-121.2px,29.0px)}30%{transform:translate(-121.2px,-92.0px)}48%{transform:translate(0.0px,-22.0px)}64%{transform:translate(0.0px,0.0px)}72%{transform:translate(0.0px,0.0px)}82%{transform:translate(0.0px,-20.0px)}97%{transform:translate(-121.2px,-90.0px)}100%{transform:translate(-121.2px,29.0px)}}@keyframes er-cable{0%{transform:translate(-121.2px,-70.0px) scaleY(4.808)}9%{transform:translate(-121.2px,-70.0px) scaleY(4.808)}30%{transform:translate(-121.2px,-70.0px) scaleY(0.154)}48%{transform:translate(0.0px,0.0px) scaleY(0.154)}64%{transform:translate(0.0px,0.0px) scaleY(1.0)}72%{transform:translate(0.0px,0.0px) scaleY(1.0)}82%{transform:translate(0.0px,0.0px) scaleY(0.231)}97%{transform:translate(-121.2px,-70.0px) scaleY(0.231)}100%{transform:translate(-121.2px,-70.0px) scaleY(4.808)}}@keyframes er-slings{0%,70%{opacity:1}73%,100%{opacity:0}}@keyframes er-b0{0%,65.0%{opacity:0;transform:scale(1.8)}67.0%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}@keyframes er-b1{0%,66.5%{opacity:0;transform:scale(1.8)}68.5%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}@keyframes er-b2{0%,68.0%{opacity:0;transform:scale(1.8)}70.0%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}@keyframes er-b3{0%,69.5%{opacity:0;transform:scale(1.8)}71.5%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}@keyframes er-ring{0%,70%{opacity:0;transform:scale(.6)}74%{opacity:1;transform:scale(1)}82%{opacity:1;transform:scale(1.2)}86%,100%{opacity:0}}@keyframes er-turn{0%,70%{transform:rotate(0)}84%,100%{transform:rotate(540deg)}}
/* connection close-up (dark) */
.er-conn{width:100%;height:auto}
.er-conn .ln{fill:none;stroke:var(--art-on-dark);stroke-width:1}
.er-conn .faint{opacity:.45}
.er-conn .hole{fill:none;stroke:var(--text-on-dark-muted);stroke-dasharray:2 3}
.ec-tag rect{fill:var(--yellow)}
.ec-tag text{font-family:var(--font-mono);font-size:12px;font-weight:600;fill:var(--black)}
.ec-bolt{transform-box:fill-box;transform-origin:center;transform:rotate(120deg)}
.ec-bolt .nut{fill:var(--black-raised);stroke:var(--art-on-dark);stroke-width:1.2}
.ec-bolt .shank{fill:none;stroke:var(--art-on-dark);stroke-width:1}
.ec-done{fill:var(--yellow)}
.ec-wrench{transform:translate(700px,60px);animation:ec-wrench 12s cubic-bezier(.45,0,.35,1) infinite}
.ec-swing{transform-origin:0 0;animation:ec-swing 12s linear infinite}
.ec-wrench circle,.ec-wrench path{fill:none;stroke:var(--art-on-dark);stroke-width:1.3;stroke-linecap:round}
.ec-wrench circle.thin{stroke:var(--yellow);stroke-width:1.6}
.ec-bolt.k0{animation:ec-k0 12s ease-out infinite}.ec-bolt.k1{animation:ec-k1 12s ease-out infinite}.ec-bolt.k2{animation:ec-k2 12s ease-out infinite}
.ec-bolt.k3{animation:ec-k3 12s ease-out infinite}.ec-bolt.k4{animation:ec-k4 12s ease-out infinite}.ec-bolt.k5{animation:ec-k5 12s ease-out infinite}
.ec-done.d0{animation:ec-d0 12s linear infinite}.ec-done.d1{animation:ec-d1 12s linear infinite}.ec-done.d2{animation:ec-d2 12s linear infinite}
.ec-done.d3{animation:ec-d3 12s linear infinite}.ec-done.d4{animation:ec-d4 12s linear infinite}.ec-done.d5{animation:ec-d5 12s linear infinite}
@keyframes ec-k0{0%,3.0%{opacity:0;transform:scale(1.7)}5.0%{opacity:1;transform:scale(1) rotate(0)}7.0%{transform:rotate(0)}12.0%{transform:rotate(120deg)}94%{opacity:1;transform:rotate(120deg)}100%{opacity:0;transform:rotate(120deg)}}@keyframes ec-d0{0%,12.0%{opacity:0}13.0%,94%{opacity:1}100%{opacity:0}}@keyframes ec-k1{0%,14.5%{opacity:0;transform:scale(1.7)}16.5%{opacity:1;transform:scale(1) rotate(0)}18.5%{transform:rotate(0)}23.5%{transform:rotate(120deg)}94%{opacity:1;transform:rotate(120deg)}100%{opacity:0;transform:rotate(120deg)}}@keyframes ec-d1{0%,23.5%{opacity:0}24.5%,94%{opacity:1}100%{opacity:0}}@keyframes ec-k2{0%,26.0%{opacity:0;transform:scale(1.7)}28.0%{opacity:1;transform:scale(1) rotate(0)}30.0%{transform:rotate(0)}35.0%{transform:rotate(120deg)}94%{opacity:1;transform:rotate(120deg)}100%{opacity:0;transform:rotate(120deg)}}@keyframes ec-d2{0%,35.0%{opacity:0}36.0%,94%{opacity:1}100%{opacity:0}}@keyframes ec-k3{0%,37.5%{opacity:0;transform:scale(1.7)}39.5%{opacity:1;transform:scale(1) rotate(0)}41.5%{transform:rotate(0)}46.5%{transform:rotate(120deg)}94%{opacity:1;transform:rotate(120deg)}100%{opacity:0;transform:rotate(120deg)}}@keyframes ec-d3{0%,46.5%{opacity:0}47.5%,94%{opacity:1}100%{opacity:0}}@keyframes ec-k4{0%,49.0%{opacity:0;transform:scale(1.7)}51.0%{opacity:1;transform:scale(1) rotate(0)}53.0%{transform:rotate(0)}58.0%{transform:rotate(120deg)}94%{opacity:1;transform:rotate(120deg)}100%{opacity:0;transform:rotate(120deg)}}@keyframes ec-d4{0%,58.0%{opacity:0}59.0%,94%{opacity:1}100%{opacity:0}}@keyframes ec-k5{0%,60.5%{opacity:0;transform:scale(1.7)}62.5%{opacity:1;transform:scale(1) rotate(0)}64.5%{transform:rotate(0)}69.5%{transform:rotate(120deg)}94%{opacity:1;transform:rotate(120deg)}100%{opacity:0;transform:rotate(120deg)}}@keyframes ec-d5{0%,69.5%{opacity:0}70.5%,94%{opacity:1}100%{opacity:0}}@keyframes ec-wrench{0%{transform:translate(700px,60px)}4.0%{transform:translate(228px,156px)}13.0%{transform:translate(228px,156px)}15.5%{transform:translate(256px,156px)}24.5%{transform:translate(256px,156px)}27.0%{transform:translate(228px,180px)}36.0%{transform:translate(228px,180px)}38.5%{transform:translate(256px,180px)}47.5%{transform:translate(256px,180px)}50.0%{transform:translate(228px,204px)}59.0%{transform:translate(228px,204px)}61.5%{transform:translate(256px,204px)}70.5%{transform:translate(256px,204px)}79.0%{transform:translate(700px,60px)}100%{transform:translate(700px,60px)}}@keyframes ec-swing{0%{transform:rotate(0)}6.5%{transform:rotate(0)}9.5%{transform:rotate(-55deg)}10.0%{transform:rotate(0)}12.5%{transform:rotate(-55deg)}13.0%{transform:rotate(0)}18.0%{transform:rotate(0)}21.0%{transform:rotate(-55deg)}21.5%{transform:rotate(0)}24.0%{transform:rotate(-55deg)}24.5%{transform:rotate(0)}29.5%{transform:rotate(0)}32.5%{transform:rotate(-55deg)}33.0%{transform:rotate(0)}35.5%{transform:rotate(-55deg)}36.0%{transform:rotate(0)}41.0%{transform:rotate(0)}44.0%{transform:rotate(-55deg)}44.5%{transform:rotate(0)}47.0%{transform:rotate(-55deg)}47.5%{transform:rotate(0)}52.5%{transform:rotate(0)}55.5%{transform:rotate(-55deg)}56.0%{transform:rotate(0)}58.5%{transform:rotate(-55deg)}59.0%{transform:rotate(0)}64.0%{transform:rotate(0)}67.0%{transform:rotate(-55deg)}67.5%{transform:rotate(0)}70.0%{transform:rotate(-55deg)}70.5%{transform:rotate(0)}100%{transform:rotate(0)}}