/* Animations */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes fadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes slideInLeft  { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } }
@keyframes slideInRight { from { opacity:0; transform:translateX(40px);  } to { opacity:1; transform:none; } }
@keyframes pulse-glow { 0%,100% { box-shadow:0 0 0 0 rgba(102,126,234,0); } 50% { box-shadow:0 0 25px 6px rgba(102,126,234,0.18); } }
@keyframes shimmer    { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }

.fade-in-up { opacity:0; transform:translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in-up.visible { opacity:1; transform:none; }

.fade-in { opacity:0; transition: opacity 0.6s ease; }
.fade-in.visible { opacity:1; }

.slide-in-left { opacity:0; transform:translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.slide-in-left.visible { opacity:1; transform:none; }

.slide-in-right { opacity:0; transform:translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.slide-in-right.visible { opacity:1; transform:none; }

.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

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