/* migration-serverless.html — hero animation (prefix: sl-)
   Theme: Always-on VMs (red idle) → traffic wave + auto-spawning Lambda fleet + cost bar shrinks */
@keyframes slGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes slFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slWave { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes slSpawn { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes slIdleBlink { 0%,100% { opacity: 0.85; } 50% { opacity: 0.5; } }
@keyframes slCostShrink { from { width: 336px; } to { width: 50px; } }
.sl-glow { animation: slGlow 3.5s ease-in-out infinite; }
.sl-vms  { animation: slFade 0.5s var(--ease-spring) 0.4s both; }
.sl-idle { animation: slIdleBlink 2s ease-in-out 1.2s infinite; }
.sl-wave { stroke-dasharray: 520; animation: slWave 1.4s ease-out 0.9s both; }
.sl-fns  { animation: slFade 0.5s var(--ease-spring) 1.2s both; }
.sl-fn   { transform-box: fill-box; transform-origin: bottom center; }
.sl-spawn1 { animation: slSpawn 0.4s var(--ease-spring) 1.5s both; }
.sl-spawn2 { animation: slSpawn 0.4s var(--ease-spring) 1.65s both; }
.sl-spawn3 { animation: slSpawn 0.4s var(--ease-spring) 1.8s both; }
.sl-spawn4 { animation: slSpawn 0.4s var(--ease-spring) 1.95s both; }
.sl-spawn5 { animation: slSpawn 0.4s var(--ease-spring) 2.1s both; }
.sl-spawn6 { animation: slSpawn 0.4s var(--ease-spring) 2.25s both; }
.sl-costbar { animation: slCostShrink 1.1s var(--ease-out) 2.5s both; }