/* industry-ngo-nonprofits.html — hero animation (prefix: ng-)
   Theme: Donor → Program → Beneficiary → Impact chain with KPI counters */
@keyframes ngGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes ngPop  { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ngFlow { 0% { stroke-dashoffset: 20; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ngFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ngCount { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ng-glow { animation: ngGlow 3.5s ease-in-out infinite; }
.ng-n { transform-box: fill-box; transform-origin: center; }
.ng-n1 { animation: ngPop 0.5s var(--ease-spring) 0.4s both; }
.ng-n2 { animation: ngPop 0.5s var(--ease-spring) 0.65s both; }
.ng-n3 { animation: ngPop 0.5s var(--ease-spring) 0.9s both; }
.ng-n4 { animation: ngPop 0.55s var(--ease-spring) 1.15s both; }
.ng-flow { stroke-dasharray: 6; }
.ng-f1 { animation: ngFlow 2.4s linear 1.4s infinite; }
.ng-f2 { animation: ngFlow 2.4s linear 1.6s infinite; }
.ng-f3 { animation: ngFlow 2.4s linear 1.8s infinite; }
.ng-kpi { animation: ngFade 0.5s var(--ease-spring) 1.3s both; }
.ng-kpi:nth-of-type(2) { animation-delay: 1.45s; }
.ng-count1, .ng-count2 { animation: ngCount 0.5s ease-out 1.7s both; }
.ng-panel { animation: ngFade 0.5s var(--ease-spring) 1.6s both; }