/* WCRC · the form companion robot (public/js/form-robot.js). A wall-climbing
   machine that lives on a wall strip, moves with --p (0..1), talks in a bubble and can
   be poked. The host page sizes .bot-wall; the mobile layout turns the wall
   into a horizontal ledge. Motion is switched off by petra.css under
   prefers-reduced-motion. */
.bot-wall{ position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--line-strong); background:#2A1B17 url(/media/petra/tex-wall.jpg) center/cover; --p:0; }
.bot-wall::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,6,10,.30), rgba(7,6,10,.62)); pointer-events:none; }
.bot-wall .rope{ position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:repeating-linear-gradient(180deg, rgba(242,230,211,.34) 0 6px, transparent 6px 11px); pointer-events:none; }
.bot-wall .hold{ position:absolute; left:16%; bottom:calc(var(--i) * (100% - 126px) + 56px); width:14px; height:14px; border-radius:46% 54% 50% 50%; background:var(--rose); border:1px solid rgba(7,6,10,.6); box-shadow:0 2px 0 rgba(7,6,10,.5); transition:background .3s, box-shadow .3s; }
.bot-wall .hold:nth-of-type(even){ left:auto; right:16%; }
.bot-wall .hold.past{ background:var(--ok); }
.bot-wall .hold.on{ background:var(--gold); box-shadow:0 0 0 5px rgba(226,168,94,.22); }
.bot-wall .flag{ position:absolute; top:6px; left:50%; transform:translateX(-50%); font-size:20px; line-height:1; filter:grayscale(.7) opacity(.7); transition:filter .4s, transform .4s; pointer-events:none; }
.bot-wall.summit .flag{ filter:none; transform:translateX(-50%) scale(1.35) rotate(-8deg); }

.bot{ position:absolute; left:50%; bottom:calc(var(--p) * (100% - 126px)); width:112px; height:126px; margin-left:-56px; padding:0; border:0; background:none; cursor:pointer; transition:bottom .9s cubic-bezier(.3,.9,.3,1.15); z-index:3; -webkit-tap-highlight-color:transparent; }
.bot:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; border-radius:14px; }
.bot-svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 7px 7px rgba(0,0,0,.6)) drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.bot .eye, .bot .pupil{ transform-box:fill-box; transform-origin:center; }
.bot .eye{ transition:transform .07s; }
.bot .pupil{ transition:transform .12s linear; }
.bot .head, .bot .fan{ transform-box:view-box; }
.bot .head{ transform-origin:80px 58px; }
.bot .fan{ transform-origin:80px 122px; animation:bot-spin 1.5s linear infinite; }
.bot .tread{ fill:none; stroke:#45454C; stroke-width:21; stroke-dasharray:2.6 4.9; }
.bot .ant{ fill:none; stroke:#B9BFC9; stroke-width:1.8; stroke-linecap:round; }
.bot .ant-tip{ fill:#FF6B57; animation:bot-led 1.8s steps(1) infinite; }
.bot .ir{ fill:#5A0E0E; animation:bot-ir 3s ease-in-out infinite; }
.bot .mouth{ fill:none; stroke:var(--gold-light); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 1.6px var(--gold)); transition:stroke .2s; }
.bot .mouth.fill{ fill:var(--gold-light); }
.bot[data-mood="grin"] .mouth{ stroke:var(--ok); fill:var(--ok); filter:drop-shadow(0 0 1.8px var(--ok)); }
.bot[data-mood="worry"] .mouth{ stroke:var(--err); filter:drop-shadow(0 0 1.8px var(--err)); }
.bot .gauge-bg{ fill:#03060A; stroke:#3A3F48; stroke-width:.8; }
.bot .gauge{ fill:var(--ok); transition:width .5s; }
.bot .pct{ fill:#9BE8A8; font:600 11px var(--mono); letter-spacing:.5px; filter:drop-shadow(0 0 1.4px rgba(143,207,154,.9)); }
.bot.blink .eye{ transform:scaleY(.1); }
.bot.climbing .tread{ animation:bot-tread .22s linear infinite; }
.bot.climbing .fan{ animation-duration:.4s; }
.bot.climbing .bot-svg{ animation:bot-hum .11s linear infinite; }
.bot.t-spin .bot-svg{ animation:bot-spin .8s ease-in-out; }
.bot.t-flip .bot-svg{ animation:bot-flip .9s ease-in-out; }
.bot.t-jump .bot-svg{ animation:bot-jump .7s ease-out; }
.bot.t-dance .bot-svg{ animation:bot-dance .9s ease-in-out; }
.bot.t-shake .bot-svg{ animation:bot-shake .5s ease-in-out; }
.bot.t-wave .head{ animation:bot-wave .9s ease-in-out; }
@keyframes bot-led{ 0%{ fill:#FF6B57; } 55%{ fill:#4A1410; } }
@keyframes bot-ir{ 50%{ fill:#D4281F; } }
@keyframes bot-tread{ to{ stroke-dashoffset:-7.5; } }
@keyframes bot-hum{ 50%{ transform:translateX(.6px); } }
@keyframes bot-spin{ to{ transform:rotate(360deg); } }
@keyframes bot-flip{ 50%{ transform:translateY(-14px) rotateX(180deg); } to{ transform:rotateX(360deg); } }
@keyframes bot-jump{ 35%{ transform:translateY(-18px) scale(1.06,.96); } 70%{ transform:translateY(0) scale(.96,1.05); } }
@keyframes bot-dance{ 20%{ transform:rotate(-12deg); } 40%{ transform:rotate(12deg); } 60%{ transform:rotate(-9deg); } 80%{ transform:rotate(9deg); } }
@keyframes bot-shake{ 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
@keyframes bot-wave{ 25%{ transform:rotate(-13deg); } 50%{ transform:rotate(9deg); } 75%{ transform:rotate(-11deg); } }

/* loose bolts: tap one before it falls off the wall */
.bolt{ position:absolute; left:calc(8% + var(--bx) * 62%); bottom:calc(10% + var(--by) * 74%); width:30px; height:30px; padding:0; border:0; background:none; cursor:pointer; z-index:4; animation:bolt-in .35s ease-out, bolt-wobble 1.1s ease-in-out .35s infinite; }
.bolt svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 0 8px rgba(240,201,135,.75)); }
.bolt.gone{ animation:bolt-out .3s ease-in forwards; }
@keyframes bolt-in{ from{ transform:scale(0) rotate(-120deg); } }
@keyframes bolt-wobble{ 50%{ transform:rotate(18deg) scale(1.08); } }
@keyframes bolt-out{ to{ transform:scale(0) rotate(160deg); opacity:0; } }

/* speech bubble */
.bot-say{ position:relative; padding:13px 15px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(22,19,26,.92); color:var(--sand); font-size:13.5px; line-height:1.65; min-height:72px; }
.bot-say::after{ content:""; position:absolute; bottom:-7px; left:46px; width:12px; height:12px; background:inherit; border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); transform:rotate(45deg); }
html[dir="rtl"] .bot-say::after{ left:auto; right:46px; }
.bot-say b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--gold); margin-bottom:3px; }
html[dir="rtl"] .bot-say b{ font-family:var(--body); letter-spacing:0; font-size:11.5px; }
.bot-say.pop span{ display:inline-block; animation:say-pop .28s ease-out; }
@keyframes say-pop{ from{ opacity:0; transform:translateY(5px); } }

.cf{ position:fixed; z-index:90; width:8px; height:12px; border-radius:2px; pointer-events:none; animation:cf-fly 1.25s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes cf-fly{ to{ transform:translate(var(--dx), var(--dy)) rotate(var(--r)); opacity:0; } }

body.bot-off .bot, body.bot-off .bolt, body.bot-off .bot-say{ display:none; }

/* narrow screens: the wall lies down and becomes a ledge the robot walks */
@media (max-width:860px){
  .bot-wall .rope{ top:auto; bottom:9px; left:0; right:0; width:auto; height:2px; margin:0; background:repeating-linear-gradient(90deg, rgba(242,230,211,.34) 0 6px, transparent 6px 11px); }
  .bot-wall .hold, .bot-wall .hold:nth-of-type(even){ left:auto; right:auto; bottom:4px; inset-inline-start:calc(var(--i) * (100% - 62px) + 18px); width:11px; height:11px; }
  .bot-wall .flag{ top:auto; bottom:14px; left:auto; inset-inline-end:8px; transform:none; font-size:17px; }
  .bot-wall.summit .flag{ transform:scale(1.3) rotate(-8deg); }
  .bot{ left:auto; margin:0; bottom:5px; inset-inline-start:calc(var(--p) * (100% - 84px) + 4px); width:48px; height:54px; transform:rotate(90deg); transition:inset-inline-start .9s cubic-bezier(.3,.9,.3,1.1); }
  html[dir="rtl"] .bot{ transform:rotate(-90deg); }
  .bolt{ left:auto; bottom:auto; top:4px; inset-inline-start:calc(4% + var(--bx) * 78%); width:26px; height:26px; }
  .bot-say{ min-height:0; padding:8px 12px; font-size:12.5px; line-height:1.5; border-radius:10px; }
  .bot-say::after{ display:none; }
  .bot-say b{ display:inline; margin:0; margin-inline-end:6px; }
}