/* ARTICLE GRAPHICS – animated margin illustrations
   Replaces everything inside the snippet's <style>…</style> tag.
   Phones: graphics float left/right with text wrapping around them;
   the last graphic (IV drip) floats right so the bulleted list wraps cleanly. */
#ag-layer{position:absolute;top:0;left:0;width:100%;height:0;pointer-events:none;z-index:2}
.ag-item{position:absolute;pointer-events:auto;will-change:transform}
.ag-item.ag-inline{position:relative;pointer-events:auto}
.ag-blob{position:absolute;left:4%;width:92%;aspect-ratio:1/1;top:50%;
  margin-top:-46%;background:var(--ag-color,#ddf3f6);
  border-radius:58% 42% 55% 45% / 47% 56% 44% 53%;
  transform:scale(0);opacity:0;
  transition:transform .9s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
.ag-float{position:relative}
.ag-reveal{position:relative;opacity:0;
  transform:translateY(36px) rotate(var(--ag-tilt,-4deg)) scale(.92);
  transition:opacity .7s ease .15s,transform 1s cubic-bezier(.22,1.2,.36,1) .15s}
.ag-reveal img{display:block;width:100%;height:auto;max-width:none;margin:0}
.ag-dot{position:absolute;border-radius:50%;transform:scale(0);
  transition:transform .5s cubic-bezier(.34,1.8,.64,1)}
.ag-dot:nth-of-type(1){width:10px;height:10px;background:#1fb5c9;top:6%;left:-4%;transition-delay:.55s}
.ag-dot:nth-of-type(2){width:7px;height:7px;background:#ef7fae;top:18%;right:-6%;transition-delay:.7s}
.ag-dot:nth-of-type(3){width:6px;height:6px;background:#081e3f;bottom:10%;left:2%;transition-delay:.85s}

/* revealed state */
.ag-item.is-in .ag-blob{transform:scale(1);opacity:1;animation:ag-morph 14s ease-in-out 1s infinite}
.ag-item.is-in .ag-reveal{opacity:1;transform:none}
.ag-item.is-in .ag-float{animation:ag-bob var(--ag-bob,6s) ease-in-out 1.1s infinite}
.ag-item.is-in .ag-dot{transform:scale(1);animation:ag-twinkle 3.6s ease-in-out 1.4s infinite}
.ag-item.is-in .ag-dot:nth-of-type(2){animation-delay:2.2s}
.ag-item.is-in .ag-dot:nth-of-type(3){animation-delay:3s}
.ag-item:hover .ag-reveal img{animation:ag-hop .6s cubic-bezier(.3,1.6,.5,1)}

/* bespoke accents */
.ag-drop{position:absolute;left:32.2%;top:56.5%;width:2.2%;aspect-ratio:3/4;
  background:#58c6e3;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;opacity:0}
.ag-item.is-in .ag-drop{animation:ag-drip 1.8s cubic-bezier(.55,0,1,.45) 1.2s infinite}
.ag-bubble{position:absolute;width:4.2%;aspect-ratio:1/1;border:1.5px solid rgba(255,255,255,.9);
  border-radius:50%;top:58%;opacity:0}
.ag-bubble:nth-of-type(1){left:63%}
.ag-bubble:nth-of-type(2){left:71%;width:3%}
.ag-bubble:nth-of-type(3){left:67%;width:3.4%}
.ag-item.is-in .ag-bubble{animation:ag-rise 3.4s ease-in 1.2s infinite}
.ag-item.is-in .ag-bubble:nth-of-type(2){animation-delay:2.3s}
.ag-item.is-in .ag-bubble:nth-of-type(3){animation-delay:3.4s}

@keyframes ag-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(var(--ag-sway,.8deg))}}
@keyframes ag-morph{
  0%,100%{border-radius:58% 42% 55% 45% / 47% 56% 44% 53%;transform:scale(1) rotate(0)}
  33%{border-radius:44% 56% 41% 59% / 58% 43% 57% 42%;transform:scale(1.04) rotate(8deg)}
  66%{border-radius:52% 48% 62% 38% / 40% 60% 40% 60%;transform:scale(.97) rotate(-6deg)}}
@keyframes ag-twinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55) translateY(-6px);opacity:.6}}
@keyframes ag-hop{0%{transform:none}35%{transform:translateY(-12px) rotate(-2deg)}70%{transform:translateY(2px)}100%{transform:none}}
@keyframes ag-drip{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1)}
  80%{opacity:1}100%{opacity:0;transform:translateY(260%)}}
@keyframes ag-rise{0%{opacity:0;transform:translateY(0)}15%{opacity:1}
  85%{opacity:.9}100%{opacity:0;transform:translate(-30%, -620%)}}

/* inline (tablet / mobile) */
.ag-inline{margin:.5rem 0 1.25rem}
.ag-inline.ag-float-left{float:left;margin:.35rem 1.75rem 1rem 0}
.ag-inline.ag-float-right{float:right;margin:.35rem 0 1rem 1.75rem}
/* phones: float too, capped so the text column stays readable */
.ag-inline.ag-block-left,.ag-inline.ag-block-right{max-width:40%}
.ag-inline.ag-block-left{float:left;margin:.3rem 1.1rem .75rem 0}
.ag-inline.ag-block-right{float:right;margin:.3rem 0 .75rem 1.1rem}
.ag-inline.ag-block-left .ag-dot:nth-of-type(1){left:0}
.ag-inline.ag-block-right .ag-dot:nth-of-type(2){right:0}
/* last graphic (IV drip) sits above the bulleted list: float it right so the bullets wrap cleanly */
.ag-inline.ag-block-left:has(img[src*="iv-drip"]){float:right;margin:.3rem 0 .75rem 1.1rem}
.ag-inline.ag-block-left:has(img[src*="iv-drip"]) .ag-dot:nth-of-type(1){left:-4%}
.ag-inline.ag-block-left:has(img[src*="iv-drip"]) .ag-dot:nth-of-type(2){right:0}
.ag-has-inline:has(.ag-block-left) > ul{clear:none}
.ag-has-inline > h2,.ag-has-inline > figure,.ag-has-inline > blockquote,.ag-has-inline > ul{clear:both}

@media (prefers-reduced-motion: reduce){
  .ag-blob,.ag-reveal,.ag-dot{transition:none!important}
  .ag-item .ag-blob,.ag-item .ag-reveal,.ag-item .ag-dot{opacity:1;transform:none}
  .ag-item *{animation:none!important}
  .ag-drop,.ag-bubble{display:none}
}