/* svc-web-app.html — hero animation (prefix: wa-)
   Theme: 3-layer stack (Frontend → API Gateway → Data) with request dots flowing + 10k load bar */
@keyframes waGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes waLayer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes waDotDown {
  0%   { cy: 90;  opacity: 0; }
  10%  { opacity: 1; }
  45%  { cy: 126; opacity: 1; }
  55%  { cy: 126; opacity: 1; }
  90%  { cy: 194; opacity: 1; }
  100% { cy: 210; opacity: 0; }
}
@keyframes waBarGrow { from { width: 0; } to { width: 342px; } }
.wa-glow { animation: waGlow 3.5s ease-in-out infinite; }
.wa-layer { }
.wa-l1 { animation: waLayer 0.5s var(--ease-spring) 0.4s both; }
.wa-l2 { animation: waLayer 0.5s var(--ease-spring) 0.6s both; }
.wa-l3 { animation: waLayer 0.5s var(--ease-spring) 0.8s both; }
.wa-dot { animation: waDotDown 2.2s ease-in-out infinite; }
.wa-d1 { animation-delay: 1.2s; }
.wa-d2 { animation-delay: 1.5s; }
.wa-d3 { animation-delay: 1.8s; }
.wa-monitor { animation: waLayer 0.5s var(--ease-spring) 1.1s both; }
.wa-bar { animation: waBarGrow 1.3s var(--ease-out) 1.6s both; }