/* CC-02b Wave 1 - extracted from FRONTEND/02_profiles/profile-completion-progress.html */
:root {
            /* IndianMarriage.com Dark Theme Colors */
            --bg-primary: #1a0b1a;
            --bg-secondary: #2d1829;
            --bg-tertiary: #3d2235;
            --bg-quaternary: #4a2c42;
            --text-primary: #ffffff;
            --text-secondary: #e8d5e8;
            --text-accent: #ff6b9d;
            --border-color: #5d3a56;
            --success-color: #4ade80;
            --warning-color: #fbbf24;
            --error-color: #f87171;
            --passion-red: #ef4444;
            --celebration-orange: #fb923c;
            --dark-900: #0f172a;
            --dark-800: #1e293b;
            --dark-700: #334155;
            --dark-600: #475569;
            --dark-500: #64748b;
            --dark-400: #94a3b8;
            --dark-300: #cbd5e1;
            --dark-200: #e2e8f0;
            --dark-100: #f1f5f9;
        }

        .progress-circle {
            transition: stroke-dashoffset 0.5s ease-in-out;
        }

        .animate-bounce-subtle {
            animation: bounce-subtle 3s ease-in-out infinite;
        }

        .animate-slide-up-delay {
            animation: slideUpDelay 0.8s ease-out;
        }

        @keyframes progress {
            from { stroke-dashoffset: 377; }
            to { stroke-dashoffset: var(--progress-offset); }
        }

        @keyframes bounce-subtle {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-0.25rem); }
        }

        @keyframes slideUpDelay {
            from { transform: translateY(2rem); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .completion-card.in-progress {
            background: rgba(255, 107, 157, 0.1);
            border-color: var(--love-pink);
        }

        .progress-bar-animated {
            background: linear-gradient(90deg, var(--love-pink), var(--marriage-gold), var(--destiny-purple));
            background-size: 200% 100%;
            animation: progressBarShine 3s ease-in-out infinite;
        }

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

        .achievement-badge {
            display: inline-block;
            background: linear-gradient(45deg, var(--marriage-gold), var(--celebration-orange));
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            font-weight: 600;
            animation: badgeGlow 2s ease-in-out infinite;
        }

        @keyframes badgeGlow {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .step-connector {
            height: 0.125rem;
            background: linear-gradient(90deg, transparent, var(--dark-600), transparent);
            margin: 1rem 0;
        }

        .step-connector.completed {
            background: linear-gradient(90deg, transparent, var(--harmony-green), transparent);
        }

        .celebration-animation {
            animation: celebration 0.6s ease-out;
        }

        @keyframes celebration {
            0% { transform: scale(0.8) rotate(-10deg); opacity: 0; }
            50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        .confetti {
            position: fixed;
            width: 0.5rem;
            height: 0.5rem;
            pointer-events: none;
            z-index: 1000;
        }

        @keyframes confetti-fall {
            0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
        }

        .indian-pattern {
            background: linear-gradient(45deg, transparent 30%, rgba(255, 107, 157, 0.1) 50%, transparent 70%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .cultural-icon {
            background: linear-gradient(135deg, var(--destiny-purple), var(--marriage-gold));
            border-radius: 50%;
        }

        .om-symbol {
            font-family: 'Noto Sans Devanagari', sans-serif;
            font-size: 2rem;
            color: var(--marriage-gold);
        }

        .mandala-decoration {
            background: radial-gradient(circle, rgba(255, 107, 157, 0.1) 0%, transparent 70%);
            border-radius: 50%;
        }