@media (prefers-reduced-motion: no-preference) {
  main > section {
    animation-name: fade-in;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 400px;
  }
}

@keyframes fade-in {
  from {
    scale: 0.95;
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    scale: 1;
    opacity: 1;
    transform: translateY(0);
  }
}