document.addEventListener('DOMContentLoaded', function () {
    var h1 = document.querySelector('.user-index-h1');
    var h2 = document.querySelector('.user-index-h2');

    // Initial styles for fade-in effect
    h1.style.opacity = '0';
    h1.style.transform = 'translateX(-35px)';
    
    h2.style.opacity = '0';
    h2.style.transform = 'translateX(-35px)';

    // Trigger the reflow to restart the CSS animation
    void h1.offsetWidth;
    void h2.offsetWidth;

    // Apply the fade-in effect
    h1.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
    h1.style.opacity = '1';
    h1.style.transform = 'translateX(0)';

    h2.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
    h2.style.opacity = '1';
    h2.style.transform = 'translateX(0)';
});