.ill{display:block;width:100%;height:auto;overflow:visible}
.ill .ring{opacity:0}
.ill.play .ln{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ilDraw 900ms var(--ease-pen) forwards}
.ill.play .acc{opacity:0;animation:ilFade 240ms var(--ease-out) 820ms forwards}
@keyframes ilDraw{to{stroke-dashoffset:0}}
@keyframes ilFade{to{opacity:1}}
/* power: pulse travels along the wire */
.ill-power.play .pulse{offset-distance:0%;animation:ilFade 200ms var(--ease-out) 820ms forwards,ilRun 1400ms cubic-bezier(.45,.05,.55,.95) 1000ms forwards}
@keyframes ilRun{from{offset-distance:0%}to{offset-distance:100%}}
/* datacenter: LEDs light one by one */
.ill-datacenter.play .led{animation:ilDraw 900ms var(--ease-pen) forwards,ilLed 260ms var(--ease-out) forwards}
.ill-datacenter.play .led0{animation-delay:0ms,1000ms}.ill-datacenter.play .led1{animation-delay:0ms,1150ms}
.ill-datacenter.play .led2{animation-delay:0ms,1300ms}.ill-datacenter.play .led3{animation-delay:0ms,1450ms}
@keyframes ilLed{to{fill:#17201E}}
/* robot: eyes light up, one wave */
.ill-robot .wave{transform-origin:124px 64px;transform-box:view-box}
.ill-robot.play .eye{animation:ilFade 200ms var(--ease-out) 1000ms forwards}
.ill-robot.play .eye+.eye{animation-delay:1080ms}
.ill-robot.play .wave{animation:ilWave 1500ms var(--ease-out) 1250ms both}
@keyframes ilWave{0%{transform:rotate(0)}30%{transform:rotate(-140deg)}45%{transform:rotate(-120deg)}60%{transform:rotate(-140deg)}75%{transform:rotate(-120deg)}100%{transform:rotate(0)}}
/* chip: blue traces run out */
.ill-chip .trace{stroke-dasharray:1 1;stroke-dashoffset:0}
.ill-chip.play .trace{stroke-dashoffset:1;animation:ilDraw 700ms var(--ease-pen) 1000ms forwards}
.ill-chip.play .acc{animation-delay:1600ms}
/* wind: blades spin twice and settle */
.ill-wind.play .blades{animation:ilSpin 2400ms cubic-bezier(.2,.7,.2,1) 900ms both}
@keyframes ilSpin{from{transform:rotate(0)}to{transform:rotate(720deg)}}
/* gold: bars drawn bottom-up, then the pen star */
.ill-gold.play .b1 .ln{animation-delay:0ms}.ill-gold.play .b2 .ln{animation-delay:250ms}.ill-gold.play .b3 .ln{animation-delay:500ms}
.ill-gold .star{stroke-dasharray:1 1;stroke-dashoffset:0}
.ill-gold.play .star{opacity:1;stroke-dashoffset:1;animation:ilDraw 500ms var(--ease-pen) 1400ms forwards}
/* mining: one swing into the rock, spark, nugget found */
.ill-mining .pick{transform-box:view-box}
.ill-mining.play .pick{animation:ilSwing 620ms cubic-bezier(.6,0,.9,.6) 950ms both}
@keyframes ilSwing{0%{transform:rotate(55deg)}88%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
.ill-mining.play .acc{animation-delay:1650ms}
.ill-mining.play .spark{stroke-dasharray:1 1;stroke-dashoffset:1;animation:ilDraw 300ms var(--ease-pen) 1520ms forwards,ilFade 1ms 1520ms forwards}
/* minerals: the magnet pulls ore bits up to its poles, then the field lines draw. Static (index) = end state */
.ill-minerals .b1,.ill-minerals .b2{--py:-43px}.ill-minerals .b3{--py:-32px}
.ill-minerals .bit{transform:translateY(var(--py))}
.ill-minerals .field{stroke-dasharray:1 1;stroke-dashoffset:0}
.ill-minerals.play .bit{animation:ilPull 1100ms cubic-bezier(.5,0,.2,1) 850ms both}
.ill-minerals.play .b3{animation:ilPull 1100ms cubic-bezier(.5,0,.2,1) 950ms both}
@keyframes ilPull{0%{transform:none;opacity:0}20%{transform:none;opacity:1}100%{transform:translateY(var(--py));opacity:1}}
.ill-minerals.play .field{animation:ilDrawIn 600ms var(--ease-pen) 2000ms both}
@keyframes ilDrawIn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* regions: the pen traces the country outline, then rings the capital */
.ill-vietnam.play .shape,.ill-india.play .shape{animation-duration:1800ms}
.ill-vietnam.play .acc,.ill-india.play .acc{animation-delay:1800ms}
.ill-vietnam.play .ring,.ill-india.play .ring{opacity:1;stroke-dasharray:1 1;stroke-dashoffset:1;animation:ilDraw 600ms var(--ease-pen) 2000ms forwards}
@media (prefers-reduced-motion: reduce){ .ill *{animation:none!important} .ill .ln,.ill .trace,.ill .star,.ill .ring{stroke-dashoffset:0!important} .ill .acc,.ill .spark{opacity:1!important} }

/* cyber and tech: circuit traces draw outward in four waves */
.ill-cyber.play .t1 .ln,.ill-tech.play .t1 .ln{animation-delay:120ms}
.ill-cyber.play .t2 .ln,.ill-tech.play .t2 .ln{animation-delay:240ms}
.ill-cyber.play .t3 .ln,.ill-tech.play .t3 .ln{animation-delay:360ms}
/* cyber: the shackle closes once, the keyhole lights */
.ill-cyber.play .shackle{animation:ilShut 500ms cubic-bezier(.5,0,.3,1.4) 1100ms both}
@keyframes ilShut{from{transform:translateY(-10px)}to{transform:none}}
.ill-cyber.play .acc{animation-delay:1650ms}
/* space: the astronaut drifts up once and tips back, the visor glints */
.ill-space .naut{transform-box:view-box;transform-origin:100px 90px}
.ill-space.play .naut{animation:ilFloat 1600ms cubic-bezier(.45,.05,.55,.95) 900ms both}
@keyframes ilFloat{0%{transform:none}50%{transform:translateY(-8px) rotate(-5deg)}100%{transform:none}}
.ill-space.play .acc{animation-delay:1700ms}
/* quantum: plates draw top to bottom, then the qubit at the bottom lights */
.ill-quantum.play .p1 .ln{animation-delay:150ms}.ill-quantum.play .p2 .ln{animation-delay:300ms}
.ill-quantum.play .p3 .ln{animation-delay:450ms}.ill-quantum.play .p4 .ln{animation-delay:600ms}
.ill-quantum.play .q{animation:ilFade 240ms var(--ease-out) 1500ms forwards,ilBlink 900ms steps(2) 1750ms 1}
@keyframes ilBlink{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
/* digital: a blue tap on the screen, a ripple, then a message, a video and a heart pop out */
.ill-digital .rip{opacity:0;transform-box:fill-box;transform-origin:center}
.ill-digital.play .tap{animation-delay:1000ms}
.ill-digital.play .rip{animation:ilRip 500ms var(--ease-out) 1100ms both}
@keyframes ilRip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.ill-digital .out{transform-box:fill-box;transform-origin:center}
.ill-digital.play .out{animation:ilOut 600ms cubic-bezier(.2,.8,.3,1.2) both}
.ill-digital.play .o0{animation-delay:1450ms}.ill-digital.play .o1{animation-delay:1600ms}.ill-digital.play .o2{animation-delay:1750ms}
@keyframes ilOut{from{transform:translate(var(--fx),var(--fy)) scale(.2);opacity:0}to{transform:none;opacity:1}}
/* tech, infra: the blue dot runs along the path */
.ill-tech .run,.ill-infra .run,.ill-propinfra .run{offset-distance:100%}
.ill-tech.play .run,.ill-infra.play .run,.ill-propinfra.play .run{animation:ilFade 200ms var(--ease-out) 900ms forwards,ilRun 1400ms cubic-bezier(.45,.05,.55,.95) 1000ms both}
.ill-tech.play .run{animation-delay:1100ms,1200ms}
.ill-infra .sig{opacity:0}
.ill-infra.play .sig{animation:ilSig 900ms steps(3) 1300ms both}
@keyframes ilSig{0%{opacity:0}33%{opacity:1}66%{opacity:.35}100%{opacity:1}}
/* defense: the inner rim draws a second time */
.ill-defense .rim{stroke-dasharray:1 1;stroke-dashoffset:0}
.ill-defense.play .rim{stroke-dashoffset:1;animation:ilDraw 700ms var(--ease-pen) 1000ms forwards}
.ill-defense.play .acc{animation-delay:1600ms}
/* industrial: smoke puffs rise one by one, then one window lights */
.ill-industrial .puff{opacity:0;transform-box:fill-box;transform-origin:center}
.ill-industrial.play .puff{animation:ilDraw 1ms forwards,ilPuff 900ms var(--ease-out) both}
.ill-industrial.play .f0{animation-delay:0ms,1000ms}.ill-industrial.play .f1{animation-delay:0ms,1250ms}.ill-industrial.play .f2{animation-delay:0ms,1500ms}
@keyframes ilPuff{from{opacity:0;transform:translate(-6px,10px) scale(.4)}to{opacity:1;transform:none}}
.ill-industrial.play .win{animation-delay:1900ms}
/* nuclear: steam rises and fades */
.ill-nuclear .steam{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:.85}
.ill-nuclear.play .steam{animation:ilDrawIn 900ms var(--ease-out) 900ms both,ilSteam 1400ms var(--ease-out) 1600ms both}
.ill-nuclear.play .s2{animation-delay:1100ms,1800ms}
@keyframes ilSteam{to{opacity:.25;transform:translateY(-6px)}}
.ill-nuclear:not(.play) .steam{stroke-dashoffset:0}
/* oil: the beam rocks once, a drop falls */
.ill-oil.play .beam{animation:ilRock 900ms ease-in-out 900ms both}
@keyframes ilRock{0%{transform:none}40%{transform:rotate(8deg)}100%{transform:none}}
.ill-oil.play .drop{animation:ilFade 1ms 1500ms forwards,ilDrop 500ms ease-in 1500ms both}
@keyframes ilDrop{from{transform:translateY(-12px)}to{transform:none}}
/* commodities: one grain falls */
.ill-commod.play .grain{animation:ilFade 1ms 1000ms forwards,ilFall 700ms ease-in 1200ms both}
@keyframes ilFall{from{transform:none}to{transform:translate(8px,58px)}}
.ill-commod:not(.play) .grain{transform:translate(8px,58px)}
/* health: the trace draws left to right, then the dot */
.ill-health.play .acc{animation-delay:1000ms}
/* consumer: the handle swings once */
.ill-consumer.play .handle{animation:ilSwingH 900ms ease-in-out 900ms both}
@keyframes ilSwingH{0%{transform:none}35%{transform:rotate(-10deg)}70%{transform:rotate(5deg)}100%{transform:none}}
/* finance: banknotes drop onto the pile one by one, the shield draws beside them */
.ill-finance .note{transform-box:view-box}
.ill-finance.play .note{animation:ilCoin 380ms cubic-bezier(.5,0,.6,1.3) both}
.ill-finance.play .k0{animation-delay:200ms}.ill-finance.play .k1{animation-delay:380ms}.ill-finance.play .k2{animation-delay:560ms}.ill-finance.play .k3{animation-delay:740ms}
@keyframes ilCoin{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
.ill-finance.play .acc{animation-delay:1500ms}
/* property: one window lights up */
.ill-property.play .win{animation-delay:1200ms}
/* mega: three circles draw one after another, the shared middle lights up */
.ill-mega.play .v1{animation-delay:250ms}.ill-mega.play .v2{animation-delay:500ms}
.ill-mega.play .acc{animation-delay:1400ms}
/* strategy: the needle swings twice and settles */
.ill-strategy.play .needle{animation:ilNeedle 1600ms ease-out 900ms both}
@keyframes ilNeedle{0%{transform:rotate(-70deg)}30%{transform:rotate(40deg)}55%{transform:rotate(-20deg)}75%{transform:rotate(8deg)}100%{transform:none}}
.ill-strategy.play .acc{animation-delay:900ms}
/* lender: the blue pen signs, then a stamp comes down, presses and lifts, leaving a blue seal */
.ill-lender .sign{stroke-dasharray:1 1;stroke-dashoffset:0}
.ill-lender.play .sign{stroke-dashoffset:1;animation:ilDraw 800ms var(--ease-pen) 1000ms forwards}
.ill-lender .stamp{opacity:0}
.ill-lender.play .stamp{animation:ilStamp 1100ms cubic-bezier(.5,0,.3,1) 1850ms both}
@keyframes ilStamp{0%{opacity:0;transform:translateY(-34px)}20%{opacity:1;transform:translateY(-34px)}50%{transform:translateY(0)}62%{transform:translateY(1px)}100%{opacity:0;transform:translateY(-40px)}}
.ill-lender.play .seal{opacity:0;animation:ilFade 120ms linear 2550ms forwards}
/* story (default image): the blue pen underlines the middle line */
.ill-story .uline{stroke-dasharray:1 1;stroke-dashoffset:0}
.ill-story.play .uline{stroke-dashoffset:1;animation:ilDraw 700ms var(--ease-pen) 1000ms forwards}
.ill-story.play .acc{animation-delay:1650ms}
/* em: points appear one by one, then the blue one */
.ill-em .pt{opacity:1}
.ill-em.play .pt{opacity:0;animation:ilFade 200ms var(--ease-out) forwards}
.ill-em.play .p0{animation-delay:1000ms}.ill-em.play .p1{animation-delay:1200ms}.ill-em.play .p2{animation-delay:1400ms}
.ill-em.play .acc{animation-delay:1650ms}
/* new countries and regions share the region motion */
.ill-thailand.play .shape,.ill-china.play .shape,.ill-japan.play .shape,.ill-korea.play .shape,.ill-taiwan.play .shape,.ill-indonesia.play .shape,.ill-us.play .shape{animation-duration:1800ms}
.ill-thailand.play .acc,.ill-china.play .acc,.ill-japan.play .acc,.ill-korea.play .acc,.ill-taiwan.play .acc,.ill-indonesia.play .acc,.ill-us.play .acc{animation-delay:1800ms}
.ill-thailand.play .ring,.ill-china.play .ring,.ill-japan.play .ring,.ill-korea.play .ring,.ill-taiwan.play .ring,.ill-indonesia.play .ring,.ill-us.play .ring{opacity:1;stroke-dasharray:1 1;stroke-dashoffset:1;animation:ilDraw 600ms var(--ease-pen) 2000ms forwards}
.ill-asean.play .ring,.ill-asia.play .ring,.ill-europe.play .ring,.ill-world.play .ring{opacity:1;stroke-dasharray:1 1;stroke-dashoffset:1;animation:ilDraw 600ms var(--ease-pen) 1300ms forwards}
.ill-asean.play .acc,.ill-asia.play .acc,.ill-europe.play .acc,.ill-world.play .acc{animation-delay:1200ms}
@media (prefers-reduced-motion: reduce){ .ill .uline,.ill .sign,.ill .rim,.ill .steam{stroke-dashoffset:0!important} .ill .pt{opacity:1!important} .ill-commod .grain{transform:translate(8px,58px)!important} .ill-lender .seal{opacity:1!important} .ill-lender .stamp,.ill-digital .rip{opacity:0!important} .ill-digital .out{opacity:1!important;transform:none!important} .ill-industrial .puff,.ill-infra .sig,.ill-finance .note{opacity:1!important;transform:none!important} }

.ill.still .ring,.ill.still .puff,.ill.still .sig,.ill.still .seal,.ill.still .out{opacity:1}
.ill.still .stamp,.ill.still .rip{opacity:0}