/* 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: sandboxes pass over the volume one at a time. The connected one writes (emerald,
   down, the tank fills) or reads (gold, up, the tank drains); then the next moves in. */
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-liq-top{animation:lz-liq-top 7s 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-liq-top{0%,18%{translate:0 39.6px}46%,68%{translate:0 10.8px}96%,100%{translate:0 39.6px}}

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

/* Metrics: the bars rise, the latest last. */
html body #sandbox-benefits .infra-card:hover .if-bar{animation:lz-rise .8s cubic-bezier(.3,.7,.2,1) both}
html body #sandbox-benefits .infra-card:hover .if-last{animation-delay:.25s}
@keyframes lz-rise{0%{translate:0 var(--h)}70%{translate:0 -3px}100%{translate:0 0}}

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