:root {
  --scroll-btn-bottom: 19px;
  --scroll-btn-right: 20px;

  --btn-size: 54px;    
  --ring-size: 62px;
  --ring-stroke: 4px;

  --hover-lift: -2px;
}

/* WRAPPER */
#backToTopWrapper {
  position: fixed;
  bottom: var(--scroll-btn-bottom);
  right: var(--scroll-btn-right);
  width: var(--ring-size);
  height: var(--ring-size);
  z-index: 999999;
  pointer-events: none;
}

/* RING */
.progress-ring {
  width: var(--ring-size);
  height: var(--ring-size);
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}

.progress-ring__circle {
  fill: none;
  stroke: #7ea2ff;
  stroke-width: var(--ring-stroke);
  transition: stroke-dashoffset 0.2s linear;
  opacity: 0.9;
}

/* MAIN BUTTON */
.back-to-top-circle {
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;

  position: absolute;
  top: calc((var(--ring-size) - var(--btn-size)) / 2);
  left: calc((var(--ring-size) - var(--btn-size)) / 2);

  pointer-events: auto;

  background: rgba(240, 245, 255, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(180, 195, 250, 0.65);

  box-shadow:
      0 6px 14px rgba(0, 0, 0, 0.08),
      0 0 22px rgba(80, 125, 255, 0.35);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.arrow-icon {
  width: calc(var(--btn-size) * 0.45);
  height: calc(var(--btn-size) * 0.45);
  transform: translateY(-1px);
}

/* VISIBLE STATE */
.back-to-top-circle.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* HOVER */
.back-to-top-circle:hover {
  transform: translateY(var(--hover-lift));
}