/* migration-wordpress-to-shopify.html — hero animation (prefix: ws-)
   Theme: WP + plugin grid with red vulnerability dots → Shopify 5-step native checkout */
@keyframes wsGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes wsFade { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wsFadeR{ from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wsStep { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wsArrow{ 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes wsPluginPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.ws-glow   { animation: wsGlow 3.5s ease-in-out infinite; }
.ws-before { animation: wsFade 0.55s var(--ease-spring) 0.4s both; }
.ws-plugins rect[fill="#D94060"] { animation: wsPluginPulse 2s ease-in-out 1.2s infinite; }
.ws-arrow  { transform-box: fill-box; transform-origin: center; animation: wsFade 0.4s ease-out 0.9s both, wsArrow 1.8s ease-in-out 1.5s infinite; }
.ws-after  { animation: wsFadeR 0.55s var(--ease-spring) 1.1s both; }
.ws-step   { }
.ws-s1 { animation: wsStep 0.4s ease-out 1.4s both; }
.ws-s2 { animation: wsStep 0.4s ease-out 1.55s both; }
.ws-s3 { animation: wsStep 0.4s ease-out 1.7s both; }
.ws-s4 { animation: wsStep 0.4s ease-out 1.85s both; }
.ws-s5 { animation: wsStep 0.45s var(--ease-spring) 2.0s both; }