@keyframes fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.2)); } 50% { opacity: 1; filter: drop-shadow(0 0 15px rgba(0, 217, 255, 0.4)); } }
@keyframes node-glow { 0%, 100% { r: 25; filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.2)); } 50% { r: 28; filter: drop-shadow(0 0 15px rgba(0, 217, 255, 0.4)); } }
@keyframes flow-pulse { 0%, 100% { stroke-dashoffset: 0; opacity: 0.5; } 50% { opacity: 1; } }

.fade-up { animation: fade-up 0.6s ease-out; }
.slide-in-left { animation: slide-in-left 0.6s ease-out; }
.scale-in { animation: scale-in 0.6s ease-out; }
.glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }
.flow-line { animation: flow-pulse 3s ease-in-out infinite; }
.flow-node { animation: node-glow 2s ease-in-out infinite; }
.rag-node { animation: node-glow 2.5s ease-in-out infinite; }

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

.element-visible { animation: fade-up 0.6s ease-out forwards; }
.phase.active { animation: scale-in 0.5s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}