/* ============================================================
   FOLIO PRO — Scroll Badge / Back to Top
   Position controlled via body data-badge-pos attribute
   set from Customizer. The badge shows scroll % and morphs
   into a back-to-top button at 100%.
============================================================ */

/* ── Base badge ─────────────────────────────────────────── */
.scroll-badge {
  position: fixed;
  z-index: 900;
  width:  var(--badge-size, 64px);
  height: var(--badge-size, 64px);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.scroll-badge.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* ── Positions ──────────────────────────────────────────── */
/* bottom-right (default) */
[data-badge="bottom-right"]   .scroll-badge { bottom: 32px; right: 32px; }
[data-badge="bottom-left"]    .scroll-badge { bottom: 32px; left:  32px; }
[data-badge="bottom-center"]  .scroll-badge { bottom: 32px; left: 50%; transform: translateX(-50%) scale(0.7); }
[data-badge="bottom-center"]  .scroll-badge.visible { transform: translateX(-50%) scale(1); }
[data-badge="top-right"]      .scroll-badge { top: 100px; right: 32px; }
[data-badge="top-left"]       .scroll-badge { top: 100px; left:  32px; }
[data-badge="top-center"]     .scroll-badge { top: 100px; left: 50%; transform: translateX(-50%) scale(0.7); }
[data-badge="top-center"]     .scroll-badge.visible { transform: translateX(-50%) scale(1); }
[data-badge="left-center"]    .scroll-badge { top: 50%; left:  32px; transform: translateY(-50%) scale(0.7); }
[data-badge="left-center"]    .scroll-badge.visible { transform: translateY(-50%) scale(1); }
[data-badge="right-center"]   .scroll-badge { top: 50%; right: 32px; transform: translateY(-50%) scale(0.7); }
[data-badge="right-center"]   .scroll-badge.visible { transform: translateY(-50%) scale(1); }

/* ── SVG ring ───────────────────────────────────────────── */
.scroll-badge svg {
  width: var(--badge-size, 64px);
  height: var(--badge-size, 64px);
  transform: rotate(-90deg);
}
.scroll-badge .ring-bg {
  fill: none;
  stroke: rgba(124, 58, 237, 0.15);
  stroke-width: 3;
}
.scroll-badge .ring-fill {
  fill: none;
  stroke: var(--color-accent, #7C3AED);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 163; /* circumference of r=26 circle */
  stroke-dashoffset: 163;
  transition: stroke-dashoffset .2s linear;
}

/* ── Inner circle / label ───────────────────────────────── */
.scroll-badge-inner {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--color-surface, #1E1E2A);
  border: 1px solid rgba(124, 58, 237, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, border-color .3s;
}
.scroll-badge:hover .scroll-badge-inner {
  background: var(--color-accent, #7C3AED);
  border-color: var(--color-accent, #7C3AED);
}

/* ── Percentage text ────────────────────────────────────── */
.scroll-badge-pct {
  font-family: var(--font-main, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent, #7C3AED);
  letter-spacing: -.02em;
  transition: color .3s, opacity .3s, transform .3s;
  user-select: none;
}
.scroll-badge:hover .scroll-badge-pct {
  color: #fff;
}

/* ── Arrow (shown when at 100%) ─────────────────────────── */
.scroll-badge-arrow {
  position: absolute;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s;
  color: var(--color-accent, #7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scroll-badge:hover .scroll-badge-arrow {
  color: #fff;
}

/* At 100%: hide % text, show arrow */
.scroll-badge.at-top .scroll-badge-pct  { opacity: 0; transform: translateY(-4px); }
.scroll-badge.at-top .scroll-badge-arrow { opacity: 1; transform: translateY(0); }
.scroll-badge.at-top .ring-fill { stroke: var(--color-accent, #7C3AED); }
.scroll-badge.at-top .scroll-badge-inner { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.4); }
.scroll-badge.at-top:hover .scroll-badge-inner { background: var(--color-accent, #7C3AED); }

/* ── Pulse ring on at-top ───────────────────────────────── */
.scroll-badge.at-top::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid var(--color-accent, #7C3AED);
  opacity: 0;
  animation: badge-pulse 2s ease infinite;
}
@keyframes badge-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  100% { transform: scale(1.4); opacity: 0;  }
}