@supports (animation-timeline: scroll()) {
  /* Keyframs */
  @keyframes fadeToTop {
    to {
      opacity: 0.1;
    }
  }
  @keyframes scaleToTopAndfadeToTop {
    from {
      scale: 1;
      perspective: 0px;
      opacity: 1;
    }
    to {
      scale: 1.5;
      opacity: 0.1;
      perspective: 800px;
    }
  }
  @keyframes fadeToRight {
    from {
      opacity: 1;
      right: 0%;
    }
    to {
      opacity: 0;
      right: -100%;
    }
  }

  @keyframes expandIn {
    to {
      right: 0ch;
    }
  }
  @keyframes collapseOut {
    to {
      right: calc(100% - 0.9ch);
    }
  }
  @keyframes expandOverlay {
    to {
      bottom: 0%;
    }
  }
  @keyframes experineceLine {
    from {
      top: 2.5%;
      bottom: 84%;
    }
    to {
      top: 2.5%;
      bottom: 0%;
    }
  }
  @keyframes experineceLineFirstPage {
    from {
      top: 0%;
      bottom: 84%;
    }
    to {
      top: 0%;
      bottom: calc(0% + var(--curve-size));
    }
  }
  @keyframes bottomLine {
    0% {
      left: calc(100% - var(--curve-size));
    }
    1% {
      clip-path: inset(0px 0px 0px 0px);
    }
    100% {
      left: 8px;
      clip-path: inset(0px 0px 0px 0px);
    }
  }
  @keyframes curveAnimateBottomRight {
    0% {
      clip-path: inset(0px 0px var(--curve-size) 0px);
    }

    100% {
      clip-path: inset(0px 0px 0px 0px);
    }
  }
  @keyframes curveAnimateTopLeft {
    0% {
      clip-path: inset(var(--curve-size) 0px 0px 0px);
    }

    100% {
      clip-path: inset(0px 0px 0px 0px);
    }
  }
  html {
    scroll-timeline-name: --root-scroll;
  }
  .transition-underline::before {
    animation: expandIn both;
    animation-timeline: --root-scroll;
    animation-range: 10% 20%;
  }
  .overlay {
    animation: expandOverlay both;
    animation-timeline: --root-scroll;
    animation-range: 0% 20%;
  }
  .first-page {
    .first-page__experience-line {
      animation: experineceLineFirstPage both;
      animation-timeline: --root-scroll;
      animation-range: 0% 15%;
    }
    .curve__bottom-right {
      animation: curveAnimateBottomRight both;
      animation-timeline: --root-scroll;
      animation-range: 12% 31%;
    }

    .first-page__bottom-line {
      animation: bottomLine both;
      animation-timeline: --root-scroll;
      animation-range: 27% 37%;
    }
  }
  .socials-links:nth-child(1) {
    animation: fadeToRight both;
    animation-timeline: --root-scroll;
    animation-range: 15% 100%;
  }
  .socials-links:nth-child(2) {
    animation: fadeToRight both;
    animation-timeline: --root-scroll;
    animation-range: 20% 100%;
  }
  .socials-links:nth-child(3) {
    animation: fadeToRight both;
    animation-timeline: --root-scroll;
    animation-range: 25% 100%;
  }
  .work-experience__item-line {
    animation: experineceLine both;
    animation-timeline: --root-scroll;
    animation-range: 30% 100%;
  }
  .curve__top-left {
    animation: curveAnimateTopLeft both;
    animation-timeline: --root-scroll;
    animation-range: 30% 40%;
  }
}