function startFlipClock() {
    function updateDigit(element, newValue) {
        const upper = element.querySelector('.upper');
        const lower = element.querySelector('.lower');
        const currentValue = upper.textContent;

        if (currentValue !== newValue) {
            upper.textContent = currentValue; // Keep the current value
            lower.textContent = newValue;     // Set the new value

            element.classList.add('animate'); // Trigger the animation

            setTimeout(() => {
                upper.textContent = newValue; // After the flip, update the upper text
                element.classList.remove('animate'); // Reset the animation state
            }, 600); // Match with the animation duration
        }
    }

    function updateFlipClock() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        // Update each digit
        updateDigit(document.getElementById('hours-1'), hours[0]);
        updateDigit(document.getElementById('hours-2'), hours[1]);
        updateDigit(document.getElementById('minutes-1'), minutes[0]);
        updateDigit(document.getElementById('minutes-2'), minutes[1]);
        updateDigit(document.getElementById('seconds-1'), seconds[0]);
        updateDigit(document.getElementById('seconds-2'), seconds[1]);
    }

    setInterval(updateFlipClock, 1000);
}

window.onload = startFlipClock;