/* graphic 1 */ .gfx.g1 .g1-needle-group { transform-origin: 0px 0px; animation: needleSway_g1 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; } @keyframes needleSway_g1 { 0% { transform: rotate(-50deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(45deg); } } .gfx.g1 .g1-meter-arc { stroke-dasharray: 314; stroke-dashoffset: 314; animation: arcDraw_g1 3s ease-out forwards; } @keyframes arcDraw_g1 { to { stroke-dashoffset: 80; } } .gfx.g1 .g1-tax-bracket-badge { animation: badgeMove_g1 3.2s ease-in-out infinite alternate; } @keyframes badgeMove_g1 { 0% { transform: translate(135px, 42px); } 100% { transform: translate(135px, 35px); } } 
/* graphic 2 */ .gfx.g2 .g2-data-stream { animation: flowData_g2 1.5s linear infinite; } @keyframes flowData_g2 { to { stroke-dashoffset: -24; } } .gfx.g2 .g2-source-block { animation: blockBounce1_g2 3.2s ease-in-out infinite alternate; } .gfx.g2 .g2-dest-block { animation: blockBounce2_g2 3.2s ease-in-out infinite alternate 0.4s; } @keyframes blockBounce1_g2 { 0% { transform: translate(45px, 90px); } 100% { transform: translate(45px, 83px); } } @keyframes blockBounce2_g2 { 0% { transform: translate(265px, 80px); } 100% { transform: translate(265px, 73px); } } 
/* graphic 3 */ .gfx.g3 .g3-audit-sheet { animation: sheetFloat_g3 3.8s ease-in-out infinite alternate; } @keyframes sheetFloat_g3 { 0% { transform: translate(60px, 45px); } 100% { transform: translate(60px, 37px); } } .gfx.g3 .g3-audit-magnifier { animation: scanMove_g3 4s ease-in-out infinite alternate; } @keyframes scanMove_g3 { 0% { transform: translate(170px, 70px); } 50% { transform: translate(195px, 90px); } 100% { transform: translate(175px, 115px); } } .gfx.g3 .g3-alert-dot { animation: alertPulse_g3 1.2s ease-in-out infinite alternate; } @keyframes alertPulse_g3 { 0% { opacity: 0.3; r: 5px; } 100% { opacity: 1; r: 8px; } } 
/* graphic 4 */ .gfx.g4 .g4-newspaper-stack { animation: newsHover_g4 3.6s ease-in-out infinite alternate; } @keyframes newsHover_g4 { 0% { transform: translate(100px, 50px); } 100% { transform: translate(100px, 40px); } } .gfx.g4 .g4-cancel-badge { animation: badgeCounter_g4 3.2s ease-in-out infinite alternate; } @keyframes badgeCounter_g4 { 0% { transform: translate(135px, 180px); } 100% { transform: translate(135px, 172px); } } 
/* graphic 5 */ .gfx.g5 .g5-clearance-sweep { transform-origin: 0px 0px; animation: sweep360_g5 4s linear infinite; } @keyframes sweep360_g5 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gfx.g5 .g5-node-1 { animation: nodePulse_g5 1.8s ease-in-out infinite alternate; } .gfx.g5 .g5-node-2 { animation: nodePulse_g5 1.8s ease-in-out infinite alternate 0.4s; } .gfx.g5 .g5-node-3 { animation: nodePulse_g5 1.8s ease-in-out infinite alternate 0.8s; } @keyframes nodePulse_g5 { 0% { transform: scale(0.92); } 100% { transform: scale(1.08); } } 
/* graphic 6 */ .gfx.g6 .g6-liq-doc { animation: docFloat_g6 3.8s ease-in-out infinite alternate; } @keyframes docFloat_g6 { 0% { transform: translate(60px, 45px); } 100% { transform: translate(60px, 36px); } } .gfx.g6 .g6-liq-stamp { transform-origin: 115px 140px; animation: stampPop_g6 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate; } @keyframes stampPop_g6 { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .gfx.g6 .g6-liq-badge { animation: badgeFloat_g6 3.2s ease-in-out infinite alternate; } @keyframes badgeFloat_g6 { 0% { transform: translate(230px, 110px); } 100% { transform: translate(230px, 98px); } } .gfx.g6 .g6-badge-pulse { animation: pulseGlow_g6 1.2s ease-in-out infinite alternate; } @keyframes pulseGlow_g6 { 0% { opacity: 0.3; r: 4px; } 100% { opacity: 1; r: 6px; } } 
/* graphic 7 */ .gfx.g7 .g7-corporate-card { animation: cardHover_g7 3.6s ease-in-out infinite alternate; } @keyframes cardHover_g7 { 0% { transform: translate(100px, 60px) rotate(0deg); } 100% { transform: translate(100px, 48px) rotate(-2deg); } } .gfx.g7 .g7-approval-pill { animation: pillFloat_g7 3.2s ease-in-out infinite alternate; } @keyframes pillFloat_g7 { 0% { transform: translate(130px, 195px); } 100% { transform: translate(130px, 187px); } } 
/* graphic 8 */ .gfx.g8 .g8-tree-line { animation: lineFlow_g8 2s linear infinite; } @keyframes lineFlow_g8 { to { stroke-dashoffset: -18; } } .gfx.g8 .g8-parent-node { animation: parentPulse_g8 3s ease-in-out infinite alternate; } @keyframes parentPulse_g8 { 0% { transform: translate(145px, 45px); } 100% { transform: translate(145px, 39px); } } .gfx.g8 .g8-node-left { animation: childFloat1_g8 3s ease-in-out infinite alternate 0.2s; } .gfx.g8 .g8-node-right { animation: childFloat2_g8 3s ease-in-out infinite alternate 0.4s; } @keyframes childFloat1_g8 { 0% { transform: translate(50px, 160px); } 100% { transform: translate(50px, 154px); } } @keyframes childFloat2_g8 { 0% { transform: translate(240px, 160px); } 100% { transform: translate(240px, 154px); } } 
/* graphic 9 */ .gfx.g9 .g9-lic-doc{animation:licDocFloat_g9 3.8s ease-in-out infinite alternate} @keyframes licDocFloat_g9{0%{transform:translate(60px,45px)}100%{transform:translate(60px,36px)}} .gfx.g9 .g9-lic-badge{animation:licBadgeFloat_g9 3.2s ease-in-out infinite alternate} @keyframes licBadgeFloat_g9{0%{transform:translate(230px,110px)}100%{transform:translate(230px,98px)}} .gfx.g9 .g9-badge-pulse{animation:licPulse_g9 1.2s ease-in-out infinite alternate} @keyframes licPulse_g9{0%{opacity:.3;r:4px}100%{opacity:1;r:6px}}
/* graphic 10 */ .gfx.g10 .g10-radar-sweep-spin { transform-origin: 0px 0px; animation: radarSpin_g10 4s linear infinite; } @keyframes radarSpin_g10 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .gfx.g10 .g10-node-blink { animation: nodeBlink_g10 1.5s ease-in-out infinite alternate; } @keyframes nodeBlink_g10 { 0% { opacity: 0.2; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.3); } } 
/* graphic 11 */ .gfx.g11 .g11-magnet-group { animation: magnetHover_g11 3.5s ease-in-out infinite alternate; } @keyframes magnetHover_g11 { 0% { transform: translate(130px, 50px); } 100% { transform: translate(130px, 40px); } } .gfx.g11 .g11-coin-reclaim-1 { animation: reclaimUp1_g11 2.8s ease-in-out infinite alternate; } .gfx.g11 .g11-coin-reclaim-2 { animation: reclaimUp2_g11 2.8s ease-in-out infinite alternate 0.4s; } @keyframes reclaimUp1_g11 { 0% { transform: translateY(15px); opacity: 0.7; } 100% { transform: translateY(-15px); opacity: 1; } } @keyframes reclaimUp2_g11 { 0% { transform: translateY(20px); opacity: 0.6; } 100% { transform: translateY(-20px); opacity: 1; } } 
/* graphic 12 */ .gfx.g12 .g12-vat-doc { animation: vatDocFloat_g12 3.8s ease-in-out infinite alternate; } @keyframes vatDocFloat_g12 { 0% { transform: translate(60px, 45px); } 100% { transform: translate(60px, 37px); } } .gfx.g12 .g12-submit-stamp { transform-origin: 70px 150px; animation: stampPop_g12 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate; } @keyframes stampPop_g12 { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .gfx.g12 .g12-vat-badge { animation: badgeFloat_g12 3.2s ease-in-out infinite alternate; } @keyframes badgeFloat_g12 { 0% { transform: translate(230px, 110px); } 100% { transform: translate(230px, 98px); } } .gfx.g12 .g12-pulse-dot { animation: dotPulse_g12 1.2s ease-in-out infinite alternate; } @keyframes dotPulse_g12 { 0% { opacity: 0.3; r: 4px; } 100% { opacity: 1; r: 6px; } } 
/* graphic 13 */ .gfx.g13 .g13-stamp-action { transform-origin: 110px 150px; animation: stampPress_g13 2.5s ease-in-out infinite alternate; } @keyframes stampPress_g13 { 0% { transform: scale(1.6); opacity: 0; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } 
/* graphic 14 */ .gfx.g14 .g14-case-float { animation: caseHover_g14 3.8s ease-in-out infinite alternate; } @keyframes caseHover_g14 { 0% { transform: translate(100px, 50px); } 100% { transform: translate(100px, 40px); } } .gfx.g14 .g14-badge-float { animation: badgeCounterHover_g14 3.2s ease-in-out infinite alternate; } @keyframes badgeCounterHover_g14 { 0% { transform: translate(230px, 150px); } 100% { transform: translate(230px, 138px); } } 
/* graphic 15 */ .gfx.g15 .g15-vault-float { animation: vaultHover_g15 3.5s ease-in-out infinite alternate; } @keyframes vaultHover_g15 { 0% { transform: translateY(0px); } 100% { transform: translateY(-10px); } } .gfx.g15 .g15-dial-spin { transform-origin: 200px 135px; animation: dialTurn_g15 6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; } @keyframes dialTurn_g15 { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } 
/* graphic 16 */ .gfx.g16 .g16-doc-stack { animation: docFloat_g16 4s ease-in-out infinite alternate; } @keyframes docFloat_g16 { 0% { transform: translateY(0px); } 100% { transform: translateY(-8px); } } .gfx.g16 .g16-shield-badge { animation: badgePulse_g16 3s ease-in-out infinite alternate; } @keyframes badgePulse_g16 { 0% { transform: translate(260px, 90px) scale(0.98); } 100% { transform: translate(260px, 82px) scale(1.03); } } .gfx.g16 .g16-check-anim { stroke-dasharray: 60; stroke-dashoffset: 60; animation: drawCheck_g16 2.5s ease-out infinite alternate; } @keyframes drawCheck_g16 { 0%, 20% { stroke-dashoffset: 60; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } .gfx.g16 .g16-radar-sweep { animation: sweepLine_g16 4s linear infinite; } @keyframes sweepLine_g16 { 0% { transform: translateX(20px); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.8; } 100% { transform: translateX(410px); opacity: 0; } }