/* svc-firebase.html — hero animation (prefix: fb-)
   Theme: Firestore doc broadcasting live to multiple clients */
@keyframes fbGlow { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes fbFade { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes fbCountBump { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes fbWave { 0% { r: 70; opacity: 0.55; } 100% { r: 180; opacity: 0; } }
@keyframes fbSyncFlow { 0% { stroke-dashoffset: 18; opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fb-glow { animation: fbGlow 3.5s ease-in-out infinite; }
.fb-doc  { animation: fbFade 0.55s var(--ease-spring) 0.4s both; transform-box: fill-box; transform-origin: center; }
.fb-sub  { transform-box: fill-box; transform-origin: center; }
.fb-s1 { animation: fbFade 0.45s var(--ease-spring) 0.7s both; }
.fb-s2 { animation: fbFade 0.45s var(--ease-spring) 0.85s both; }
.fb-s3 { animation: fbFade 0.45s var(--ease-spring) 1.0s both; }
.fb-s4 { animation: fbFade 0.45s var(--ease-spring) 1.15s both; }
.fb-count { transform-box: fill-box; transform-origin: center; animation: fbCountBump 2.2s ease-in-out 1.8s infinite; }
.fb-wave { animation: fbWave 2.6s ease-out infinite; }
.fb-w2   { animation-delay: 1.3s; }
.fb-sync { stroke-dasharray: 8; animation: fbSyncFlow 2.2s linear infinite; }
.fb-sync:nth-of-type(1) { animation-delay: 1.4s; }
.fb-sync:nth-of-type(2) { animation-delay: 1.6s; }
.fb-sync:nth-of-type(3) { animation-delay: 1.8s; }
.fb-sync:nth-of-type(4) { animation-delay: 2.0s; }