/* svc-saas.html — hero animation (prefix: ss-)
   Theme: Tenant matrix growing RLS → Schema → Shard as load increases */
@keyframes ssGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes ssPop  { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ssGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ssFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ss-glow { animation: ssGlow 3.5s ease-in-out infinite; }
.ss-cell { transform-box: fill-box; transform-origin: center; }
.ss-r1 { animation: ssPop 0.4s var(--ease-spring) 0.4s both; }
.ss-r2 { animation: ssPop 0.4s var(--ease-spring) 0.5s both; }
.ss-r3 { animation: ssPop 0.4s var(--ease-spring) 0.6s both; }
.ss-r4 { animation: ssPop 0.4s var(--ease-spring) 0.75s both; }
.ss-r5 { animation: ssPop 0.4s var(--ease-spring) 0.9s both; }
.ss-r6 { animation: ssPop 0.4s var(--ease-spring) 0.7s both; }
.ss-r7 { animation: ssPop 0.4s var(--ease-spring) 0.8s both; }
.ss-r8 { animation: ssPop 0.4s var(--ease-spring) 0.9s both; }
.ss-r9 { animation: ssPop 0.4s var(--ease-spring) 1.05s both; }
.ss-r10{ animation: ssPop 0.4s var(--ease-spring) 1.2s both; }
.ss-ramp { animation: ssFade 0.5s var(--ease-spring) 1.35s both; }
.ss-grow { transform-box: fill-box; transform-origin: left center; animation: ssGrow 1.2s var(--ease-out) 1.7s both; }
.ss-grow2{ transform-box: fill-box; transform-origin: left center; animation: ssGrow 0.9s var(--ease-out) 2.6s both; }
.ss-sys  { animation: ssFade 0.5s var(--ease-spring) 1.6s both; }