/* === ANIMATIONS === */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes pulse-glow {
            0%, 100% {
                box-shadow: 0 0 20px var(--color-accent-glow);
            }
            50% {
                box-shadow: 0 0 40px var(--color-accent-glow), 0 0 60px rgba(230, 126, 34, 0.2);
            }
        }

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

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink {
            0%, 50% { border-color: var(--color-accent-primary); }
            51%, 100% { border-color: transparent; }
        }

        @keyframes sparkle {
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        @keyframes sparkle-delay {
            0%, 100% { opacity: 0.2; transform: scale(0.7) rotate(0deg); }
            50% { opacity: 0.9; transform: scale(1.1) rotate(180deg); }
        }

        /* Year Counter */
        .stat-prefix {
            background: var(--color-accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .year-counter {
            font-variant-numeric: tabular-nums;
            min-width: 4.5ch;
            display: inline-block;
            text-align: left;
        }

        /* Counter-rotating outer circle */
        @keyframes rotateCounterClockwise {
            from { transform: rotate(0deg); }
            to { transform: rotate(-360deg); }
        }

        /* Rosette - 3 circles positioned in a triangle around skills-wheel */
        .skills-wheel-outer {
            position: absolute;
            width: 360px;
            height: 360px;
            top: calc(50% - 90px);
            left: calc(50% - 10px);
            transform: translate(50%, 50%);
            border: 2px dashed rgba(199, 92, 74, 0.3);
            border-radius: 50%;
            animation: rotateCounterClockwise 25s linear infinite;
        }

        .skills-wheel-outer::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--color-accent-primary);
            border-radius: 50%;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
        }

        .skills-wheel-outer-2 {
            position: absolute;
            width: 360px;
            height: 360px;
            top: calc(50% - 90px);
            left: calc(50% - 350px);
            transform: translate(-50%, -50%);
            border: 2px dashed rgba(199, 92, 74, 0.3);
            border-radius: 50%;
            animation: rotateCounterClockwise 30s linear infinite;
        }

        .skills-wheel-outer-2::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--color-accent-primary);
            border-radius: 50%;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
        }

        .skills-wheel-outer-3 {
            position: absolute;
            width: 360px;
            height: 360px;
            top: calc(50% - 390px);
            left: calc(50% - 180px);
            transform: translate(-50%, -50%);
            border: 2px dashed rgba(199, 92, 74, 0.3);
            border-radius: 50%;
            animation: rotateCounterClockwise 35s linear infinite reverse;
        }

        .skills-wheel-outer-3::before {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--color-accent-primary);
            border-radius: 50%;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Large decorative circle - top right corner */
        .hero-circle-large {
            position: fixed;
            width: 900px;
            height: 900px;
            top: -200px;
            right: -150px;
            border: 2px dashed rgba(199, 92, 74, 0.3);
            border-radius: 50%;
            animation: rotateCounterClockwise 60s linear infinite;
            pointer-events: none;
            z-index: 0;
        }

        .hero-circle-large::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -4px;
            width: 8px;
            height: 8px;
            background: rgba(199, 92, 74, 0.3);
            border-radius: 50%;
            transform: translateY(-50%);
        }

        .hero-circle-large::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -4px;
            width: 6px;
            height: 6px;
            background: rgba(199, 92, 74, 0.2);
            border-radius: 50%;
            transform: translateY(-50%);
        }

        /* Erratic icon animations for expertise cards */
        @keyframes iconPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        @keyframes iconShake {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        @keyframes iconWobble {
            0%, 100% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(-3deg) scale(1.05); }
            50% { transform: rotate(3deg) scale(1.1); }
            75% { transform: rotate(-2deg) scale(1.05); }
        }

        .expertise-card-icon.animate-pulse i {
            animation: iconPulse 0.6s ease-in-out;
        }

        .expertise-card-icon.animate-shake i {
            animation: iconShake 0.5s ease-in-out;
        }

        .expertise-card-icon.animate-bounce i {
            animation: iconBounce 0.5s ease-in-out;
        }

        .expertise-card-icon.animate-wobble i {
            animation: iconWobble 0.7s ease-in-out;
        }

        /* Tech tag tooltips */
        .tech-tag {
            position: relative;
        }

        .tech-tag-tooltip {
            position: absolute;
            bottom: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            width: 220px;
            padding: var(--space-3) var(--space-4);
            background: var(--color-bg-card);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            line-height: 1.4;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 100;
            pointer-events: none;
        }

        .tech-tag-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: var(--color-bg-card);
        }

        .tech-tag-tooltip::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 7px solid transparent;
            border-top-color: var(--color-border);
        }

        .tech-tag:hover .tech-tag-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .tech-tag-tooltip strong {
            display: block;
            color: var(--color-text-primary);
            margin-bottom: var(--space-1);
        }

        /* Glass effect on reference badges */
        .reference-type {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .reference-type::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            transition: left 0.5s ease;
        }

        .reference-card:hover .reference-type::before {
            left: 100%;
        }

        .reference-card:hover .reference-type {
            background: rgba(199, 92, 74, 0.15);
            box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1),
                        0 0 10px rgba(199, 92, 74, 0.2);
        }

        /* AI Sparkles */
        .ai-sparkles {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .sparkle {
            position: absolute;
            color: var(--color-accent-primary);
            font-size: 10px;
            animation: sparkle 2s ease-in-out infinite;
        }

        .sparkle-1 {
            top: -8px;
            right: -12px;
            font-size: 12px;
            animation-delay: 0s;
        }

        .sparkle-2 {
            top: -4px;
            right: -20px;
            font-size: 8px;
            animation: sparkle-delay 2.5s ease-in-out infinite;
            animation-delay: 0.3s;
        }

        .sparkle-3 {
            bottom: -6px;
            right: -14px;
            font-size: 6px;
            animation-delay: 0.7s;
        }

        .sparkle-lg {
            /* Font size inherited from parent (section-title) */
        }

        .sparkle-lg .sparkle-1 {
            top: -10px;
            right: -18px;
            font-size: 16px;
        }

        .sparkle-lg .sparkle-2 {
            top: -2px;
            right: -28px;
            font-size: 10px;
        }

        .sparkle-lg .sparkle-3 {
            bottom: -8px;
            right: -20px;
            font-size: 8px;
        }

        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }