*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #000000;
  color: #ffffff;
  margin: 0;
}

.spacer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #6b7280;
}

.reveal-section {
  height: 200vh;
  position: relative;
}

.sticky-text {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

#text-paragraph {
  max-width: 800px;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

#text-paragraph span {
  opacity: 0.15;
  transition: opacity 0.1s;
}

const container = document.getElementById("reveal-container");
const spans = document.getElementById("text-paragraph").getElementsByTagName("span");

window.addEventListener("scroll", function() {
  const rect = container.getBoundingClientRect();
  const top = rect.top;
  const height = rect.height - window.innerHeight;
  
  // Only calculate when container is in view
  if (top <= window.innerHeight && top >= -height) {
    // Calculate progress from 0 to 1
    let progress = -top / height;
    
    // Clamp values
    if (progress < 0) progress = 0;
    if (progress > 1) progress = 1;
    
    const totalSpans = spans.length;
    
    // Update each word opacity based on scroll percentage
    for (let i = 0; i < totalSpans; i++) {
      const threshold = i / totalSpans;
      if (progress > threshold) {
        spans.item(i).style.opacity = "1";
      } else {
        spans.item(i).style.opacity = "0.15";
      }
    }
  }
});