/* Project section scroll motion */

@keyframes project-section-scroll-in {
  0% {
    opacity: 0.16;
    filter: blur(0.24rem);
    translate: 0 3.75rem;
    scale: 0.985;
  }

  20% {
    opacity: 0.4;
    filter: blur(0.18rem);
    translate: 0 2.75rem;
    scale: 0.989;
  }

  58% {
    opacity: 0.82;
    filter: blur(0.065rem);
    translate: 0 0.9rem;
    scale: 0.997;
  }

  82%,
  100% {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
  }
}

@keyframes project-final-scroll-in {
  0% {
    opacity: 0.18;
    filter: blur(0.22rem);
    translate: 0 3.25rem;
    scale: 0.987;
  }

  24% {
    opacity: 0.48;
    filter: blur(0.15rem);
    translate: 0 2.1rem;
    scale: 0.992;
  }

  56% {
    opacity: 0.86;
    filter: blur(0.045rem);
    translate: 0 0.55rem;
    scale: 0.998;
  }

  72%,
  100% {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
  }
}

@supports (animation-timeline: view()) {
  body:is(
    .bubble-study,
    .convection-study,
    .maze-study,
    .md-study,
    .diff-study,
    .mc-study
  )
  main > section:not(:first-of-type) > .site {
    animation:
      project-section-scroll-in
      1ms
      linear
      both !important;
    animation-timeline: view() !important;
    animation-range: entry 10% cover 48% !important;
  }

  body:is(
    .bubble-study,
    .convection-study,
    .maze-study,
    .md-study,
    .diff-study,
    .mc-study
  )
  main > section:last-of-type > .site {
    animation-name: project-final-scroll-in !important;
    animation-range: entry 5% cover 34% !important;
  }
}