/* migration-mysql-to-postgresql.html — hero animation (prefix: mp-)
   Theme: MySQL schema row → type-cast bridge → PostgreSQL schema with JSONB + CHECK + indexes */
@keyframes mpGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes mpFade { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mpFadeR{ from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mpRow  { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mpBridgePulse { 0%,100% { stroke-opacity: 0.7; } 50% { stroke-opacity: 1; } }
.mp-glow   { animation: mpGlow 3.5s ease-in-out infinite; }
.mp-before { animation: mpFade 0.55s var(--ease-spring) 0.4s both; }
.mp-bridge { animation: mpFade 0.5s var(--ease-spring) 0.9s both; transform-box: fill-box; transform-origin: center; }
.mp-bridge rect { animation: mpBridgePulse 2.2s ease-in-out 1.5s infinite; }
.mp-bl, .mp-br { animation: mpFade 0.3s ease-out 1.1s both; }
.mp-after  { animation: mpFadeR 0.55s var(--ease-spring) 1.2s both; }
.mp-r      { }
.mp-r1 { animation: mpRow 0.35s ease-out 1.5s both; }
.mp-r2 { animation: mpRow 0.35s ease-out 1.6s both; }
.mp-r3 { animation: mpRow 0.35s ease-out 1.7s both; }
.mp-r4 { animation: mpRow 0.35s ease-out 1.8s both; }
.mp-r5 { animation: mpRow 0.35s ease-out 1.9s both; }
.mp-r6 { animation: mpRow 0.35s ease-out 2.0s both; }