/* ============================================
   Glitz HQ — Animations
   ============================================ */

@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

@keyframes pulse-badge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,120,0.4); } 50% { box-shadow: 0 0 0 6px rgba(255,45,120,0); } }

@keyframes orbFloat1 { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(60px,80px) scale(1.1); } 66% { transform: translate(-30px,40px) scale(0.95); } }
@keyframes orbFloat2 { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-70px,-50px) scale(1.05); } 66% { transform: translate(30px,60px) scale(0.9); } }
@keyframes orbFloat3 { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-60px) scale(1.08); } 66% { transform: translate(-50px,30px) scale(0.92); } }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes dragGhost { 0% { opacity: 0.7; transform: rotate(0deg); } 50% { transform: rotate(2deg); } 100% { opacity: 0.7; transform: rotate(0deg); } }

/* ── Chart Animations ── */
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes barGrowV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ringDraw { from { stroke-dashoffset: var(--ring-circumference, 283); } to { stroke-dashoffset: var(--ring-target, 0); } }
@keyframes drawLine { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
@keyframes fillReveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── Counter Animation ── */
@keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Glow Pulse ── */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,45,120,0.1); }
    50% { box-shadow: 0 0 40px rgba(255,45,120,0.2); }
}

/* ── Gradient shift for cards ── */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Toast slide ── */
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }

/* ── Utility Classes ── */
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.4s ease forwards; }
.animate-slide-up { animation: slideUp 0.5s var(--ease-out-expo) forwards; }
.animate-scale-in { animation: scaleIn 0.15s ease forwards; }
.animate-pop-in { animation: popIn 0.3s var(--ease-spring) forwards; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-glow { animation: glowPulse 3s ease-in-out infinite; }
.animate-count-up { animation: countUp 0.5s var(--ease-out-expo) forwards; }

/* ── Bar chart entrance ── */
.animate-bar { animation: barGrow 0.6s var(--ease-out-expo) forwards; transform-origin: left center; }
.animate-bar-v { animation: barGrowV 0.6s var(--ease-out-expo) forwards; transform-origin: bottom center; }

/* Staggered children animation */
.stagger-children > * { opacity: 0; animation: fadeInUp 0.3s ease forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0.02s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.04s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.06s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.14s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.18s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(11) { animation-delay: 0.22s; }
.stagger-children > *:nth-child(n+12) { animation-delay: 0.24s; }

/* ── Slide stagger (used on stat cards) ── */
.stagger-slide > * { opacity: 0; animation: slideUp 0.5s var(--ease-out-expo) forwards; }
.stagger-slide > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-slide > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-slide > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-slide > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-slide > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-slide > *:nth-child(6) { animation-delay: 0.3s; }

/* Sortable drag styles */
.sortable-ghost { opacity: 0.4; }
.sortable-chosen { box-shadow: 0 8px 32px rgba(255,45,120,0.2); }
.sortable-drag { transform: rotate(2deg); }