/* THE STATE OF THE INDUSTRY — clean, light, compact. Icon-left, text-right rows.
   The gold-robot icons blend into white via multiply. As the section scrolls in,
   one bot walks in and "multiplies" into the six; then each keeps a small idle
   motion. Desktop: 2 columns. Mobile: single column. Reduced-motion safe. */
#slop .sec-head{max-width:820px}

#slop .slop-stage{position:relative}

#slop .slop-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,2.6vw,34px) clamp(34px,5vw,72px);
  margin-top:clamp(30px,4vw,50px);
}
@media (max-width:620px){#slop .slop-grid{grid-template-columns:1fr;gap:20px}}

#slop .kind{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,18px);padding:2px 0}
#slop .kind-ic{flex:0 0 auto;width:clamp(64px,8vw,84px);aspect-ratio:1;margin-top:-6px;transform-origin:50% 92%}
#slop .kind-ic img{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply;transition:transform .4s cubic-bezier(.22,1,.36,1);transform-origin:50% 80%}
#slop .kind:hover .kind-ic img,#slop .kind:focus-within .kind-ic img{transform:translateY(-6px) rotate(-3deg) scale(1.07)}

#slop .kind-body{min-width:0;padding-top:6px}
#slop .kind-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0 0 5px}
#slop .kind-name{font-size:clamp(16px,1.6vw,19px);font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0 0 5px;transition:color .2s ease}
#slop .kind:hover .kind-name,#slop .kind:focus-within .kind-name{color:var(--accent)}
#slop .kind-tell{font-size:14px;line-height:1.5;color:var(--muted);margin:0}

#slop .kind:focus{outline:none}
#slop .kind:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:10px}

/* ---------- the origin bot: walks in, then bursts ---------- */
#slop .slop-origin{display:none}
#slop.slop-anim .slop-origin{
  display:block;position:absolute;left:0;right:0;margin:0 auto;top:-6px;
  width:clamp(90px,10vw,124px);aspect-ratio:1;z-index:3;pointer-events:none;opacity:0;
}
#slop.slop-anim .slop-origin img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
#slop.slop-anim.multiplied .slop-origin{animation:slopArrive .5s ease-out forwards, slopBurst .45s ease-in .52s forwards}
@keyframes slopArrive{0%{opacity:0;transform:translateY(-50px) scale(.85)}55%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slopBurst{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(0) scale(1.8)}}

/* ---------- multiply: the six pop out of the burst, staggered ---------- */
#slop.slop-anim .kind{opacity:0}
#slop.slop-anim .kind-ic{transform:scale(.18);opacity:0}
#slop.slop-anim.multiplied .kind{opacity:1}
#slop.slop-anim.multiplied .kind-ic{opacity:1;transform:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
#slop.slop-anim.multiplied .kind:nth-child(1){transition:opacity .3s ease .60s}
#slop.slop-anim.multiplied .kind:nth-child(2){transition:opacity .3s ease .68s}
#slop.slop-anim.multiplied .kind:nth-child(3){transition:opacity .3s ease .76s}
#slop.slop-anim.multiplied .kind:nth-child(4){transition:opacity .3s ease .84s}
#slop.slop-anim.multiplied .kind:nth-child(5){transition:opacity .3s ease .92s}
#slop.slop-anim.multiplied .kind:nth-child(6){transition:opacity .3s ease 1.00s}
#slop.slop-anim.multiplied .kind:nth-child(7){transition:opacity .3s ease 1.08s}
#slop.slop-anim.multiplied .kind:nth-child(1) .kind-ic{transition-delay:.60s}
#slop.slop-anim.multiplied .kind:nth-child(2) .kind-ic{transition-delay:.68s}
#slop.slop-anim.multiplied .kind:nth-child(3) .kind-ic{transition-delay:.76s}
#slop.slop-anim.multiplied .kind:nth-child(4) .kind-ic{transition-delay:.84s}
#slop.slop-anim.multiplied .kind:nth-child(5) .kind-ic{transition-delay:.92s}
#slop.slop-anim.multiplied .kind:nth-child(6) .kind-ic{transition-delay:1.00s}
#slop.slop-anim.multiplied .kind:nth-child(7) .kind-ic{transition-delay:1.08s}

/* ---------- idle life, starting after the multiply settles ---------- */
@keyframes slopBob   {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes slopSway  {0%,100%{transform:translateX(-3px) rotate(-2.2deg)}50%{transform:translateX(3px) rotate(2.2deg)}}
@keyframes slopWobble{0%,100%{transform:rotate(-4.5deg)}50%{transform:rotate(4.5deg)}}
@keyframes slopRock  {0%,100%{transform:rotate(-5.5deg)}50%{transform:rotate(5.5deg)}}
@keyframes slopTwitch{0%,88%,100%{transform:translateY(0) rotate(0)}94%{transform:translateY(-3px) rotate(1.5deg)}}
#slop.slop-anim.multiplied .kind:nth-child(1) .kind-ic{animation:slopWobble 3.6s ease-in-out 1.5s infinite}
#slop.slop-anim.multiplied .kind:nth-child(2) .kind-ic{animation:slopTwitch 5.5s ease-in-out 1.6s infinite}
#slop.slop-anim.multiplied .kind:nth-child(3) .kind-ic{animation:slopSway 4.3s ease-in-out 1.7s infinite}
#slop.slop-anim.multiplied .kind:nth-child(4) .kind-ic{animation:slopBob 3.2s ease-in-out 1.8s infinite}
#slop.slop-anim.multiplied .kind:nth-child(5) .kind-ic{animation:slopSway 3.9s ease-in-out 1.9s infinite}
#slop.slop-anim.multiplied .kind:nth-child(6) .kind-ic{animation:slopRock 3.5s ease-in-out 2.0s infinite}
#slop.slop-anim.multiplied .kind:nth-child(7) .kind-ic{animation:slopSway 4.1s ease-in-out 2.1s infinite}

/* If JS is off, the six are simply visible and static (no pre-hide is applied). */

@media (prefers-reduced-motion:reduce){
  #slop .slop-origin{display:none!important}
  #slop.slop-anim .kind{opacity:1}
  #slop.slop-anim .kind-ic{opacity:1;transform:none}
  #slop .kind-ic,#slop.slop-anim.multiplied .kind-ic{animation:none!important;transition:none}
  #slop .kind:hover .kind-ic img,#slop .kind:focus-within .kind-ic img{transform:none}
}