/* svc-supabase.html — hero animation (prefix: sb-)
   Theme: Postgres core with RLS shield; four services radiating realtime lines */
@keyframes sbGlow  { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes sbFade  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sbShield { from { opacity: 0; transform: translateY(-8px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes sbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes sbFlow  { 0% { stroke-dashoffset: 20; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sb-glow   { animation: sbGlow 3.5s ease-in-out infinite; }
.sb-shield { animation: sbShield 0.55s var(--ease-spring) 0.4s both; transform-box: fill-box; transform-origin: center top; }
.sb-pg     { animation: sbFade 0.5s var(--ease-spring) 0.65s both, sbPulse 3s ease-in-out 1.8s infinite; transform-box: fill-box; transform-origin: center; }
.sb-svc    { }
.sb-s1 { animation: sbFade 0.45s var(--ease-spring) 0.9s both; }
.sb-s2 { animation: sbFade 0.45s var(--ease-spring) 1.05s both; }
.sb-s3 { animation: sbFade 0.45s var(--ease-spring) 1.2s both; }
.sb-s4 { animation: sbFade 0.45s var(--ease-spring) 1.35s both; }
.sb-rt { stroke-dasharray: 8; }
.sb-rt1 { animation: sbFlow 2.4s linear 1.6s infinite; }
.sb-rt2 { animation: sbFlow 2.4s linear 1.8s infinite; }
.sb-rt3 { animation: sbFlow 2.4s linear 2.0s infinite; }
.sb-rt4 { animation: sbFlow 2.4s linear 2.2s infinite; }