/* industry-saas-startups.html — hero animation (prefix: ss-)
   Theme: Activation funnel → multi-tenant DB rows → MRR sparkline → audit CTA */
@keyframes ssGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes ssFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ssStep { from { opacity: 0; transform: scaleX(0.6); } to { opacity: 1; transform: scaleX(1); } }
@keyframes ssSpark { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@keyframes ssTenantIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.ss-glow { animation: ssGlow 3.5s ease-in-out infinite; }
.ss-funnel { animation: ssFade 0.5s var(--ease-spring) 0.4s both; }
.ss-step { transform-box: fill-box; transform-origin: center; }
.ss-s1 { animation: ssStep 0.45s var(--ease-spring) 0.8s both; }
.ss-s2 { animation: ssStep 0.45s var(--ease-spring) 1.0s both; }
.ss-s3 { animation: ssStep 0.45s var(--ease-spring) 1.2s both; }
.ss-s4 { animation: ssStep 0.5s  var(--ease-spring) 1.4s both; }
.ss-db    { animation: ssFade 0.5s var(--ease-spring) 0.7s both; }
.ss-t   { }
.ss-t1 { animation: ssTenantIn 0.35s ease-out 1.0s both; }
.ss-t2 { animation: ssTenantIn 0.35s ease-out 1.15s both; }
.ss-t3 { animation: ssTenantIn 0.35s ease-out 1.3s both; }
.ss-mrr   { animation: ssFade 0.5s var(--ease-spring) 1.1s both; }
.ss-spark { stroke-dasharray: 220; animation: ssSpark 1.3s var(--ease-out) 1.6s both; }
.ss-audit { animation: ssFade 0.5s var(--ease-spring) 1.6s both; }