// ==UserScript==
// @name         Duolingo Button Animations
// @namespace    http://tampermonkey.net/
// @description  Adds cool animations to buttons in Duolingo
// @author       Your Name
// @match        https://www.duolingo.com/*
// @grant        GM_addStyle
// @license      Redistribution prohibited
// @version      0.1
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        .button-animation {
            transition: transform 0.2s ease-in-out, background-color 0.3s;
            background-color: orange;
            color: white;
            border-radius: 8px;
            padding: 10px 20px;
            cursor: pointer;
            position: relative;
        }

        .button-animation:hover {
            background-color: darkorange;
        }

        .button-animation::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            transition: opacity 0.2s;
            opacity: 0;
        }

        .button-animation:hover::after {
            opacity: 1;
        }

        .button-animation.magnetic {
            transition: transform 0.1s ease-in-out;
        }
    `);

    document.addEventListener('mousemove', function(e) {
        const buttons = document.querySelectorAll('.button-animation');
        buttons.forEach(button => {
            const rect = button.getBoundingClientRect();
            const x = e.clientX - rect.left - rect.width / 2;
            const y = e.clientY - rect.top - rect.height / 2;
            button.style.transform = `translate(${x * 0.1}px, ${y * 0.1}px)`;
        });
    });

    const observer = new MutationObserver(() => {
        const buttons = document.querySelectorAll('button');
        buttons.forEach(button => {
            if (!button.classList.contains('button-animation')) {
                button.classList.add('button-animation');
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();