/* Scroll Progress - Futuristic floating circular indicator */
:root{
  --sp-size: clamp(64px, 7.6vw, 88px);
  --sp-glass: rgba(255,255,255,0.06);
  --sp-border: rgba(255,255,255,0.12);
  --sp-accent-1: #7ee7d9; /* aquamarine */
  --sp-accent-2: #33d8ff; /* cyan */
  --sp-accent-3: #ff6bc9; /* pink */
  --sp-accent-4: #8b5cf6; /* purple */
  --sp-shadow: 0 10px 30px rgba(139,92,246,0.08);
  --sp-glow: 0 8px 28px rgba(126,231,217,0.12);
}

.sp-wrap{
  position:fixed;
  right:clamp(14px,3.2vw,28px);
  bottom:var(--sp-bottom,28px);
  width:var(--sp-size);
  height:var(--sp-size);
  z-index:10000;
  display:grid;
  place-items:center;
  pointer-events:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(0.98);
  transition:opacity 360ms cubic-bezier(.2,.9,.2,1), transform 320ms cubic-bezier(.2,.9,.2,1), visibility 360ms;
}

.sp-wrap.sp-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.sp-card{
  width:100%;height:100%;border-radius:50%;position:relative;display:block;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid var(--sp-border);
  box-shadow:var(--sp-shadow), var(--sp-glow);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  overflow:hidden;display:grid;place-items:center;cursor:pointer;user-select:none
}

.sp-svg{width:86%;height:86%;display:block}

/* Outer pulsing glow */
.sp-card::after{content:"";position:absolute;inset:auto -6px -6px -6px;border-radius:50%;background:radial-gradient(circle at 30% 20%, rgba(126,231,217,0.16), transparent 30%);filter:blur(12px);opacity:0.9;pointer-events:none}

/* Floating subtle animation */
@keyframes sp-float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.sp-card{animation:sp-float 6s ease-in-out infinite both}

/* Pulse for outer ring */
@keyframes sp-pulse{0%{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}50%{filter:drop-shadow(0 8px 28px rgba(126,231,217,0.16))}100%{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}}
.sp-ring{animation:sp-pulse 2.8s ease-in-out infinite}

/* Percentage text */
.sp-perc{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:Manrope,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:linear-gradient(90deg,var(--sp-accent-1),var(--sp-accent-2));font-weight:700;font-size:clamp(13px,2.6vw,16px)}
.sp-perc .num{font-size:1.05em;letter-spacing:-0.02em}
.sp-perc .label{display:block;font-size:0.58em;opacity:0.7;margin-top:2px;font-weight:600}

/* Wave mask styling (SVG) */
.sp-wave{transform-origin:center bottom;transition:transform 360ms cubic-bezier(.2,.9,.2,1)}
.sp-wave-move{animation:sp-wave-x 3.2s linear infinite; will-change: transform}
@keyframes sp-wave-x{0%{transform:translateX(-10%)}50%{transform:translateX(0%)}100%{transform:translateX(-10%)}}

/* Hover scale */
.sp-card:hover{transform:scale(1.04)}

/* When auto-scrolling: pause heavy animations for performance */
.sp-wrap.sp-scrolling .sp-wave-move,
.sp-wrap.sp-scrolling .sp-ring{
  animation-play-state:paused !important;
  transition:none !important;
}

/* Ensure percentage-only layout */
.sp-perc{pointer-events:none}
.sp-perc .label{display:none}


/* Accessibility: reduce motion */
@media (prefers-reduced-motion:reduce){.sp-card,.sp-ring,.sp-wave{animation:none;transition:none}}

/* Responsive tweaks */
@media (max-width:520px){:root{--sp-size:56px}.sp-perc{font-size:13px}}