/* svc-react-native.html — hero animation (prefix: rn-)
   Theme: JS (JSI) calling native modules on iOS + Android via flowing messages */

@keyframes rnGlow     { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes rnFadeIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rnMsgFly   {
  0%   { transform: translateX(0)   translateY(0);   opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(80px) translateY(-22px); opacity: 0; }
}
@keyframes rnMsgFly2  {
  0%   { transform: translateX(0) translateY(0);  opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(80px) translateY(68px); opacity: 0; }
}

.rn-glow    { animation: rnGlow 3.5s ease-in-out infinite; }
.rn-js      { animation: rnFadeIn 0.5s var(--ease-spring) 0.4s both; }
.rn-bridge  { animation: rnFadeIn 0.5s var(--ease-spring) 0.7s both; }
.rn-native  { animation: rnFadeIn 0.5s var(--ease-spring) 0.95s both; }
.rn-native2 { animation: rnFadeIn 0.5s var(--ease-spring) 1.15s both; }

.rn-msg    { transform-box: fill-box; transform-origin: center; }
.rn-msg-1  { animation: rnMsgFly  2.4s ease-in-out 1.4s infinite; }
.rn-msg-2  { animation: rnMsgFly2 2.4s ease-in-out 1.7s infinite; }
.rn-msg-3  { animation: rnMsgFly  2.4s ease-in-out 2.1s infinite; }