/* Scroll Progress Bar + Back To Top - by Rehmat (Animated Creativity) - MIT License
   Change the look with these variables on :root, .sp-bar or .sp-top               */
.sp-bar {
  --sp-height: 4px;                                                  /* thickness of the bar */
  --sp-color: linear-gradient(90deg, #7c5cff, #22d3ee, #7cf7b5);     /* any colour or gradient */
  --sp-track: transparent;                                           /* colour behind the bar */
  position: fixed; left: 0; right: 0; top: 0; z-index: 9999; height: var(--sp-height);
  background: var(--sp-track); pointer-events: none;
}
.sp-bar::before {
  content: ""; display: block; height: 100%; background: var(--sp-color);
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%; will-change: transform;
}
.sp-bar--bottom { top: auto; bottom: 0; }
[dir="rtl"] .sp-bar::before { transform-origin: 100% 50%; }

.sp-top {
  --sp-size: 52px;            /* size of the round button  */
  --sp-ring: #22d3ee;         /* colour of the progress ring */
  --sp-top-bg: #11131c;       /* button background */
  --sp-top-color: #ffffff;    /* arrow colour */
  position: fixed; right: 20px; bottom: 20px; z-index: 9998; width: var(--sp-size); height: var(--sp-size); padding: 0;
  border: 0; border-radius: 50%; background: var(--sp-top-bg); color: var(--sp-top-color); cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s, transform .3s, visibility .3s;
  -webkit-tap-highlight-color: transparent;
}
.sp-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.sp-top:hover { transform: translateY(-3px); }
.sp-top:focus-visible { outline: 2px solid var(--sp-ring); outline-offset: 3px; }
.sp-top svg { display: block; width: 100%; height: 100%; }
.sp-top .sp-track { fill: none; stroke: currentColor; stroke-opacity: .16; stroke-width: 3; }
.sp-top .sp-ring { fill: none; stroke: var(--sp-ring); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.sp-top .sp-arrow { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-top--left { right: auto; left: 20px; }
@media (prefers-reduced-motion: reduce) { .sp-top { transition: none; } }