@keyframes reveal-on-scroll {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    filter: blur(5px);

  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
/* Apply this to any element you want to animate on scroll */
.info-card, 
.skill-cards-1, 
.skill-cards-2, 
.project-area,
.main-description,
.item-card {
  /* This creates a named timeline for each specific element */
  view-timeline-name: --item-reveal;
  view-timeline-axis: block;

  /* Hook the animation to that timeline */
  animation: reveal-on-scroll linear both;
  animation-timeline: --item-reveal;

  /* This ensures the animation only plays when the element is 
     between 10% and 40% of the way into the screen */
  animation-range: entry 10% cover 40%;
}