/* svc-openai.html — hero animation (prefix: oa-)
   Theme: streaming tokens + token-budget bar + passing eval rows */
@keyframes oaGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes oaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes oaTok  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes oaFlow { 0% { stroke-dashoffset: 16; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes oaBarGrow { from { width: 0; } to { width: 148px; } }
@keyframes oaRowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.oa-glow   { animation: oaGlow 3.5s ease-in-out infinite; }
.oa-prompt { animation: oaFade 0.45s var(--ease-spring) 0.4s both; }
.oa-model  { animation: oaFade 0.5s var(--ease-spring) 0.6s both; transform-box: fill-box; transform-origin: center; }
.oa-stream { animation: oaFade 0.5s var(--ease-spring) 0.85s both; }
.oa-tok    { animation: oaTok 0.3s ease-out both; }
.oa-t1 { animation-delay: 1.1s; } .oa-t2 { animation-delay: 1.3s; } .oa-t3 { animation-delay: 1.5s; }
.oa-t4 { animation-delay: 1.7s; } .oa-t5 { animation-delay: 1.9s; }
.oa-cost   { animation: oaFade 0.5s var(--ease-spring) 1.05s both; }
.oa-bar    { animation: oaBarGrow 1s ease-out 1.4s both; }
.oa-evals  { animation: oaFade 0.5s var(--ease-spring) 1.25s both; }
.oa-row    { animation: oaRowIn 0.4s ease-out both; }
.oa-r1 { animation-delay: 1.55s; } .oa-r2 { animation-delay: 1.7s; } .oa-r3 { animation-delay: 1.85s; }
.oa-flow { stroke-dasharray: 6; }
.oa-f1 { animation: oaFlow 2.2s linear 1.0s infinite; }
.oa-f2 { animation: oaFlow 2.2s linear 1.2s infinite; }