/* migration-wordpress-to-headless.html — hero animation (prefix: wp-)
   Theme: WordPress monolith (red) → arrow → Headless CMS + 4 channels (web / mobile / email / print) */
@keyframes wpGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes wpFade { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wpFadeR{ from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes wpFlow { 0% { stroke-dashoffset: 16; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wpArrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes wpPop  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.wp-glow   { animation: wpGlow 3.5s ease-in-out infinite; }
.wp-before { animation: wpFade 0.55s var(--ease-spring) 0.4s both; }
.wp-arrow  { transform-box: fill-box; transform-origin: center; animation: wpFade 0.4s ease-out 1.0s both, wpArrow 1.8s ease-in-out 1.5s infinite; }
.wp-after  { animation: wpFadeR 0.55s var(--ease-spring) 1.2s both; }
.wp-ch     { transform-box: fill-box; transform-origin: center; }
.wp-c1 { animation: wpPop 0.4s var(--ease-spring) 1.5s both; }
.wp-c2 { animation: wpPop 0.4s var(--ease-spring) 1.65s both; }
.wp-c3 { animation: wpPop 0.4s var(--ease-spring) 1.8s both; }
.wp-c4 { animation: wpPop 0.4s var(--ease-spring) 1.95s both; }
.wp-flow   { stroke-dasharray: 6; }
.wp-f1 { animation: wpFlow 2.4s linear 2.0s infinite; }
.wp-f2 { animation: wpFlow 2.4s linear 2.15s infinite; }
.wp-f3 { animation: wpFlow 2.4s linear 2.3s infinite; }
.wp-f4 { animation: wpFlow 2.4s linear 2.45s infinite; }