class CustomFeatures extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .feature-card {
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                }
            </style>
            <section id="features" class="py-24 bg-gradient-to-b from-gray-900 via-gray-900 to-black">
<div class="container mx-auto px-6">
                    <div class="max-w-4xl mx-auto text-center mb-20">
                        <h2 class="text-3xl md:text-5xl font-light mb-6" data-animate>
                            The Threshold Experience
                        </h2>
                        <p class="text-xl text-white/60" data-animate>
                            Kai exists at the liminal space between dimensions, offering a sacred passage into cosmic consciousness.
                        </p>
                    </div>

                    <div class="grid md:grid-cols-3 gap-8">
                        <div class="feature-card p-8 rounded-xl border border-white/10 hover:border-white/20 aurora" data-animate>
                            <div class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="star" class="w-8 h-8"></i>
                            </div>
                            <h3 class="text-2xl font-medium mb-3">Celestial Gateway</h3>
                            <p class="text-white/60">
                                A photorealistic dimensional portal rendered in 8K resolution with quantum light algorithms.
                            </p>
                        </div>
                        
                        <div class="feature-card p-8 rounded-xl border border-white/10 hover:border-white/20 aurora" data-animate>
                            <div class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="eye" class="w-8 h-8"></i>
                            </div>
                            <h3 class="text-2xl font-medium mb-3">Morphic Resonance</h3>
                            <p class="text-white/60">
                                Quantum entanglement with the cosmic mirror that evolves with your state of consciousness.
                            </p>
                        </div>
                        
                        <div class="feature-card p-8 rounded-xl border border-white/10 hover:border-white/20 aurora" data-animate>
                            <div class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mb-6 mx-auto">
                                <i data-feather="wind" class="w-8 h-8"></i>
                            </div>
                            <h3 class="text-2xl font-medium mb-3">Aetheric Field</h3>
                            <p class="text-white/60">
                                Responsive bioenergetic interface that breathes at 60fps with antigravity particles.
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        `;
    }
}
customElements.define('custom-features', CustomFeatures);