/* svc-django.html — hero animation (prefix: dj-)
   Theme: Layered Django architecture (URLs → Views → Services → Models → DB) */

@keyframes djGlow  { 0%,100% { opacity: 0.08; } 50% { opacity: 0.2; } }
@keyframes djSlide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes djFlow  { 0% { stroke-dashoffset: 20; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes djHighlight { 0%,100% { stroke-opacity: 0.7; } 50% { stroke-opacity: 1; } }

.dj-glow { animation: djGlow 3.5s ease-in-out infinite; }
.dj-layer { }
.dj-l1 { animation: djSlide 0.5s var(--ease-spring) 0.45s both; }
.dj-l2 { animation: djSlide 0.5s var(--ease-spring) 0.65s both; }
.dj-l3 { animation: djSlide 0.5s var(--ease-spring) 0.85s both, djHighlight 2.6s ease-in-out 1.8s infinite; }
.dj-l4 { animation: djSlide 0.5s var(--ease-spring) 1.05s both; }
.dj-l5 { animation: djSlide 0.5s var(--ease-spring) 1.25s both; }
.dj-flow { stroke-dasharray: 6; animation: djFlow 2.4s linear 1.6s infinite; }