/* SuXin homepage: scroll story over the isometric warehouse, plus scroll effects
   for the rest of the page. Loaded only by index.html, after site.css and suxin.css. */

/* ---------- warehouse materials (three tones per block: top, left, right) ---------- */
.site {
  --wh-lane: #eee3dc;
  --wh-lane-op: .13;
  --wh-shadow: #00000059;
  --wh-screen: #160f0c;
  --wh-skin: #f1c9a5;
  --wh-legs: #3b2e28;
}
.wh .bx .t { fill: var(--t); }
.wh .bx .l { fill: var(--l); }
.wh .bx .r { fill: var(--r); }
.wh .m-floor   { --t: #2e211c; --l: #1c130f; --r: #251a15; }
.wh .m-post    { --t: #beb5b1; --l: #7a6e69; --r: #988d88; }
.wh .m-shelf   { --t: #5f514b; --l: #3f322d; --r: #4e403a; }
.wh .m-box     { --t: #eccb97; --l: #b4844c; --r: #d3a46a; }
.wh .m-box2    { --t: #dcb27a; --l: #9c6d3c; --r: #bd8d55; }
.wh .m-pallet  { --t: #8f7049; --l: #5a442b; --r: #75583a; }
.wh .m-truck   { --t: #f3f1f0; --l: #bfb8b5; --r: #ded9d7; }
.wh .m-cab     { --t: #fb923c; --l: #9a3412; --r: #ea580c; }
.wh .m-steel   { --t: #d9d3d0; --l: #9a8e89; --r: #bcb2ae; }
.wh .m-dark    { --t: #3a2d27; --l: #1a1210; --r: #2f221d; }
.wh .m-machine { --t: #edeae9; --l: #a69c98; --r: #c9c2bf; }
.wh .m-belt    { --t: #483b36; --l: #29201c; --r: #382c27; }
.wh .m-pod     { --t: #3b2b24; --l: #201713; --r: #2e211c; }
.wh .m-screen  { --t: #4b3c36; --l: #160f0c; --r: #342823; }
.wh .m-desk    { --t: #e2dddb; --l: #9c918c; --r: #c0b8b5; }
.wh .m-paper   { --t: #ffffff; --l: #e2dedd; --r: #f3f1f0; }
.wh .m-shop    { --t: #362923; --l: #1e1511; --r: #2a1e19; }
.wh .m-counter { --t: #f0edeb; --l: #dc2626; --r: #ea580c; }
.wh .m-agv     { --t: #d55d32; --l: #9a3412; --r: #ea580c; }
.wh .m-agvtop  { --t: #fed7aa; --l: #d55d32; --r: #fdba74; }
.wh .m-fork    { --t: #fcd34d; --l: #b45309; --r: #e08a0b; }
.wh .m-prod1   { --t: #fdba74; --l: #b91c1c; --r: #e2421a; }
.wh .m-prod2   { --t: #fca5a5; --l: #b45454; --r: #e07a7a; }
.wh .m-prod3   { --t: #fde68a; --l: #b08a1e; --r: #dcb43a; }

.wh { display: block; width: 100%; height: 100%; overflow: visible; }
.wh polygon { stroke-linejoin: round; }
.wh-grid { fill: none; stroke: #ffffff0d; stroke-width: 1; }
.wh-lane { fill: var(--wh-lane); fill-opacity: var(--wh-lane-op); }
.wh-lane-dash { fill: none; stroke: #fbbf24; stroke-width: 1.6; stroke-dasharray: 2 10; stroke-linecap: round; opacity: .55; animation: wh-dash 1.6s linear infinite; }
.wh-mark { fill: none; stroke: #fbbf2466; stroke-width: 1.4; stroke-dasharray: 6 5; }
.wh-plate { fill: #ffffff06; stroke: #fbbf2433; stroke-width: 1; }
.wh-shoptile { fill: #ffffff0a; }
.wh-belt-run { fill: none; stroke: #fbbf24; stroke-width: 1.2; stroke-dasharray: 3 6; opacity: .5; animation: wh-dash .9s linear infinite reverse; }
.wh-tape { fill: none; stroke: #9a6a34; stroke-width: 2; }
.wh-brand text { fill: #dc2626; font-family: var(--f-display); font-weight: 700; }
.wh-brand-mark { fill: #ea580c; }
.wh-glass { fill: #fed7aa; opacity: .55; }
.wh-screen-bg { fill: var(--wh-screen); }
.wh-bar { fill: #f59e0b; opacity: .85; }
.wh-bar.hot { fill: #fbbf24; opacity: 1; }
.wh-spark { fill: none; stroke: #ffffff; stroke-width: .05; stroke-linejoin: round; opacity: .9; }
.wh-shadow { fill: var(--wh-shadow); }
.wh-person .legs { fill: var(--wh-legs); }
.wh-person .body { fill: #f59e7a; }
.wh-person.staff .body { fill: #ea580c; }
.wh-person .head { fill: var(--wh-skin); }
.wh-arm { stroke: #edeae9; stroke-width: 7; stroke-linecap: round; }
.wh-joint { fill: #ea580c; stroke: #edeae9; stroke-width: 1.5; }
.wh-grip { fill: none; stroke: #a69c98; stroke-width: 2.2; stroke-linecap: round; }
.wh-armbase { fill: #1a1210; opacity: .6; }
.wh-beam { fill: #fbbf24; }
.wh-rotor { fill: #ffffff40; stroke: #ffffff8c; stroke-width: 1; }
.wh-led { fill: #fed7aa; animation: wh-blink 1.2s ease-in-out infinite; }
.wh-ring ellipse { fill: none; stroke: #fbbf24; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.wh-ring ellipse.a { fill: #fbbf2414; stroke-dasharray: 8 6; }
.wh-ring.on ellipse.a { opacity: .9; animation: wh-spin 14s linear infinite; }
.wh-ring.on ellipse.b { animation: wh-pulse 2.2s var(--ease) infinite; }
@keyframes wh-dash { to { stroke-dashoffset: -24; } }
@keyframes wh-blink { 50% { opacity: .2; } }
@keyframes wh-pulse { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes wh-spin { to { stroke-dashoffset: -140; } }

/* ---------- Semutz trail: yard, road, outlet, ants, tags ---------- */
.wh .m-yard    { --t: #1f1714; --l: #120c0a; --r: #181210; }
.wh .m-road    { --t: #171210; --l: #0c0807; --r: #120d0b; }
.wh .m-wall    { --t: #4a3a33; --l: #2d231f; --r: #3a2d28; }
.wh-floor { fill: #2e211c; }
.wh-shopfloor { fill: #33241e; }
.wh-roadline { fill: none; stroke: #ffffff55; stroke-width: 2; stroke-dasharray: 18 14; }
.wh-kerb { fill: none; stroke: #fbbf2455; stroke-width: 2; }
.wh-trail { fill: none; stroke: #ea580c; stroke-width: 1.2; stroke-dasharray: 1 7; stroke-linecap: round; opacity: .55; }
.wh-ant circle { fill: #f97316; }
.wh-bigant { stroke: #7c2d12; stroke-width: .6; }
.wh-bigant.abd { fill: #ea580c; }
.wh-bigant.thx { fill: #f97316; }
.wh-bigant.head { fill: #fb923c; }
.wh-bigant-shine { fill: #fff; opacity: .45; }
.wh-bigant-eyew { fill: #fff; stroke: #7c2d12; stroke-width: .5; }
.wh-bigant-eye { fill: #1a1210; }
.wh-bigant-glint { fill: #fff; }
.wh-bigant-cheek { fill: #f472b6; opacity: .7; }
.wh-bigant-smile { fill: none; stroke: #7c2d12; stroke-width: .9; stroke-linecap: round; }
.wh-bigant-tip { fill: #dc2626; }
.wh-bigant-leg { fill: none; stroke: #9a3412; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wh-bigant-leg.antn { stroke-width: 1.3; }
.wh-ant circle:last-child { fill: #dc2626; }
.wh-tablet { fill: #fed7aa; stroke: #1a1210; stroke-width: 1.2; animation: wh-blink 1.6s ease-in-out infinite; }
.wh-person.rep .body { fill: #dc2626; }
.wh-sign-bg { fill: #ea580c; }
.wh-sign text { fill: #fff; font: 700 .72px var(--f-display); letter-spacing: .04em; }
.wh-bubble rect { fill: var(--surface-solid, #221a17); stroke: #ea580c; stroke-width: 1.4; }
.wh-bubble text { fill: var(--tx, #f6f2ef); font: 600 9.5px var(--f-mono); }
.wh-bubble .tick { fill: none; stroke: #22c55e; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wh-bubble { transition: opacity .35s var(--ease); }
.wh-tag { opacity: 0; transition: opacity .5s var(--ease); }
.story-stage[data-step="0"] .wh-tag { opacity: 1; }
.wh-tag rect { fill: #ea580c; filter: drop-shadow(0 6px 10px #0008); }
.wh-tag text { fill: #fff; font: 700 11px var(--f-mono); letter-spacing: .12em; }
.wh-belt-run.out { animation-direction: normal; }
:root[data-theme=light] .wh .m-yard { --t: #ece6e2; --l: #c9c1bd; --r: #dbd4d0; }
:root[data-theme=light] .wh .m-road { --t: #cfc8c4; --l: #a9a19d; --r: #bcb4b0; }
:root[data-theme=light] .wh .m-wall { --t: #f1ece9; --l: #c2bab6; --r: #d9d2ce; }
:root[data-theme=light] .wh-floor { fill: #f6f3f1; }
:root[data-theme=light] .wh-shopfloor { fill: #f3ebe5; }
:root[data-theme=light] .wh-roadline { stroke: #ffffffcc; }
:root[data-theme=light] .wh-trail { stroke: #dc2626; }

/* Light theme: grey warehouse like an architect's drawing, brand-green robots */
:root[data-theme=light] .site { --wh-lane: #ffffff; --wh-lane-op: 1; --wh-shadow: #1a121026; --wh-screen: #1a1210; --wh-legs: #5b4e48; }
:root[data-theme=light] .wh .m-floor   { --t: #e7e4e2; --l: #b9b2af; --r: #d0cac8; }
:root[data-theme=light] .wh .m-shelf   { --t: #cfcac8; --l: #9f9794; --r: #b7b1ae; }
:root[data-theme=light] .wh .m-post    { --t: #9e9693; --l: #6d6562; --r: #847c79; }
:root[data-theme=light] .wh .m-dark    { --t: #7d7572; --l: #4c4644; --r: #665e5b; }
:root[data-theme=light] .wh .m-belt    { --t: #8e8784; --l: #595250; --r: #726b68; }
:root[data-theme=light] .wh .m-pod     { --t: #d9d5d3; --l: #a69f9c; --r: #c0bab7; }
:root[data-theme=light] .wh .m-shop    { --t: #eadfd8; --l: #a49c99; --r: #c2bbb8; }
:root[data-theme=light] .wh .m-truck   { --t: #ffffff; --l: #c5bfbd; --r: #e5e2e0; }
:root[data-theme=light] .wh-grid { stroke: #1a12100d; }
:root[data-theme=light] .wh-lane-dash { stroke: #dc2626; opacity: .45; }
:root[data-theme=light] .wh-plate { fill: #ffffff40; stroke: #dc262640; }
:root[data-theme=light] .wh-shoptile { fill: #ffffff59; }
:root[data-theme=light] .wh-armbase { fill: #4c4644; opacity: .35; }
:root[data-theme=light] .wh-rotor { fill: #1a121026; stroke: #1a121059; }
:root[data-theme=light] .wh-ring ellipse { stroke: #dc2626; }
:root[data-theme=light] .wh-ring ellipse.a { fill: #dc262614; }

/* ---------- scroll story layout ---------- */
.site .story { position: relative; }
.site .story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 0; }
.site .story-grid { position: absolute; inset: 0; pointer-events: none; --grid: #1a121014; --scan: #7dd3e8;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 128px 128px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 55%, transparent 100%); }
.site .story-grid::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; opacity: .35; }
.site .story-grid::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--scan) 15%, var(--scan) 85%, transparent); opacity: .7; animation: story-scan 14s linear infinite; }
@keyframes story-scan { from { transform: translateY(-10px); } to { transform: translateY(100vh); } }
:root:not([data-theme=light]) .site .story-grid { --grid: #ffffff10; --scan: #38bdf8aa; }
@media (prefers-reduced-motion: reduce) { .site .story-grid::after { animation: none; top: 62%; } }
.site .story-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.site .story-stage.is-ready .story-scene { opacity: 1; }
.site .story-scene {
  --fade-x: linear-gradient(90deg, transparent 0%, #0000002e 26%, #000 52%);
  --fade-b: linear-gradient(0deg, transparent 0%, #000 16%);
  --fade-t: linear-gradient(180deg, #0000004d 0%, #000 18%);
  -webkit-mask-image: var(--fade-x), var(--fade-b), var(--fade-t); mask-image: var(--fade-x), var(--fade-b), var(--fade-t);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.site .story-stage .glow { z-index: 0; opacity: .3; }
.site .story-steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.site .story-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 6rem; }
.site .story-step:first-child { min-height: calc(100svh - 0px); padding-top: 4rem; }
.site .story-step :is(a, button, .story-card) { pointer-events: auto; }
.site .story-hero { max-width: 610px; }
.site .story-hero .lead { max-width: 52ch; margin-top: 1.15rem; }
.site .story-hero h1 { margin-top: 1.15rem; }
.site .story-card {
  max-width: 430px; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--r-lg);
  border: 1px solid var(--glass-line); background: var(--glass); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  transition: opacity .5s var(--ease), transform .6s var(--ease-pop);
}
html.js .site .story-step:not(.is-active) .story-card { opacity: .28; transform: translateY(14px) scale(.98); }
.site .story-num { font: 800 clamp(2.6rem, 4.6vw, 3.6rem)/1 var(--f-display); letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: .6rem; }
.site .story-card .h3 { margin-top: .75rem; }
.site .story-card p { color: var(--tx-2); font-size: var(--fs-sm); margin-top: .6rem; text-wrap: pretty; }
.site .story-meta { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); font: 500 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .04em; color: var(--tx-3); }
.site .story-meta i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px #22c55e26; flex: none; }
.site .story-card .link-arrow { margin-top: .9rem; display: inline-flex; }

.site .story-rail { position: absolute; right: clamp(.75rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: .45rem; }
.site .story-rail a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 .6rem/1 var(--f-mono); color: var(--tx-3); border: 1px solid var(--line-strong); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: all .3s var(--ease); }
.site .story-rail a:hover { color: var(--tx); border-color: var(--tx-3); }
.site .story-rail a.on { color: #ffffff; background: var(--grad); border-color: transparent; transform: scale(1.12); box-shadow: 0 8px 18px -8px #ea580ce6; }

.site .scroll-hint { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2.2rem; font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }
.site .scroll-hint .mouse { width: 20px; height: 32px; border: 1.5px solid var(--tx-3); border-radius: 12px; position: relative; }
.site .scroll-hint .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--gold); animation: wh-wheel 1.8s var(--ease) infinite; }
@keyframes wh-wheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

@media (width <= 900px) {
  .site .story-scene {
    --fade-x: linear-gradient(#000, #000);
    --fade-b: linear-gradient(0deg, transparent 0%, #0000001f 34%, #000 62%);
    --fade-t: linear-gradient(180deg, #0000004d 0%, #000 16%);
  }
  .site .story-step { align-items: flex-end; padding-block: 4rem 2.5rem; }
  .site .story-step:first-child { padding-top: 40svh; }
  .site .story-card { max-width: none; }
  .site .story-num { font-size: 2.1rem; margin-bottom: .3rem; }
  .site .story-rail { top: auto; bottom: auto; top: 5.2rem; transform: none; flex-direction: row; right: 50%; translate: 50% 0; gap: .35rem; }
  .site .story-rail a { width: 24px; height: 24px; font-size: .52rem; }
  .site .scroll-hint { display: none; }
}

/* ---------- page-wide scroll effects ---------- */
.site .scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  html.js .site .rv:not([data-in]) { opacity: 0; transform: translateY(46px) scale(.97); filter: blur(4px); }
  html.js .site .rv[data-in] { transition: opacity .8s var(--ease), transform .9s var(--ease-pop), filter .8s var(--ease); }
}

/* Products: pinned, and the cards slide sideways as you scroll (wide screens) */
.site .hpin.is-on { padding-block: 0; }
.site .hpin.is-on .hpin-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 66px; }
.site .hpin.is-on .hpin-track { display: flex; gap: 1.25rem; width: max-content; will-change: transform; padding-right: var(--gutter); }
.site .hpin.is-on .hpin-track > .card { width: 350px; flex: none; }
.site .hpin.is-on .sec-head { margin-bottom: clamp(1rem, 2vw, 1.75rem); gap: .6rem; max-width: none; }
.site .hpin.is-on .sec-head .lead { display: none; }
@media (height < 820px) { .site .hpin.is-on .h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); } }
.site .hpin-bar { display: none; }
.site .hpin.is-on .hpin-bar { display: block; height: 3px; border-radius: 3px; background: var(--surface-2); margin-top: 1.5rem; overflow: hidden; }
.site .hpin-bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }

/* Conveyor belt divider: cartons move as the page scrolls */
.site .belt { position: relative; height: 92px; overflow: hidden; margin-block: clamp(.5rem, 2vw, 1.5rem); }
.site .belt svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 92px; display: block; }
.site .belt .rail { fill: var(--surface-2); stroke: var(--line-strong); }
.site .belt .leg { fill: var(--line-strong); }
.site .belt .roller { fill: var(--bg-2); stroke: var(--tx-3); stroke-width: 1.2; }
.site .belt .spoke { stroke: var(--tx-3); stroke-width: 1.2; }
.site .belt .ctn { fill: #e2bb84; }
.site .belt .ctn-side { fill: #c1925a; }
.site .belt .ctn-tape { fill: #9a6a34; opacity: .55; }
.site .belt .ctn-label { fill: #1a1210; font: 600 9px var(--f-mono); letter-spacing: .08em; }
.site .belt .ctn-tag { fill: #ffffff; }

/* Cards in a pinned track tilt and lift as they pass the middle of the screen */
.site .hpin.is-on .hpin-track { perspective: 1400px; }
.site .hpin.is-on .hpin-track > * { transform-origin: 50% 60%; transition: transform .18s linear, opacity .18s linear, border-color .3s, box-shadow .3s; }
.site .hpin.is-on .hpin-track > .is-focus { border-color: color-mix(in srgb, var(--orange) 55%, transparent); box-shadow: 0 30px 70px -36px #ea580cb3; }
.site .hpin.is-on .hpin-track > .is-focus .glowline { opacity: 1; }
.site .hpin.is-on .hpin-track > .is-focus .pcard-tag { animation: wh-bob 1.6s var(--ease) infinite; }
@keyframes wh-bob { 50% { transform: translateY(-4px); } }

/* Progress bar under the track, with a little robot cart carrying a carton */
.site .hpin.is-on .hpin-bar { overflow: visible; position: relative; margin-top: 2.6rem; }
.site .hpin-bar i { border-radius: 3px; }
.site .hpin-cart { display: none; }
.site .hpin.is-on .hpin-cart { display: block; position: absolute; bottom: 3px; left: 0; width: 34px; height: 30px; margin-left: -17px; pointer-events: none; }

/* Product pages: feature lists in the story cards, screens as a sideways track */
.site .story-list { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.site .story-list li { position: relative; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--tx-2); line-height: 1.5; }
.site .story-list li::before { content: ""; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.site .story-who { margin-top: .75rem; font: 600 1.08rem/1.4 var(--f-display); color: var(--tx); }
.site .story-hero .crumbs { margin-bottom: .25rem; }
.site .story-hero .badge { display: inline-flex; }
.site .shots { grid-template-columns: 1fr; gap: 1.25rem; }
.site .shot { margin: 0; padding: clamp(.8rem, 1.6vw, 1.1rem); }
.site .shot .car-cap { margin-top: .75rem; }
.site .hpin.is-on .hpin-track > .shot { width: min(640px, 58vw); }

/* the progress marker is an ant carrying a carton */
.site .hpin-cart { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36'%3E%3Cg stroke='%239a3412' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cg%3E%3Cpath d='M20 26l-5 8M23 26l1 8M26 25l6 8'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='-6 23 26;6 23 26;-6 23 26' dur='.45s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M21 26l-8 7M24 26l-2 8M27 25l9 7'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='6 23 26;-6 23 26;6 23 26' dur='.45s' repeatCount='indefinite'/%3E%3C/g%3E%3Cpath d='M34 17q3-7 9-7M32 16q1-7 6-9'/%3E%3C/g%3E%3Crect x='6' y='3' width='21' height='16' rx='2' fill='%23e2bb84'/%3E%3Crect x='14.5' y='3' width='4' height='16' fill='%239a6a34' opacity='.55'/%3E%3Crect x='23' y='3' width='4' height='16' rx='1' fill='%23c1925a'/%3E%3Cellipse cx='12' cy='24' rx='8' ry='6' fill='%23dc2626'/%3E%3Cellipse cx='22.5' cy='23.5' rx='4.6' ry='3.8' fill='%23ea580c'/%3E%3Ccircle cx='31' cy='20.5' r='5' fill='%23ea580c'/%3E%3Ccircle cx='33' cy='19.5' r='1.3' fill='%23fff'/%3E%3C/svg%3E") no-repeat center bottom / contain; width: 40px; height: 30px; margin-left: -20px; animation: hs-hop .45s ease-in-out infinite; }
@keyframes hs-hop { 50% { transform: translateY(-2px); } }

/* Ant-trail dividers */
.site .belt .trail { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.site .belt .ant-abd { fill: #dc2626; }
.site .belt .ant-body { fill: #ea580c; }
.site .belt .ant-eye { fill: #fff; }
.site .belt .ant-leg { stroke: #9a3412; stroke-width: 2.4; stroke-linecap: round; }
.site .belt .ant-leg.far { opacity: .6; }
.site .belt .ant-ant { fill: none; stroke: #9a3412; stroke-width: 2; stroke-linecap: round; }
:root[data-theme=light] .site .belt .ant-leg, :root[data-theme=light] .site .belt .ant-ant { stroke: #7c2d12; }