#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)}

  /* accents: heartbeat ripples + monitor scan line */
  .ag-pulse{position:absolute;width:24%;aspect-ratio:1/1;transform:translate(-50%,-50%);pointer-events:none}
  .ag-pulse::before,.ag-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;
    border:2.5px solid var(--ag-accent,#1b55a6);opacity:0;transform:scale(.2)}
  .ag-item.is-in .ag-pulse::before{animation:ag-ripple 1.7s cubic-bezier(.2,.6,.35,1) 1.2s infinite}
  .ag-item.is-in .ag-pulse::after{animation:ag-ripple 1.7s cubic-bezier(.2,.6,.35,1) 1.45s infinite}
  .ag-scan{position:absolute;overflow:hidden;pointer-events:none}
  .ag-scan::before{content:"";position:absolute;top:0;bottom:0;left:-14%;width:14%;
    background:linear-gradient(90deg,rgba(31,181,201,0),rgba(31,181,201,.28) 85%,rgba(31,181,201,.85));
    border-right:2px solid #1fb5c9;opacity:0}
  .ag-item.is-in .ag-scan::before{animation:ag-scan 2.6s linear 1.3s infinite}
  .ag-wipe .ag-reveal img{clip-path:inset(0 100% 0 0)}
  .ag-wipe.is-in .ag-reveal img{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.6,.05,.3,1) .3s}

  /* sleep-themed accents: floating Zzz, twinkling sparkles, alternate idle motions */
  .ag-zzz{position:absolute;width:0;height:0;pointer-events:none}
  .ag-zzz b{position:absolute;left:0;bottom:0;font:800 16px/1 proxima-nova,Helvetica,Arial,sans-serif;
    color:var(--ag-ink,#081e3f);opacity:0}
  .ag-zzz b:nth-child(2){font-size:20px}
  .ag-zzz b:nth-child(3){font-size:25px}
  .ag-item.is-in .ag-zzz b{animation:ag-z 4.2s ease-out 1.2s infinite}
  .ag-item.is-in .ag-zzz b:nth-child(2){animation-delay:2.6s}
  .ag-item.is-in .ag-zzz b:nth-child(3){animation-delay:4s}
  .ag-spark{position:absolute;aspect-ratio:1/1;transform:translate(-50%,-50%) scale(0);pointer-events:none;
    background:var(--ag-spark,#f2b632);
    clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
  .ag-item.is-in .ag-spark{animation:ag-spark 3s ease-in-out infinite}
  .ag-item.is-in.ag-idle-drift .ag-float{animation:ag-drift 9s ease-in-out 1.1s infinite}
  .ag-item.is-in.ag-idle-rock .ag-float{transform-origin:55% 60%;animation:ag-rock 6.5s ease-in-out 1.1s infinite}
  .ag-item.is-in.ag-idle-breathe .ag-float{animation:ag-breathe 5s ease-in-out 1.1s infinite}

  @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-ripple{0%{opacity:0;transform:scale(.2)}10%{opacity:.95}60%{opacity:.55}100%{opacity:0;transform:scale(1.35)}}
  @keyframes ag-z{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1}
    100%{opacity:0;transform:translate(var(--ag-zx,26px),var(--ag-zy,-58px)) scale(1.15) rotate(var(--ag-zr,12deg))}}
  @keyframes ag-spark{0%,100%{transform:translate(-50%,-50%) scale(0) rotate(0)}
    45%{transform:translate(-50%,-50%) scale(1) rotate(45deg)}60%{transform:translate(-50%,-50%) scale(.85) rotate(60deg)}}
  @keyframes ag-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--ag-drift,14px))}}
  @keyframes ag-rock{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg) translateY(-4px)}}
  @keyframes ag-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06) translateY(-4px)}}
  @keyframes ag-scan{0%{left:-14%;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

  /* 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}
  .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}

  /* inline (tablet/phone): keep the blob, dots and motion inside the float's box
     so text wraps around it like a normal floated image */
  .ag-inline{overflow:visible}
  .ag-inline .ag-blob{top:0;left:0;width:100%;height:100%;margin:0;aspect-ratio:auto}
  .ag-inline .ag-float{padding:11% 10%}
  .ag-inline.is-in .ag-blob{animation-name:ag-morph-soft}
  .ag-inline .ag-dot:nth-of-type(1){left:3%;top:4%}
  .ag-inline .ag-dot:nth-of-type(2){right:3%;top:8%}
  .ag-inline .ag-dot:nth-of-type(3){left:6%;bottom:5%}
  .ag-inline.ag-float-left,.ag-inline.ag-block-left{--ag-drift:5px!important;--ag-zx:8px!important;--ag-zy:-26px!important}
  .ag-inline.ag-float-right,.ag-inline.ag-block-right{--ag-drift:-5px!important;--ag-zx:-8px!important;--ag-zy:-26px!important}
  @keyframes ag-morph-soft{
    0%,100%{border-radius:58% 42% 55% 45% / 47% 56% 44% 53%}
    33%{border-radius:44% 56% 41% 59% / 58% 43% 57% 42%}
    66%{border-radius:52% 48% 62% 38% / 40% 60% 40% 60%}}

  @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-pulse,.ag-scan,.ag-zzz,.ag-spark{display:none}
    .ag-wipe .ag-reveal img{clip-path:none!important}
  }