components/scroll-progress.js

class CustomScrollProgress extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            z-index: 9999;
            pointer-events: none;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #EAB308, #CA8A04);
            width: 0%;
            transition: width 0.1s ease-out;
            box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
        }
      </style>
      <div class="progress-bar" id="progress-bar"></div>
    `;

    const progressBar = this.shadowRoot.getElementById('progress-bar');
    
    window.addEventListener('scroll', () => {
      const scrollTop = window.scrollY;
      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
      const progress = (scrollTop / docHeight) * 100;
      progressBar.style.width = `${progress}%`;
    });
  }
}
customElements.define('custom-scroll-progress', CustomScrollProgress);