@property --progress {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes progress {
  0% {
    --progress: 0%;
  }
  100% {
    --progress: 100%;
  }
}

.back-to-top {
  --white: oklch(100% 0 0);
  --dark: oklch(0.2751 0.0736 283.75);
  background-image: linear-gradient(var(--white) 0% var(--progress), var(--dark) var(--progress) 100%);
  inset: auto 1.25rem 1.25rem auto;
  animation: progress linear;
  animation-timeline: scroll();
  position: fixed;
  z-index: 30;
  display: flex;
  aspect-ratio: 1 / 1;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  color: var(--bluedark);
}

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover {
    opacity: 1;
  }
}

@supports not (animation-timeline: scroll()) {
  .back-to-top {
    background: var(--white);
  }
}