/* migration-native-to-cross-platform.html — hero animation (prefix: nx-)
   Theme: Two native stacks (Swift / Kotlin) merge → shared RN/Flutter core → two platform shells */
@keyframes nxGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes nxFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nxFlow { 0% { stroke-dashoffset: 20; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes nxPop  { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.nx-glow  { animation: nxGlow 3.5s ease-in-out infinite; }
.nx-ios   { animation: nxFade 0.5s var(--ease-spring) 0.4s both; }
.nx-and   { animation: nxFade 0.5s var(--ease-spring) 0.55s both; }
.nx-merge-l, .nx-merge-r { stroke-dasharray: 6; animation: nxFlow 2.4s linear infinite; }
.nx-merge-l { animation-delay: 1.0s; }
.nx-merge-r { animation-delay: 1.15s; }
.nx-core  { animation: nxPop 0.55s var(--ease-spring) 1.2s both; transform-box: fill-box; transform-origin: center; }
.nx-out-l, .nx-out-r { stroke-dasharray: 6; animation: nxFlow 2.4s linear infinite; }
.nx-out-l { animation-delay: 1.7s; }
.nx-out-r { animation-delay: 1.85s; }
.nx-shell { }
.nx-sh1 { animation: nxFade 0.5s var(--ease-spring) 1.9s both; }
.nx-sh2 { animation: nxFade 0.5s var(--ease-spring) 2.05s both; }