/* ============================================================
   Robotverse — a little robot community living behind the site.
   Decorative only: pointer-events:none, behind content, and it
   dims/stops for reduced-motion so text always stays readable.
   ============================================================ */
:root{--rb-amber:#f7ad3c;--rb-teal:#33c9b8;--rb-violet:#a184f2;--rb-metal:#2a3646;--rb-metal2:#37485c;--rb-ground:rgba(255,255,255,.10)}

section{position:relative}
section > .wrap{position:relative;z-index:3}

.zone{position:absolute;left:0;right:0;bottom:0;height:200px;z-index:1;pointer-events:none;overflow:hidden;opacity:.85}
.zone .ground{position:absolute;left:0;right:0;bottom:38px;height:1px;background:linear-gradient(90deg,transparent,var(--rb-ground) 12%,var(--rb-ground) 88%,transparent)}
.zone .ground::after{content:"";position:absolute;left:0;right:0;top:1px;height:38px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.zone .prop,.zone .actor{position:absolute;bottom:38px}
@media(max-width:760px){.zone{opacity:.55;height:150px}}

/* ---------- robot base ---------- */
.bot{display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.bot .body{fill:var(--rb-metal2)}
.bot .plate{fill:var(--rb-metal)}
.bot .eye{fill:var(--rb-teal)}
.bot.a .eye{fill:var(--rb-amber)}
.bot .acc{fill:var(--rb-amber)}
.bot.t .acc{fill:var(--rb-teal)}
.bot.v .acc{fill:var(--rb-violet)}
.bot .glow{filter:drop-shadow(0 0 3px currentColor)}
.bot .arm{transform-origin:50% 12%}
.bot .antenna-tip{fill:var(--rb-amber);animation:rb-blink 1.6s infinite}

@keyframes rb-blink{50%{opacity:.35}}
@keyframes rb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes rb-hammer{0%,60%{transform:rotate(6deg)}30%{transform:rotate(-46deg)}}
@keyframes rb-wave{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-24deg)}}
@keyframes rb-spin{to{transform:rotate(360deg)}}
@keyframes rb-spark{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}}
@keyframes rb-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes rb-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes rb-drift{from{transform:translateX(-10vw)}to{transform:translateX(112vw)}}
@keyframes rb-treadle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* motion presets */
.bob{animation:rb-bob 2.4s ease-in-out infinite}
.hammer{animation:rb-hammer 1s ease-in-out infinite}
.wave{animation:rb-wave 2s ease-in-out infinite}
.spin{transform-origin:50% 50%;animation:rb-spin 4s linear infinite}
.float{animation:rb-float 5s ease-in-out infinite}

/* walkers cross a zone on the ground */
.walker{bottom:38px;animation:rb-drift linear infinite}
.walker .bot{animation:rb-treadle .5s steps(2) infinite}
.walker.rev{transform:scaleX(-1)}

/* flyers cross the sky at whatever height they're placed */
.flyer{animation:rb-drift linear infinite}
.flyer .bot{animation:rb-hover 3s ease-in-out infinite}
.flyer.rev{transform:scaleX(-1)}

/* rocket launches diagonally across + up */
.rocket-wrap{position:absolute;bottom:16px;left:0;animation:rb-rocket 15s linear infinite}
@keyframes rb-rocket{0%{transform:translate(-12vw,30px) rotate(40deg)}100%{transform:translate(116vw,-240px) rotate(40deg)}}
.flame{transform-origin:50% 0;animation:rb-flame .16s steps(2) infinite}
@keyframes rb-flame{0%{transform:scaleY(.65) scaleX(1)}100%{transform:scaleY(1.2) scaleX(.8)}}

/* lifting (cranes / cargo drones raising materials) */
.lift{animation:rb-lift 3.4s ease-in-out infinite}
@keyframes rb-lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}

/* a wall rising on a house under construction */
.rising{transform-origin:50% 100%;animation:rb-rise 5s ease-in-out infinite}
@keyframes rb-rise{0%,15%{transform:scaleY(0)}45%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* spark bursts */
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--rb-amber);box-shadow:0 0 8px var(--rb-amber);animation:rb-spark 1s ease-in-out infinite}

/* ---------- scenery props ---------- */
.tree{width:54px;height:78px}
.house{width:90px;height:72px}
.solar{width:70px;height:46px}
.battery{width:34px;height:52px}
.core{width:64px;height:64px;animation:rb-bob 5s ease-in-out infinite}
.core .ring{fill:none;stroke:var(--rb-teal);opacity:.5}
.core .ring.spin{transform-origin:32px 32px;animation:rb-spin 9s linear infinite}
.scrap{width:96px;height:52px}
.bench{width:64px;height:34px}
.lamp{width:20px;height:78px}
.lamp .bulb{fill:var(--rb-amber);animation:rb-blink 3.4s infinite}
.crane{width:130px;height:130px}
.pad{width:70px;height:20px}

/* ============================================================
   Foreground gags (above content, but pointer-events:none)
   ============================================================ */
/* engineer robot repairing the hero console wiring */
.console{position:relative}
.rb-engineer{position:absolute;top:52px;right:14px;width:32px;z-index:5;pointer-events:none;transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1)}
.rb-engineer .arm{animation:rb-reach 1.1s ease-in-out infinite}
@keyframes rb-reach{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-54deg)}}
.edge.broken{stroke:rgba(242,118,90,.85)!important;stroke-dasharray:3 5;animation:rb-blink .4s infinite}
.edge.fixed{stroke:rgba(51,201,184,1)!important;filter:drop-shadow(0 0 4px rgba(51,201,184,.7))}
.spark-fg{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--rb-amber);box-shadow:0 0 10px var(--rb-amber);opacity:0;z-index:6;pointer-events:none}
.spark-fg.on{animation:rb-spark .6s ease-out}

/* toolkit jumper */
#stack{position:relative;overflow:hidden}
.rb-jumper{position:absolute;bottom:14px;left:-60px;width:38px;z-index:5;pointer-events:none;animation:rb-run 13s linear infinite}
.rb-jumper .bot{animation:rb-hop 13s linear infinite}
@keyframes rb-run{0%{left:-60px}100%{left:calc(100% + 60px)}}
@keyframes rb-hop{0%,100%{transform:translateY(0)}
 22%{transform:translateY(0)}28%{transform:translateY(-46px) rotate(-8deg)}34%{transform:translateY(0)}
 52%{transform:translateY(0)}58%{transform:translateY(-46px) rotate(8deg)}64%{transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
 .zone,.rb-engineer,.rb-jumper{opacity:.35}
 .bot *,.walker,.flyer,.rocket-wrap,.core,.float,.hammer,.wave,.bob,.spin,.lift,.rising,.flame,.rb-jumper,.rb-engineer .arm,.antenna-tip,.lamp .bulb{animation:none!important}
 .rb-jumper,.rocket-wrap{display:none}
}