/* migration-codeigniter-to-mern.html — hero animation (prefix: cm-)
   Theme: PHP MVC monolith → API Gateway router → MERN stack layers */
@keyframes cmGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes cmFade { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cmFadeR{ from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cmLayer{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cmPulse{ 0%,100% { stroke-opacity: 0.55; } 50% { stroke-opacity: 0.9; } }
.cm-glow   { animation: cmGlow 3.5s ease-in-out infinite; }
.cm-before { animation: cmFade 0.5s var(--ease-spring) 0.4s both; }
.cm-router { animation: cmFade 0.5s var(--ease-spring) 0.9s both; transform-box: fill-box; transform-origin: center; }
.cm-router rect { animation: cmPulse 2.2s ease-in-out 1.5s infinite; }
.cm-lineL, .cm-lineR { animation: cmFade 0.3s ease-out 1.1s both; }
.cm-after  { animation: cmFadeR 0.55s var(--ease-spring) 1.2s both; }
.cm-l      { }
.cm-l1 { animation: cmLayer 0.4s ease-out 1.5s both; }
.cm-l2 { animation: cmLayer 0.4s ease-out 1.65s both; }
.cm-l3 { animation: cmLayer 0.4s ease-out 1.8s both; }
.cm-l4 { animation: cmLayer 0.4s ease-out 1.95s both; }
.cm-l5 { animation: cmLayer 0.4s ease-out 2.1s both; }