/* svc-flutter.html — hero animation (prefix: fl-)
   Theme: Twin phones (iOS + Android) sharing one Dart core, syncing taps */

@keyframes flGlow      { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes flPhoneIn   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flCoreIn    { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes flCorePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes flBridgePulse { 0% { stroke-dashoffset: 24; opacity: 0.2; } 50% { opacity: 0.9; } 100% { stroke-dashoffset: 0; opacity: 0.2; } }
@keyframes flTap       { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(2.4); } }

.fl-glow { animation: flGlow 3.5s ease-in-out infinite; }
.fl-ios  { animation: flPhoneIn 0.55s var(--ease-spring) 0.4s both; }
.fl-and  { animation: flPhoneIn 0.55s var(--ease-spring) 0.6s both; }
.fl-core { animation: flCoreIn 0.55s var(--ease-spring) 0.95s both; transform-box: fill-box; transform-origin: center; }
.fl-core circle { animation: flCorePulse 2.2s ease-in-out 1.6s infinite; transform-box: fill-box; transform-origin: center; }
.fl-bridge { stroke-dasharray: 6; animation: flBridgePulse 2s linear infinite; }
.fl-bridge-l { animation-delay: 1.2s; }
.fl-bridge-r { animation-delay: 1.45s; }
.fl-ios-tap { transform-box: fill-box; transform-origin: center; animation: flTap 2.4s ease-out 1.8s infinite; }