<div class="gradient-mask">
  <slot />
</div>

<script>
  function updateMask() {
    const mask = document.querySelector('.gradient-mask') as HTMLElement
    const threshold = 64
    const scrollY = window.scrollY

    if (scrollY >= threshold) {
      mask.style.opacity = '1'
    } else {
      mask.style.opacity = '0'
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    updateMask()
    window.addEventListener('scroll', updateMask)
  })
</script>

<style>
  .gradient-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    z-index: 99;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      rgba(0, 0, 0, 0.8) 20%,
      rgba(0, 0, 0, 0.6) 40%,
      rgba(0, 0, 0, 0.4) 60%,
      rgba(0, 0, 0, 0.2) 80%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      rgba(0, 0, 0, 0.8) 20%,
      rgba(0, 0, 0, 0.6) 40%,
      rgba(0, 0, 0, 0.4) 60%,
      rgba(0, 0, 0, 0.2) 80%,
      transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }
</style>
