зроби, щоб у стовпчику 3 після 3 секунди шрифт із чорного став білим. <!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ізольована SVG-анімація (версія 1)</title> 
    <style>
        .animation-container-1 { 
            width: 100%; 
            margin: 0;
        }
        svg {
            width: 100%;
            height: auto;
        }
        .column-label {
            font-size: 14px;
            fill: white;
            text-anchor: middle;
        }
        .time-label {
            fill: black; /* Змінено на чорний */
            text-anchor: middle; 
            font-weight: bold; /* Встановлено жирний шрифт */
        }
    </style>
</head>
<body>
    <div id="animation-container-1" class="animation-container-1"></div> 

    <script>
    (function() {
        const containerId = 'animation-container-1'; 
        const container = document.getElementById(containerId);
        
        const svgNS = "http://www.w3.org/2000/svg";
        const svg = document.createElementNS(svgNS, "svg");
        svg.setAttribute("viewBox", "0 0 800 370");
        svg.style.width = "100%"; 
        svg.style.height = "auto"; 

        const svgContent = `
            <defs>
                <filter id="glow">
                    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                <!-- Налаштований градієнт з плавними переходами -->
                <linearGradient id="columnGradient" x1="0" y1="164" x2="0" y2="2" gradientUnits="userSpaceOnUse">
                    <!-- Салатовий колір -->
                    <stop offset="0%" stop-color="#7CFC00" />
                    <stop offset="30%" stop-color="#7CFC00" />
                    <!-- Плавний перехід до жовтого -->
                    <stop offset="45%" stop-color="yellow" />
                    <stop offset="55%" stop-color="yellow" />
                    <!-- Плавний перехід до червоного -->
                    <stop offset="70%" stop-color="red" />
                    <stop offset="100%" stop-color="red" />
                </linearGradient>
            </defs>

            <rect width="800" height="370" fill="#1a1a2e"/> 

            <!-- Перший стовпчик з анімацією -->
            <g id="column1">
                <!-- Заповнення з градієнтом -->
                <rect id="column1-fill" x="2" y="164" width="50" height="0" fill="url(#columnGradient)">
                </rect>
                <!-- Контур стовпчика -->
                <rect x="2" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
                <text x="27" y="50" class="time-label" font-size="50" font-weight="bold">3</text>  <!-- Переміщено вниз -->
                <text x="27" y="180" class="column-label">1</text>
            </g>

            <!-- Інші стовпчики -->
            <rect x="107" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="132" y="180" class="column-label">2</text>

            <rect x="212" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="237" y="180" class="column-label">3</text>

            <rect x="317" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="342" y="180" class="column-label">4</text>

            <rect x="422" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="447" y="180" class="column-label">5</text>

            <rect x="527" y="2" width="50" height="162" fill="none" stroke="white" stroke-width="1"/>
            <text x="552" y="180" class="column-label">6</text>

            <!-- Управління та елементи інтерфейсу -->
            <g class="controls" transform="translate(400, 323.6)"> 
                <g transform="translate(0, 5)">
                    <circle id="bullet-animation1-1" cx="-179" cy="-70" r="60" fill="red" /> 
                    <text x="-179" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">2</text>
                    <circle id="bullet-animation1-2" cx="-318" cy="-70" r="80" fill="red" /> 
                    <text x="-318" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">1</text>
                    <circle id="bullet-animation1" cx="-43" cy="-70" r="75" fill="red" /> 
                    <text x="-43" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">3</text>
                    <circle id="bullet-animation1-4" cx="129" cy="-70" r="95" fill="red" /> 
                    <text x="129" y="-70" text-anchor="middle" dominant-baseline="central" fill="black" font-size="30">4</text>
                </g>

                <g transform="translate(-86, -22)"> 
                    <rect id="start-button-animation1" x="-125" y="26" width="250" height="40" fill="#a62020" stroke="#01FEFE" stroke-width="2" rx="5" ry="5" style="cursor: pointer;"/> 
                    <text id="start-text-animation1" x="-110" y="51" text-anchor="start" dominant-baseline="middle" alignment-baseline="middle" fill="#01FEFE" font-size="34" pointer-events="none" stroke="#01FEFE" stroke-width="2" font-family="Haettenschweiler">START</text>
                    <rect x="0" y="26" width="120" height="40" fill="none" rx="5" ry="5"/>
                    <text id="timer-animation1" x="10" y="51" text-anchor="start" alignment-baseline="middle" fill="#01FEFE" font-size="40" font-weight="bold" pointer-events="none" dominant-baseline="middle" font-family="Haettenschweiler">-05:00</text> 
                </g>
            </g>
            
            <line x1="628.68" y1="0" x2="628.68" y2="370" stroke="red" stroke-width="3" /> 
            
            <line x1="628.68" y1="167" x2="0" y2="167" stroke="#0000FF" stroke-width="3"></line> 
            <line x1="714.34" y1="79" x2="714.34" y2="0" stroke="red" stroke-width="3" />
            <line x1="628.68" y1="79" x2="800" y2="79" stroke="red" stroke-width="3" /> 

            <!-- Час на виконання -->
            <text x="78" y="110" class="time-label">Час на</text>
            <text x="78" y="130" class="time-label">вико</text>
            <text x="78" y="150" class="time-label">нання</text> 
        `;

        svg.innerHTML = svgContent; 
        container.appendChild(svg);

        let timerInterval;
        let startTime;
        let animationInProgress = false;

        function startAnimation() {
            if (animationInProgress) {
                resetAnimation();
                return;
            }
            animationInProgress = true;

            startTime = Date.now();
            clearInterval(timerInterval);
            timerInterval = setInterval(updateTimer, 10);

            // Запуск анімації заповнення стовпчика з затримкою 5 секунд
            setTimeout(animateColumn1, 5000); 

            setTimeout(() => {
                animationInProgress = false;
                clearInterval(timerInterval);
            }, 15000); 

            // Додаткові анімації, якщо потрібно
        }

        function resetAnimation() {
            animationInProgress = false;
            clearInterval(timerInterval);
            svg.querySelector('#timer-animation1').textContent = '-05:00'; 

            // Скидання заповнення стовпчика
            let column1Fill = svg.getElementById('column1-fill');
            column1Fill.setAttribute('y', '164');
            column1Fill.setAttribute('height', '0');

            // Скидання інших анімацій, якщо потрібно
        }

        function updateTimer() {
            const currentTime = Date.now();
            const elapsedTime = (currentTime - startTime) / 1000 - 5;
            
            if (elapsedTime >= 10.00) { 
                clearInterval(timerInterval);
                svg.querySelector('#timer-animation1').textContent = '10:00'; 
            } else {
                const seconds = Math.floor(elapsedTime);
                const centiseconds = Math.floor((elapsedTime - seconds) * 100);
                const formattedSeconds = seconds < 0 ? `-${Math.abs(seconds).toString().padStart(2, '0')}` : seconds.toString().padStart(2, '0');
                svg.querySelector('#timer-animation1').textContent = 
                    `${formattedSeconds}:${centiseconds.toString().padStart(2, '0')}`;
            }
        }

        function animateColumn1() {
            const duration = 3000; // 3 секунди
            const startTime = Date.now();
            const column1Fill = svg.getElementById('column1-fill');
            const totalHeight = 162;
            const startY = 164;
            const endY = 2;

            function animate() {
                const currentTime = Date.now();
                const elapsed = currentTime - startTime;
                const progress = Math.min(elapsed / duration, 1); // Значення від 0 до 1

                // Розрахунок нової висоти та позиції 'y'
                const newHeight = totalHeight * progress;
                const newY = startY - (totalHeight * progress);

                column1Fill.setAttribute('height', newHeight);
                column1Fill.setAttribute('y', newY);

                if (progress < 1) {
                    requestAnimationFrame(animate);
                }
            }

            animate();
        }

        svg.querySelector('#start-button-animation1').addEventListener('click', startAnimation); 
    })();
    </script>
</body>
</html>