/* migration-rest-to-graphql.html — hero animation (prefix: rg-)
   Theme: Grid of 48 REST endpoints (red) collapsing into one GraphQL node with client query */
@keyframes rgGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes rgEpFade { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rgGqlPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes rgFan { 0% { stroke-dashoffset: 18; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rgFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rg-glow { animation: rgGlow 3.5s ease-in-out infinite; }
.rg-ep   { }
.rg-e1 { animation: rgEpFade 0.35s ease-out 0.5s both; }
.rg-e2 { animation: rgEpFade 0.35s ease-out 0.6s both; }
.rg-e3 { animation: rgEpFade 0.35s ease-out 0.7s both; }
.rg-e4 { animation: rgEpFade 0.35s ease-out 0.8s both; }
.rg-e5 { animation: rgEpFade 0.35s ease-out 0.9s both; }
.rg-e6 { animation: rgEpFade 0.35s ease-out 1.0s both; }
.rg-e7 { animation: rgEpFade 0.35s ease-out 1.1s both; }
.rg-e8 { animation: rgEpFade 0.35s ease-out 1.2s both; }
.rg-gql   { transform-box: fill-box; transform-origin: center; animation: rgFade 0.5s var(--ease-spring) 1.3s both, rgGqlPulse 2.4s ease-in-out 2s infinite; }
.rg-query { animation: rgFade 0.55s var(--ease-spring) 1.55s both; }
.rg-fan   { stroke-dasharray: 6; }
.rg-f1 { animation: rgFan 2.2s linear 1.8s infinite; }
.rg-f2 { animation: rgFan 2.2s linear 2.0s infinite; }
.rg-f3 { animation: rgFan 2.2s linear 2.2s infinite; }
.rg-f4 { animation: rgFan 2.2s linear 2.4s infinite; }