<button id="scrollToTop" 
    class="fixed bottom-8 right-8 z-50 w-14 h-14 rounded-full bg-black/80 backdrop-blur-xl border border-white/20 text-white shadow-[0_20px_50px_rgba(0,0,0,0.4)] flex items-center justify-center translate-y-24 opacity-0 transition-all duration-500 hover:bg-blue-600 hover:border-blue-500 hover:scale-110 active:scale-95 group">
    
    <div class="absolute inset-0 rounded-full shadow-[inset_0_0_10px_rgba(255,255,255,0.1)] pointer-events-none"></div>

    <i class="ri-arrow-up-line text-2xl group-hover:-translate-y-1 transition-transform duration-300"></i>

    <span class="absolute inset-0 rounded-full border border-blue-500/50 animate-ping opacity-0 group-hover:opacity-100"></span>
</button>

<style>
/* Refined Jump Physics */
@keyframes premiumJump {
    0%, 100% { transform: translateY(0) scale(1); }
    10% { transform: translateY(-15px) scaleX(0.9) scaleY(1.1); } /* Stretch */
    20% { transform: translateY(0) scaleX(1.1) scaleY(0.9); }  /* Squash */
    30% { transform: translateY(-7px) scale(1); }
    40% { transform: translateY(0) scale(1); }
}

.jump-animation {
    animation: premiumJump 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById('scrollToTop');

    // Show/Hide on Scroll
    window.addEventListener('scroll', () => {
        if (window.scrollY > 500) {
            btn.classList.remove('translate-y-24', 'opacity-0');
            btn.classList.add('translate-y-0', 'opacity-100');
        } else {
            btn.classList.add('translate-y-24', 'opacity-0');
            btn.classList.remove('translate-y-0', 'opacity-100');
        }
    });

    // The 6-second "Jump" logic
    setInterval(() => {
        if (window.scrollY > 500) {
            btn.classList.add('jump-animation');
            setTimeout(() => {
                btn.classList.remove('jump-animation');
            }, 1200);
        }
    }, 6000);

    // Click to Top
    btn.addEventListener('click', () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });
});
</script>