.custom-viewpoint-animation {
  transform: scale(0.7);
  filter: blur(280px);
  opacity: 0;

  will-change: transform, filter, opacity;
  transform-origin: center;
  backface-visibility: hidden;
}

@keyframes customViewpoint {
  
  0% {
    transform: scale(0.7);
    filter: blur(280px);
    opacity: 0;
  }

  
  100% {
    transform: scale(1);
    filter: blur(0px);
    opacity: 1;
  }  }

@supports (animation-timeline: view()) {
  .custom-viewpoint-animation {
    animation-name: customViewpoint;
    animation-duration: 1ms; 
    animation-fill-mode: both;

    
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

    animation-timeline: view();

    
    animation-range: entry -30% entry 140%;
  }
}


@media (prefers-reduced-motion: reduce) {
  .custom-viewpoint-animation {
    animation: none !important;
    transform: none;
    filter: none;
    opacity: 1;
  }
}