/* EnCat-2027 — fixed side animations (catalysis / chemical engineering / energy) + lab bot */
.chemfx{position:absolute;top:0;left:0;width:100%;height:0;pointer-events:none;z-index:50;--sp:0;--c1:#22d3ee;--c2:#34d399;--c3:#a78bfa;--c4:#fbbf24}
.chemfx .fx-sticky{position:sticky;top:0;height:100vh;width:100%;pointer-events:none}
.chemfx-bot{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden;--sp:0;--c1:#22d3ee;--c2:#34d399;--c3:#a78bfa;--c4:#fbbf24}
.chemfx-bot{--c1:#22d3ee}
.chemfx .fx-side{position:absolute;top:92px;bottom:24px;width:calc((100vw - 1320px)/2 - 18px);max-width:280px;display:none;flex-direction:column;justify-content:space-between;align-items:center;gap:6px}
.chemfx .fx-left{left:10px}
.chemfx .fx-right{right:10px;bottom:170px}
.chemfx .fx-item{flex:var(--w,1) 1 0;min-height:0;width:100%;opacity:.95}
.chemfx-bot svg,.chemfx svg{width:100%;height:100%;display:block;overflow:visible}
@media (min-width:1532px){.chemfx .fx-side{display:flex}}
@media (max-height:640px){.chemfx .fx-hide-short{display:none}}

/* shared svg styling */
.chemfx .ln{fill:none;stroke:var(--c1);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.chemfx .ln-d{stroke-dasharray:4 4}
.chemfx .dot{fill:var(--c1)}
.chemfx .lbl{font:600 9px/1 "Roboto",sans-serif;letter-spacing:.14em;fill:#6b7ea6;text-transform:uppercase}
.chemfx .pill{fill:#14213d;stroke:var(--c1);stroke-width:1.4}
.chemfx .pill-t{font:700 12px "Roboto",sans-serif;fill:var(--c1);text-anchor:middle}
.chemfx .glow{filter:drop-shadow(0 0 5px rgba(34,211,238,.65))}
.chemfx .rot{transform-box:fill-box;transform-origin:center}

/* ---- keyframes ---- */
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-spin-r{to{transform:rotate(-360deg)}}
@keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes fx-pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes fx-rise{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:.9}100%{transform:translateY(-88px) scale(1);opacity:0}}
@keyframes fx-flow{to{stroke-dashoffset:-16}}
@keyframes fx-dash{to{stroke-dashoffset:-40}}
@keyframes fx-glint{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes fx-bolt{0%,60%,100%{opacity:.25}70%,90%{opacity:1}}
@keyframes fx-rise-s{0%{transform:translateY(0) scale(.4);opacity:0}20%{opacity:1}100%{transform:translateY(-20px) scale(1);opacity:0}}
@keyframes fx-wave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(22deg)}}
@keyframes fx-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fx-shadow{0%,100%{transform:scaleX(1);opacity:.35}50%{transform:scaleX(.8);opacity:.2}}
@keyframes fx-glow-tip{0%,100%{opacity:.5;r:3}50%{opacity:1;r:4.5}}
@keyframes fx-wiggle{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

.chemfx .spin-slow{animation:fx-spin 24s linear infinite}
.chemfx .spin-med{animation:fx-spin 12s linear infinite}
.chemfx .spin-fast{animation:fx-spin 3.2s linear infinite}
.chemfx .spin-rev{animation:fx-spin-r 18s linear infinite}
.chemfx .bob{animation:fx-bob 4s ease-in-out infinite}
.chemfx .pulse{animation:fx-pulse 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.chemfx .flow{stroke-dasharray:3 5;animation:fx-flow 1.2s linear infinite}
.chemfx .dashrun{stroke-dasharray:6 6;animation:fx-dash 5s linear infinite}
.chemfx .bubble{fill:none;stroke:var(--c1);stroke-width:1.2;animation:fx-rise 4s ease-in infinite;transform-box:fill-box;transform-origin:center}
.chemfx .glint{animation:fx-glint 2.4s ease-in-out infinite}
.chemfx .bolt{animation:fx-bolt 2.6s steps(1) infinite}

/* scroll-linked rotation: continuous spin lives on inner node, scroll turn on outer node */
.chemfx .scroll-turn{transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--sp) * 540deg))}
.chemfx .scroll-turn-r{transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--sp) * -540deg))}

.chemfx .batt-fill{fill:url(#fxBatt);transform-box:fill-box;transform-origin:left center;transform:scaleX(calc(.1 + var(--sp)*.9));transition:transform .25s linear}
.chemfx .liq{animation:fx-wiggle 3s ease-in-out infinite}
.chemfx .flame,.chemfx-bot .flame{animation:fx-pulse 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
/* ---- bot ---- */
.chemfx-bot .fx-bot{position:absolute;right:14px;bottom:12px;width:104px;height:132px;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chemfx-bot .fx-bot .bot-body{animation:fx-float 3.6s ease-in-out infinite}
.chemfx-bot .fx-bot .bot-shadow{animation:fx-shadow 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.chemfx-bot .fx-bot .arm{animation:fx-wave 1.8s ease-in-out infinite;transform-box:view-box;transform-origin:72px 70px}
.chemfx-bot .fx-bot .eye{animation:fx-blink 5s infinite;transform-box:fill-box;transform-origin:center}
.chemfx-bot .fx-bot .tip{animation:fx-glow-tip 1.8s ease-in-out infinite}
.chemfx-bot .fx-bot .fb{animation:fx-rise-s 2.2s ease-in infinite;transform-box:fill-box;transform-origin:center;stroke:#bffcf0;fill:none;stroke-width:1}
.chemfx-bot .bot-say{position:absolute;right:122px;bottom:62px;max-width:210px;padding:9px 13px;border-radius:12px 12px 2px 12px;background:#0f1c36;border:1px solid var(--c1);color:#e8f6fb;font:500 12.5px/1.4 "Roboto",sans-serif;box-shadow:0 6px 24px rgba(34,211,238,.25);opacity:0;transform:translateY(6px) scale(.96);transition:.35s;pointer-events:none}
.chemfx-bot .bot-say.show{opacity:1;transform:none}
.chemfx-bot .bot-say b{color:var(--c1)}

/* keep the back-to-top button clear of the bot (only on pages with the bot) */
body .scroll-top{bottom:156px;right:22px}

@media (max-width:575px){.chemfx-bot .fx-bot{width:72px;height:92px;right:8px;bottom:8px}.chemfx-bot .bot-say{right:86px;bottom:40px;max-width:170px;font-size:12px}body .scroll-top{bottom:112px;right:14px}}
@media (prefers-reduced-motion:reduce){.chemfx *,.chemfx-bot *{animation:none!important}.chemfx .scroll-turn,.chemfx .scroll-turn-r{transform:none}}

.chemfx-bot .bot-x{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:1px solid var(--c1);background:#0f1c36;color:#e8f6fb;font:700 14px/1 Arial,sans-serif;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;pointer-events:auto}
.chemfx-bot .bot-x:hover{background:var(--c1);color:#0f1c36}
.chemfx-bot .bot-say.show{pointer-events:auto}