/* svc-nextjs.html — hero animation (prefix: nx-)
   Theme: App Router switching a request across ISR / Stream SSR / Edge strategies */

@keyframes nxGlow   { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes nxFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nxReqIn  { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nxDotTravel {
  0%   { transform: translateX(0);   opacity: 0.9; }
  45%  { transform: translateX(50px); opacity: 1; }
  55%  { transform: translateX(50px); opacity: 1; }
  100% { transform: translateX(250px); opacity: 0; }
}
@keyframes nxFlow { 0% { stroke-dashoffset: 32; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes nxHighlight {
  0%,100% { fill: rgba(60,234,199,0.14); stroke-opacity: 0.6; }
  50%     { fill: rgba(60,234,199,0.28); stroke-opacity: 0.95; }
}

.nx-glow   { animation: nxGlow 3.5s ease-in-out infinite; }
.nx-req    { animation: nxReqIn 0.5s var(--ease-spring) 0.4s both; }
.nx-req-dot{ transform-box: fill-box; transform-origin: left center; animation: nxDotTravel 3.2s ease-in-out 1.4s infinite; }
.nx-router { animation: nxFadeUp 0.5s var(--ease-spring) 0.7s both; }

.nx-flow { stroke-dasharray: 8; }
.nx-f1 { animation: nxFlow 3s linear 1.9s infinite; }
.nx-f2 { animation: nxFlow 3s linear 2.1s infinite; }
.nx-f3 { animation: nxFlow 3s linear 2.3s infinite; }

.nx-s  { }
.nx-s1 { animation: nxFadeUp 0.45s var(--ease-spring) 1.0s both, nxHighlight 5s ease-in-out 2.5s infinite; }
.nx-s2 { animation: nxFadeUp 0.45s var(--ease-spring) 1.2s both; }
.nx-s3 { animation: nxFadeUp 0.45s var(--ease-spring) 1.4s both; }