/* HOME — quiet Austin backgrounds for the plain sections.
   Decorative only (aria-hidden, pointer-events:none). Layers are injected
   by home-bg.js; without JS nothing here renders. Hero and CTA keep their
   own photo backgrounds and are not touched. */

.hb-host{position:relative;overflow:hidden}
.hb-host > .wrap{position:relative;z-index:1}
.hb{position:absolute;pointer-events:none;z-index:0}
.hb svg{display:block;width:100%;height:100%;overflow:visible}

/* 01 Events — skyline over Lady Bird Lake, robots crossing Congress Ave Bridge */
.hb--skyline{left:0;bottom:62px;width:min(52%,760px);height:230px}
.hb--bridge{left:0;right:0;bottom:0;height:78px}

/* 02 Sponsors — blueprint robot arm on a line, bottom right */
.hb--factory{right:max(0px,calc((100% - 1280px) / 2));bottom:0;width:min(46%,600px);height:250px}

/* 03 About — ecosystem constellation, top right */
.hb--network{right:calc(max(0px,(100% - 1280px) / 2) + 84px);top:30px;width:400px;height:138px}
@media(max-width:1239px){.hb--network{display:none}}

/* 04 Community — a sidewalk of people and robots along the bottom */
.hb--street{left:0;right:0;bottom:0;height:78px}

/* 05 Newsletter — Texas with a signal pulsing out of Austin */
/* sits in the gap between the copy and the subscribe card */
.hb--texas{left:calc(max(0px,(100% - 1280px) / 2) + 40px + min(100% - 80px,1200px) * .5455 + 48px - 250px);top:50%;width:250px;height:260px;transform:translateY(-50%)}
@media(min-width:901px) and (max-width:1180px){.hb--texas{opacity:.55}}

/* motion */
.hb-walk{animation:hb-walkx linear infinite}
@keyframes hb-walkx{from{transform:translateX(0)}to{transform:translateX(var(--dx))}}
.hb-bot{animation:hb-bob var(--half,.45s) ease-in-out infinite alternate}
@keyframes hb-bob{from{transform:translateY(0)}to{transform:translateY(-2px)}}
.hb-limb{transform-box:fill-box;transform-origin:50% 0;animation:hb-swing var(--step,.9s) ease-in-out infinite alternate}
.hb-limb.b{animation-direction:alternate-reverse}
@keyframes hb-swing{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
.hb-wheel{transform-box:fill-box;transform-origin:50% 50%;animation:hb-spin 1s linear infinite}
@keyframes hb-spin{to{transform:rotate(360deg)}}
.hb-flow{animation:hb-flow 1.8s linear infinite}
@keyframes hb-flow{to{stroke-dashoffset:-24}}
.hb-pulse{transform-box:fill-box;transform-origin:50% 50%;animation:hb-pulse 3.2s ease-out infinite}
.hb-pulse.d2{animation-delay:1.06s}.hb-pulse.d3{animation-delay:2.13s}
@keyframes hb-pulse{from{transform:scale(.3);opacity:.8}to{transform:scale(3.2);opacity:0}}
.hb-dot{offset-rotate:0deg;animation:hb-travel var(--d,3s) linear infinite}
@keyframes hb-travel{from{offset-distance:0%}to{offset-distance:100%}}
.hb-arm1{transform-box:view-box;animation:hb-arm1 5s ease-in-out infinite}
.hb-arm2{transform-box:view-box;animation:hb-arm2 5s ease-in-out infinite}
@keyframes hb-arm1{0%,100%{transform:rotate(-8deg)}45%,55%{transform:rotate(14deg)}}
@keyframes hb-arm2{0%,100%{transform:rotate(18deg)}45%,55%{transform:rotate(-16deg)}}
.hb-belt{animation:hb-belt 5s linear infinite}
@keyframes hb-belt{from{transform:translateX(0)}to{transform:translateX(120px)}}
.hb-twinkle{animation:hb-twinkle 3s ease-in-out infinite alternate}
@keyframes hb-twinkle{from{opacity:.3}to{opacity:1}}

.hb.is-paused,.hb.is-paused *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .hb *{animation:none!important}
}

@media(max-width:900px){
  .hb--skyline{width:100%;max-width:420px;height:110px;bottom:50px;opacity:.6}
  .hb--bridge{height:62px}
  .hb--factory{width:80%;height:96px;opacity:.6}
  .hb--network{display:none}
  .hb--street{height:64px}
  .hb--texas{left:auto;right:-36px;top:18px;width:48%;height:210px;transform:none;opacity:.5}
}