Ok I have had to change you CSS, hope you dont mind, I have adjusted you JS too, you main issue was that #solutions was covering the whole viewport. TheZIndex is also fixed


(() => {
  const problems = document.getElementById('problems');
  const solutions = document.getElementById('solutions');
  const body = document.body;
  const html = document.documentElement;

  const getScrollY = () => window.pageYOffset || html.scrollTop || body.scrollTop || 0;

  let viewportHeight = window.innerHeight;
  let topOfSolutions = problems.offsetTop + problems.offsetHeight;
  let startReveal = topOfSolutions - viewportHeight;
  let endReveal = topOfSolutions;
  let revealRatio = 0;

  const maxRadius = () => Math.hypot(window.innerWidth / 2, window.innerHeight / 2);

  const setRadius = (r) => {
    const clip = `circle(${r}px at 50% 50%)`;
    solutions.style.clipPath = clip;
    solutions.style.webkitClipPath = clip;

    // **Ensure Problem 5 is visible when scrolling up**
    solutions.style.visibility = r > 0 ? 'visible' : 'hidden';
  };

  window.addEventListener('scroll', () => {
    const currentY = getScrollY();

    if (currentY < startReveal) {
      revealRatio = 0;
      setRadius(0);
      solutions.style.visibility = 'hidden'; // **Problem 5 should be visible**
      return;
    }

    if (currentY > endReveal) {
      revealRatio = 1;
      setRadius(maxRadius());
      solutions.style.visibility = 'visible';
      return;
    }

    revealRatio = (currentY - startReveal) / (endReveal - startReveal);
    setRadius(revealRatio * maxRadius());
  }, { passive: true });

  window.addEventListener('resize', () => {
    viewportHeight = window.innerHeight;
    topOfSolutions = problems.offsetTop + problems.offsetHeight;
    startReveal = topOfSolutions - viewportHeight;
    endReveal = topOfSolutions;
    setRadius(revealRatio * maxRadius());
  });
})();

html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

/* Problems */
#problems {
  scroll-snap-type: y mandatory;
  position: relative;
}

#problems h1 {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 1rem;
  text-align: center;
  z-index: 1;
}

/* Updated class names for each card */
.card1 {
  background: #90caf9;
}

.card2 {
  background: #a5d6a7;
}

.card3 {
  background: #ce93d8;
}

.card4 {
  background: #ffcc80;
}

.card5 {
  background: #ff8a80; /* Adjusted for visibility */
  color: #000; /* Ensuring readable text */
}

/* Common styles for all problem cards */
.card1, .card2, .card3, .card4, .card5 {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
}

<section id="problems">
  <h1>Do you know these problems?</h1>
  <article class="card1">Problem 1</article>
  <article class="card2">Problem 2</article>
  <article class="card3">Problem 3</article>
  <article class="card4">Problem 4</article>
  <article class="card5">Problem 5</article>
</section>

<!-- fixed layer revealed by the circle -->
<section id="solutions">
  <h2>Solution</h2>
</section>