/* migration-laravel-to-mern.html — hero animation (prefix: lm-)
   Theme: 4 separate stacks (PHP + Vue + Swift + Kotlin) merging into one TypeScript core → 3 outputs */
@keyframes lmGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes lmPop  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes lmFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lmFlow { 0% { stroke-dashoffset: 24; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.lm-glow  { animation: lmGlow 3.5s ease-in-out infinite; }
.lm-stack { transform-box: fill-box; transform-origin: center; }
.lm-s1 { animation: lmPop 0.45s var(--ease-spring) 0.4s both; }
.lm-s2 { animation: lmPop 0.45s var(--ease-spring) 0.55s both; }
.lm-s3 { animation: lmPop 0.45s var(--ease-spring) 0.7s both; }
.lm-s4 { animation: lmPop 0.45s var(--ease-spring) 0.85s both; }
.lm-merge { stroke-dasharray: 8; animation: lmFlow 2.4s linear 1.2s infinite; }
.lm-core  { animation: lmFade 0.55s var(--ease-spring) 1.3s both; }
.lm-out   { }
.lm-o1 { animation: lmPop 0.45s var(--ease-spring) 1.7s both; }
.lm-o2 { animation: lmPop 0.45s var(--ease-spring) 1.85s both; }
.lm-o3 { animation: lmPop 0.45s var(--ease-spring) 2.0s both; }