/* process-v2.html — hero animation (prefix: pr-)
   Theme: 4-phase timeline (Discover → Design → Build → Scale) with progress dot crossing axis */
@keyframes prGlow { 0%,100% { opacity: 0.1; } 50% { opacity: 0.22; } }
@keyframes prPhase { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes prCard  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes prMove {
  0%   { transform: translateX(0);   opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translateX(40px); }
  50%  { transform: translateX(140px); }
  75%  { transform: translateX(250px); }
  95%  { opacity: 1; }
  100% { transform: translateX(360px); opacity: 0.95; }
}
@keyframes prFinalPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.pr-glow { animation: prGlow 4s ease-in-out infinite; }
.pr-phase { transform-box: fill-box; transform-origin: center; }
.pr-p1 { animation: prPhase 0.4s var(--ease-spring) 0.5s both; }
.pr-p2 { animation: prPhase 0.4s var(--ease-spring) 0.7s both; }
.pr-p3 { animation: prPhase 0.4s var(--ease-spring) 0.9s both; }
.pr-p4 { animation: prPhase 0.5s var(--ease-spring) 1.1s both, prFinalPulse 2.6s ease-in-out 2.4s infinite; }
.pr-progress { transform-box: fill-box; transform-origin: center; animation: prMove 5s ease-in-out 1.4s infinite; }
.pr-card { }
.pr-c1 { animation: prCard 0.45s var(--ease-spring) 1.2s both; }
.pr-c2 { animation: prCard 0.45s var(--ease-spring) 1.4s both; }
.pr-c3 { animation: prCard 0.45s var(--ease-spring) 1.6s both; }
.pr-c4 { animation: prCard 0.5s var(--ease-spring) 1.8s both; }