class CustomHero extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          height: 150vh;
          min-height: 1000px;
          background: linear-gradient(to bottom, #000000, #0a0a0a);
          overflow: hidden;
          position: relative;
        }
.particle {
          position: absolute;
          width: 1px;
          height: 1px;
          background: rgba(0, 198, 255, 0.5);
          border-radius: 50%;
          filter: blur(0.5px);
          will-change: transform, opacity;
        }

        .logo-container {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          will-change: transform;
        }
        .logo {
          width: 400px;
          height: 400px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          animation: pulse 6s ease-in-out infinite, rotate 60s linear infinite;
          filter: drop-shadow(0 0 40px rgba(0, 198, 255, 0.7));
        }
.logo svg {
          filter: drop-shadow(0 0 20px rgba(0, 198, 255, 0.7));
        }

        @keyframes pulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.05); }
        }

        @keyframes rotate {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        .tagline {
          position: absolute;
          top: 65%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'SF Pro Display', sans-serif;
          font-weight: 300;
          font-size: 5vw;
          letter-spacing: 1em;
          color: white;
          opacity: 0.9;
          text-align: center;
          text-shadow: 0 0 30px rgba(0, 198, 255, 0.5);
          z-index: 2;
          will-change: transform;
          text-transform: uppercase;
        }
.cta-container {
          position: absolute;
          top: 80%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          will-change: transform;
        }
        .glass-card {
          backdrop-filter: blur(30px);
          background: linear-gradient(135deg, rgba(0, 198, 255, 0.1), rgba(0, 114, 255, 0.05));
          border: 1px solid rgba(0, 198, 255, 0.3);
          border-radius: 24px;
          padding: 2.5rem 3rem;
          transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
          max-width: 600px;
          margin: 0 auto;
          box-shadow: 0 20px 50px rgba(0, 198, 255, 0.1);
        }
.glass-card:hover {
          transform: scale(1.02);
          box-shadow: 0 20px 40px rgba(0, 198, 255, 0.1);
        }
        .cta-button {
          background: linear-gradient(135deg, #00c6ff, #0072ff);
          color: white;
          padding: 20px 40px;
          border-radius: 100px;
          font-family: 'SF Pro Display', sans-serif;
          font-weight: 600;
          font-size: 18px;
          letter-spacing: 1.5px;
          border: none;
          cursor: pointer;
          transition: all 0.3s ease;
          filter: drop-shadow(0 4px 30px rgba(0, 198, 255, 0.5));
          position: relative;
          overflow: hidden;
        }
        
        .cta-button::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
          animation: shine 3s infinite;
          transform: rotate(30deg);
        }

        @keyframes shine {
          0% { transform: translateX(-100%) rotate(30deg); }
          100% { transform: translateX(100%) rotate(30deg); }
        }
.cta-button:hover {
          filter: drop-shadow(0 6px 24px rgba(0, 198, 255, 0.5));
          transform: translateY(-2px);
        }

        .scroll-indicator {
          position: absolute;
          bottom: 40px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 2;
          opacity: 0.6;
          animation: bounce 2s infinite;
        }

        @keyframes bounce {
          0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
          40% { transform: translateY(-20px) translateX(-50%); }
          60% { transform: translateY(-10px) translateX(-50%); }
        }
        @media (max-width: 768px) {
          .logo {
            width: 300px;
            height: 300px;
          }

          .tagline {
            font-size: 28px;
            letter-spacing: 0.5em;
          }
        }

        @media (max-width: 480px) {
          .logo {
            width: 250px;
            height: 250px;
          }

          .tagline {
            font-size: 24px;
            width: 90%;
          }
          
          .glass-card {
            padding: 1.5rem;
          }
        }
</style>

      <section class="hero">
        <div class="logo-container">
          <div class="logo">
            <svg width="100%" height="100%" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M150 50L50 250H250L150 50Z" fill="#00C6FF" opacity="0.15" stroke="#00C6FF" stroke-width="6" stroke-linejoin="round"/>
              <text x="50%" y="60%" dominant-baseline="middle" text-anchor="middle" font-family="SF Pro Display" font-size="120" fill="#00C6FF" font-weight="700" stroke="#0072FF" stroke-width="2">KAI</text>
</svg>
          </div>
        </div>
        <div class="tagline">REINVENTING REALITY</div>
<div class="cta-container">
          <div class="glass-card">
            <button class="cta-button">ACTIVATE PORTAL</button>
          </div>
</div>

        <div class="scroll-indicator">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 19V5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M5 12L12 19L19 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </section>
    `;

    this.createParticles();
    this.initParallax();
  }

  createParticles() {
    const particleCount = 30;
    const colors = ['rgba(0, 198, 255, 0.5)', 'rgba(0, 114, 255, 0.5)', 'rgba(255, 255, 255, 0.3)'];
    
    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');
      
      // Random position
      const x = Math.random() * 100;
      const y = Math.random() * 100;
      
      // Random size
      const size = Math.random() * 2;
      
      // Random color
      const color = colors[Math.floor(Math.random() * colors.length)];
      
      // Random animation
      const duration = 20 + Math.random() * 40;
      const delay = Math.random() * 10;
      
      particle.style.left = `${x}%`;
      particle.style.top = `${y}%`;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;
      particle.style.background = color;
      particle.style.animation = `float ${duration}s linear ${delay}s infinite`;
      
      // Add animation
      const keyframes = `
        @keyframes float {
          0% {
            transform: translate(0, 0);
            opacity: 1;
          }
          100% {
            transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px);
            opacity: 0;
          }
        }
      `;
      
      const style = document.createElement('style');
      style.innerHTML = keyframes;
      this.shadowRoot.appendChild(style);
      
      this.shadowRoot.appendChild(particle);
    }
  }

  initParallax() {
    const logoContainer = this.shadowRoot.querySelector('.logo-container');
    const tagline = this.shadowRoot.querySelector('.tagline');
    const ctaContainer = this.shadowRoot.querySelector('.cta-container');
    const scrollIndicator = this.shadowRoot.querySelector('.scroll-indicator');

    window.addEventListener('scroll', () => {
      const scrollY = window.scrollY;
      const rotation = scrollY * 0.05;
      const translateY = scrollY * 0.1;

      if (logoContainer) logoContainer.style.transform = `translate(-50%, calc(-50% + ${translateY}px)) rotate(${rotation}deg)`;
      if (tagline) tagline.style.transform = `translate(-50%, calc(-50% + ${translateY}px))`;
      if (ctaContainer) ctaContainer.style.transform = `translate(-50%, calc(-50% + ${translateY * 0.8}px))`;
      if (scrollIndicator) scrollIndicator.style.opacity = `${1 - scrollY * 0.01}`;
    });
  }
}
`;
  }
}
customElements.define('custom-hero', CustomHero);