/* 1. Define the animation look */
@keyframes reveal-on-scroll {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 2. Bind it to the scroll view */
.animate-me {
  /* Run the keyframe natively */
  animation-name: reveal-on-scroll;
  animation-timing-function: linear;
  
  /* Retain final state after scrolling past */
  animation-fill-mode: both; 
  
  /* Link animation progress to the viewport entry */
  animation-timeline: view(); 
  
  /* Controls start/end points (starts at 5% viewport entry, finishes at 40%) */
  animation-range: entry 5% cover 40%; 
}