/* Benefit cards end in one isometric infographic each: objects on a shared plate, lit by the
   brand pair (emerald to gold, DESIGN.md --gradient-primary), at most a couple of callouts.
   The SVGs are inline so their text uses the site font. At rest each shows its final frame;
   hovering the card plays the idea once (streams loop while hovered). */
html body #sandbox-benefits .lz-art{position:relative;align-self:stretch;width:100%;height:240px;margin-top:auto;overflow:hidden}
/* No hard edges: the art fades out toward every side of its box. */
html body #sandbox-benefits .lz-art{
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
 mask-composite:intersect}
html body #sandbox-benefits .lz-art-svg{display:block;width:100%;height:100%}
html body #sandbox-benefits .lz-art-svg text{font-family:inherit}
@media(max-width:699px){html body #sandbox-benefits .lz-art{height:220px}}
html body #sandbox-benefits .lz-art .id-cursor{transform-box:view-box}
html body #sandbox-benefits .lz-art :is(.id-ripple,.ie-ping){transform-box:fill-box;transform-origin:center}
html body #sandbox-benefits .lz-art .ie-flow{stroke-dasharray:16 84;stroke-dashoffset:0}
html body #sandbox-benefits .lz-art .id-ripple{opacity:0}
html body #sandbox-benefits .lz-art .id-btn-on{opacity:0}

/* Sandboxes: a 10 x 10 fleet (100, what Pro runs at once), all running (green) at rest. Hovering launches it once more from
   the centre out, ring by ring: each machine rises gold (starting) and turns green the moment it lands; the last frame, all green, holds while the card stays hovered. */
html body #sandbox-benefits :is(.ia-gold,.ia-streak){opacity:0}
html body #sandbox-benefits .infra-card:hover .ia-sb{animation:lz-launch .9s cubic-bezier(.2,.8,.2,1) var(--d) both}
html body #sandbox-benefits .infra-card:hover .ia-gold{animation:lz-cool .9s step-end var(--d) both}
html body #sandbox-benefits .infra-card:hover .ia-streak{animation:lz-streak 1.2s ease-out var(--d) both}
@keyframes lz-launch{0%{translate:0 var(--h)}65%{translate:0 -3px}100%{translate:0 0}}
@keyframes lz-cool{0%{opacity:1}100%{opacity:0}}
@keyframes lz-streak{0%,10%{opacity:0}30%{opacity:.9}100%{opacity:0}}

/* Volumes: two lanes. Sandboxes ride one way and dock one at a time; the storage lane under them
   (the volume, Redis, S3, Postgres) rides the other way, a step each time the sandboxes move. The
   docked sandbox writes (dots down, the tank under it fills) or reads (dots up, it drains); tanks
   that already passed keep their level, so the loop has no jump. */
html body #sandbox-benefits .infra-card:hover .ib-lane{animation:lz-lane 7s cubic-bezier(.6,0,.3,1) infinite}
html body #sandbox-benefits .infra-card:hover :is(.ib-dock,.ib-beam){animation:lz-dock 7s infinite}
html body #sandbox-benefits .infra-card:hover .ib-w{animation:lz-on-a 7s infinite}
html body #sandbox-benefits .infra-card:hover .ib-r{animation:lz-on-b 7s infinite}
html body #sandbox-benefits .infra-card:hover .ib-dot-d{animation:lz-down .9s linear calc(var(--k) * -.3s) infinite}
html body #sandbox-benefits .infra-card:hover .ib-dot-u{animation:lz-up .9s linear calc(var(--k) * -.3s) infinite}
html body #sandbox-benefits .infra-card:hover .ib-store{animation:lz-store 14s cubic-bezier(.6,0,.3,1) infinite}
html body #sandbox-benefits .infra-card:hover .ib-fill{animation:var(--a) 14s ease-in-out infinite}
@keyframes lz-lane{0%{translate:0 0}14%,50%{translate:-97px -56px}64%,100%{translate:-194px -112px}}
@keyframes lz-dock{0%,12%{opacity:0}17%,47%{opacity:1}50%,62%{opacity:0}67%,97%{opacity:1}100%{opacity:0}}
@keyframes lz-on-a{0%,14%{opacity:0}18%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes lz-on-b{0%,64%{opacity:0}68%,96%{opacity:1}100%{opacity:0}}
@keyframes lz-down{from{translate:0 -24px;opacity:0}30%,70%{opacity:1}to{translate:0 24px;opacity:0}}
@keyframes lz-up{from{translate:0 24px;opacity:0}30%,70%{opacity:1}to{translate:0 -24px;opacity:0}}
@keyframes lz-store{0%{translate:0 0}7%,25%{translate:97px 56px}32%,50%{translate:194px 112px}57%,75%{translate:291px 168px}82%,100%{translate:388px 224px}}
@keyframes lz-fill-w1{0%,9%{translate:0 0}23%,100%{translate:0 -13px}}
@keyframes lz-fill-r2{0%,34%{translate:0 0}48%,100%{translate:0 13px}}
@keyframes lz-fill-w3{0%,59%{translate:0 0}73%,100%{translate:0 -13px}}
@keyframes lz-fill-r4{0%,84%{translate:0 0}98%,100%{translate:0 13px}}

/* Streams while hovered: app to database, region to region. */
html body #sandbox-benefits .infra-card:hover .ie-flow{animation:lz-flow 2.2s linear infinite}
/* Apps: packets sit on the grooves at rest and travel from the app to each database on hover. */
html body #sandbox-benefits .infra-card:hover .ic-flow{animation:lz-packets .7s linear infinite}
@keyframes lz-packets{from{stroke-dashoffset:13}to{stroke-dashoffset:0}}
@keyframes lz-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* Desktop: the cursor travels across the screen, in its plane, to the button and clicks it.
   The button rests as a primary button and turns solid (its hover state) when the cursor lands. */
html body #sandbox-benefits .infra-card:hover .id-cursor{animation:lz-cursor 1.8s cubic-bezier(.45,0,.2,1) both}
html body #sandbox-benefits .infra-card:hover .id-ripple{animation:lz-ripple .8s 1.35s ease-out both}
html body #sandbox-benefits .infra-card:hover .id-btn{animation:lz-press 1.8s both}
html body #sandbox-benefits .infra-card:hover .id-btn-on{animation:lz-btn-on 1.8s both}
@keyframes lz-cursor{0%{translate:150px 40px}70%{translate:0 0;scale:1}80%{scale:.85}92%,100%{translate:0 0;scale:1}}
@keyframes lz-ripple{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes lz-btn-on{0%,66%{opacity:0}72%,100%{opacity:1}}
@keyframes lz-press{0%,72%{filter:none}80%{filter:brightness(1.35)}100%{filter:none}}
@keyframes lz-fade-up{from{opacity:0;translate:0 8px}}

/* Regions: the regions ping. */
html body #sandbox-benefits .infra-card:hover .ie-ping{animation:lz-ping 1.8s ease-out infinite}
@keyframes lz-ping{0%{opacity:.9;transform:scale(.5)}70%,100%{opacity:0;transform:scale(2)}}

/* Coding agents: at rest each plan's traces run from the middle of its block, down to the floor
   and under its two rows of the fleet (gold on Claude, emerald on ChatGPT). Hovering draws the
   traces again, raises each sandbox as its trace passes under it, then sends packets along. */
html body #sandbox-benefits .ig-trace{stroke-dasharray:100}
html body #sandbox-benefits .infra-card:hover .ig-trace{animation:lz-draw var(--t) linear var(--d) both}
html body #sandbox-benefits .infra-card:hover .ig-flow{animation:lz-show .3s var(--d) both,lz-packets .7s linear var(--d) infinite}
html body #sandbox-benefits .infra-card:hover .ig-sb{animation:lz-launch .7s cubic-bezier(.2,.8,.2,1) var(--d) both}
@keyframes lz-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes lz-show{from{opacity:0}}

@media(prefers-reduced-motion:reduce){html body #sandbox-benefits .lz-art *{animation:none!important}}