class BackgroundClouds extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    pointer-events: none;
                    z-index: -1;
                    overflow: hidden;
                    background: linear-gradient(135deg, var(--sky-gradient-start), var(--sky-gradient-end));
                    animation: sky-pulse 30s ease infinite;
                    background-size: 200% 200%;
                }
                
                @keyframes sky-pulse {
                    0%, 100% {
                        background-position: 0% 50%;
                    }
                    50% {
                        background-position: 100% 50%;
                    }
                }
.bg-cloud {
                    position: absolute;
                    background: white;
                    border-radius: 50%;
                    opacity: 0.4;
                    filter: blur(5px);
                    animation: float 20s linear infinite;
                }
                
                .bg-cloud::before, .bg-cloud::after {
                    content: '';
                    position: absolute;
                    background: white;
                    border-radius: 50%;
                }
                
                @keyframes float {
                    0% { transform: translateX(0) translateY(0); }
                    25% { transform: translateX(5%) translateY(-3%); }
                    50% { transform: translateX(10%) translateY(0); }
                    75% { transform: translateX(5%) translateY(3%); }
                    100% { transform: translateX(0) translateY(0); }
                }
            </style>
            <div id="clouds-container"></div>
        `;
        
        this.createClouds();
    }

    createClouds() {
        const container = this.shadowRoot.getElementById('clouds-container');
        const width = window.innerWidth;
        const height = window.innerHeight;
        
        for (let i = 0; i < 20; i++) {
            const cloud = document.createElement('div');
            const size = Math.random() * 150 + 50;
            const opacity = Math.random() * 0.5 + 0.1;
            const left = Math.random() * width;
            const top = Math.random() * height;
            const duration = Math.random() * 30 + 30;
            
            cloud.className = 'bg-cloud';
            cloud.style.width = `${size}px`;
            cloud.style.height = `${size * 0.6}px`;
            cloud.style.left = `${left}px`;
            cloud.style.top = `${top}px`;
            cloud.style.opacity = opacity;
            cloud.style.animationDuration = `${duration}s`;
            cloud.style.animationDelay = `${Math.random() * 20}s`;
            
            container.appendChild(cloud);
        }
    }
}

customElements.define('background-clouds', BackgroundClouds);