/* migration-on-premise-to-cloud.html — hero animation (prefix: oc-)
   Theme: On-prem rack (servers stacked) → cloud regions with auto-spawning instances */
@keyframes ocGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes ocFade { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ocFadeR{ from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ocSpawn { from { opacity: 0; transform: scale(0); } to { opacity: 0.85; transform: scale(1); } }
@keyframes ocArrow{ 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.oc-glow   { animation: ocGlow 3.5s ease-in-out infinite; }
.oc-rack   { animation: ocFade 0.55s var(--ease-spring) 0.4s both; }
.oc-arrow  { transform-box: fill-box; transform-origin: center; animation: ocFade 0.4s ease-out 0.9s both, ocArrow 1.8s ease-in-out 1.4s infinite; }
.oc-cloud  { animation: ocFadeR 0.55s var(--ease-spring) 1.1s both; }
.oc-region { }
.oc-r1 { animation: ocFade 0.4s ease-out 1.3s both; }
.oc-r2 { animation: ocFade 0.4s ease-out 1.45s both; }
.oc-svc    { animation: ocFade 0.4s ease-out 1.6s both; }
.oc-inst   { transform-box: fill-box; transform-origin: center; }
.oc-spawn1 { animation: ocSpawn 0.4s var(--ease-spring) 1.8s both; }
.oc-spawn2 { animation: ocSpawn 0.4s var(--ease-spring) 2.0s both; }
.oc-spawn3 { animation: ocSpawn 0.4s var(--ease-spring) 2.2s both; }