/* Gut Feeling — seamless floating microbiome (artistically blended, no square crop)
   The source asset has feathered native alpha. This CSS provides an extra soft veil,
   while independently animated rod/coccus/chain silhouettes drift toward the cluster. */
.hero-art {
  isolation: isolate;
  overflow: visible;
}
.hero-art .microbiome-illustration {
  inset: -17% -16%;
  width: 132%;
  height: 134%;
  object-fit: contain;
  opacity: 1;
  /* Double feathering makes the photographic border invisible at any layout size. */
  -webkit-mask-image: radial-gradient(ellipse 51% 50% at 50% 50%, #000 41%, rgba(0,0,0,.88) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 51% 50% at 50% 50%, #000 41%, rgba(0,0,0,.88) 64%, transparent 100%);
  filter: saturate(.98) drop-shadow(0 5px 20px rgba(10,54,38,.13));
}
/* Detached little microbes travel out of the background, approach the illustration,
   and dissolve instead of appearing abruptly at the edge of a rectangle. */
.hero-art .microbe-drift-field {
  position: absolute;
  inset: -18% -15%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.drifting-microbe {
  position: absolute;
  display: block;
  width: var(--w,24px);
  height: var(--h,12px);
  border-radius: 55% / 60%;
  background: radial-gradient(ellipse at 35% 24%,rgba(249,255,226,.9),rgba(178,233,188,.78) 30%,rgba(78,147,111,.94) 69%,rgba(20,81,63,.93) 100%);
  border: 1px solid rgba(230,255,229,.42);
  box-shadow: inset 0 0 2px 1px rgba(255,255,240,.38),0 0 14px rgba(190,250,203,.29);
  opacity: 0;
  will-change: transform, opacity;
  animation: microbe-approach var(--time,9s) ease-in-out infinite;
  animation-delay: var(--delay,0s);
}
.drifting-microbe::before {
  content: "";
  position: absolute;
  inset: 25% 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 50%,rgba(22,94,70,.65) 0 9%,transparent 13%) 0 0/8px 8px,
              radial-gradient(circle at 75% 55%,rgba(233,255,224,.38),transparent 63%);
  opacity: .72;
}
.drifting-microbe.coccus { width:var(--w,15px); height:var(--w,15px); border-radius:50%; }
.drifting-microbe.curved { border-radius:70% 28% 65% 35%; transform-origin:50% 50%; }
.drifting-microbe.chain {
  width:var(--w,32px); height:var(--h,13px);
  border:0;
  background:radial-gradient(circle at 15% 50%,#cae9a7 0 13%,transparent 16%),
             radial-gradient(circle at 39% 50%,#92caa0 0 16%,transparent 19%),
             radial-gradient(circle at 64% 50%,#cbe4ac 0 17%,transparent 20%),
             radial-gradient(circle at 86% 50%,#6eb391 0 14%,transparent 18%);
  box-shadow:none;
}
.drifting-microbe.chain::before { content:none; }
@keyframes microbe-approach {
  0%   { opacity:0; transform:translate3d(var(--from-x,-20px),var(--from-y,18px),0) rotate(var(--angle,-25deg)) scale(.45); filter:blur(2.5px); }
  22%  { opacity:.38; filter:blur(1px); }
  48%  { opacity:.77; transform:translate3d(0px,0px,0) rotate(calc(var(--angle,-25deg) + 15deg)) scale(1); filter:blur(0px); }
  73%  { opacity:.38; filter:blur(.6px); }
  100% { opacity:0; transform:translate3d(var(--to-x,34px),var(--to-y,-26px),0) rotate(calc(var(--angle,-25deg) + 40deg)) scale(.56); filter:blur(2.8px); }
}
.drifting-microbe.d1 {left:2%; top:20%; --w:26px;--h:13px;--angle:-44deg;--from-x:-29px;--from-y:21px;--to-x:68px;--to-y:14px;--time:10s;--delay:-1.4s;}
.drifting-microbe.d2 {left:13%;top:76%;--w:14px;--angle:20deg;--from-x:-31px;--from-y:34px;--to-x:62px;--to-y:-32px;--time:8s;--delay:-4s;}
.drifting-microbe.d3 {left:72%;top:0%;--w:34px;--h:14px;--angle:47deg;--from-x:21px;--from-y:-31px;--to-x:-25px;--to-y:71px;--time:10.5s;--delay:-5.5s;}
.drifting-microbe.d4 {left:91%;top:20%;--w:23px;--h:10px;--angle:-62deg;--from-x:35px;--from-y:-24px;--to-x:-61px;--to-y:28px;--time:9.2s;--delay:-3s;}
.drifting-microbe.d5 {left:88%;top:71%;--w:23px;--h:15px;--angle:65deg;--from-x:38px;--from-y:25px;--to-x:-65px;--to-y:-39px;--time:11s;--delay:-7s;}
.drifting-microbe.d6 {left:35%;top:1%;--w:13px;--angle:0deg;--from-x:-4px;--from-y:-37px;--to-x:30px;--to-y:54px;--time:8.7s;--delay:-1s;}
.drifting-microbe.d7 {left:39%;top:91%;--w:22px;--h:10px;--angle:21deg;--from-x:-12px;--from-y:31px;--to-x:29px;--to-y:-59px;--time:9.4s;--delay:-5.2s;}
.drifting-microbe.d8 {left:2%;top:51%;--w:33px;--h:13px;--angle:-7deg;--from-x:-24px;--from-y:-13px;--to-x:62px;--to-y:9px;--time:9.8s;--delay:-8s;}
.drifting-microbe.d9 {left:60%;top:90%;--w:23px;--h:12px;--angle:-19deg;--from-x:9px;--from-y:41px;--to-x:-18px;--to-y:-55px;--time:10.6s;--delay:-2.6s;}
.drifting-microbe.d10{left:99%;top:49%;--w:12px;--angle:0deg;--from-x:25px;--from-y:-8px;--to-x:-53px;--to-y:-11px;--time:7.8s;--delay:-6s;}
.drifting-microbe.d11{left:20%;top:7%;--w:21px;--h:11px;--angle:63deg;--from-x:-16px;--from-y:-40px;--to-x:47px;--to-y:42px;--time:11.6s;--delay:-9s;}
/* On small screens retain the softer illustration behind copy, but avoid busy sparks. */
@media (max-width:760px){
  .hero-art .microbe-drift-field { opacity:.78; }
}
@media (max-width:520px){
  .hero-art .microbe-drift-field { opacity:.4; }
}