/* Base styles remain the same */
.scroll-reveal-line {
all: unset; /* Clears any weird builder defaults */
  display: block;
  width: fit-content;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.05); 
  padding-left: 1em;
  
  /* The "Ink" Gradient: 
     Pure white for the first half, fading to transparent for the second half */
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 1) 50%, 
    rgba(255, 255, 255, 0) calc(50% + 1em)
  ) no-repeat;

  
  /* Make the background twice as wide as the screen (200vw) 
     so we can truly hide the white part */
  background-size: 200% 100%; 
  background-position: 100% 0%; 
  
  background-clip: text;
  -webkit-background-clip: text;
  
  animation: reveal-text linear both;
  animation-timeline: view();
}

/* Re-syncing your sequential triggers */
.part-1 { animation-range: cover 20% cover 32%; }
.part-2 { animation-range: cover 32% cover 44%; }
.part-3 { animation-range: cover 44% cover 56%; }
.part-4 { animation-range: cover 56% cover 68%; }
.part-5 { animation-range: cover 68% cover 80%; }

@keyframes reveal-text {
  from {
    /* The transparent half of the gradient is over the text */
    background-position: 100% 0%; 
  }
  to {
    /* The white half of the gradient slides fully over the text */
    background-position: 0% 0%; 
  }
}