/*
 * voltScoreRing.css
 * ─────────────────────────────────────────────────────────────────
 * Styles for the reusable VoltScoreRing component.
 * Pair with js/VoltScoreRing.js on any page using the ring.
 * ─────────────────────────────────────────────────────────────────
 */

/* ── Wrapper ────────────────────────────────────────────────────── */
.vsr-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Ring area ──────────────────────────────────────────────────── */
.vsr-ring-area {
  flex-shrink: 0;
  /* width/height driven by SVG attributes — overrideable in media queries */
}

.vsr-svg {
  display: block;
  /* Crisp rendering on high-DPI */
  shape-rendering: geometricPrecision;
}

/* ── Progress arc — will-change for smooth rAF animation ────────── */
.vsr-arc {
  will-change: stroke-dashoffset;
}

/* ── Glow ring — pulsing halo after animation ───────────────────── */
.vsr-glow {
  pointer-events: none;
  /* opacity and transition set by JS */
}

/* CSS pulse: gentle, not gamified */
@keyframes vsrGlowPulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.38; }
}

.vsr-glow.vsr-glowing {
  animation: vsrGlowPulse 3.8s ease-in-out infinite;
}

/* ── Potential arc — opacity animated by JS ─────────────────────── */
.vsr-pot-arc {
  pointer-events: none;
  /* opacity and transition set by JS */
}

/* ── Potential score row ────────────────────────────────────────── */
.vsr-potential-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 11px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(18,160,94,0.18);
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(10,74,46,0.07);
  transform: translateY(4px);
}

.vsr-pot-current {
  font-size: 0.65rem;
  font-weight: 600;
  color: #9ebaad;
  letter-spacing: 0.01em;
}

.vsr-pot-arrow {
  flex-shrink: 0;
  opacity: 0.55;
}

.vsr-pot-future {
  font-size: 0.65rem;
  font-weight: 700;
  color: #0a4a2e;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.01em;
}

.vsr-pot-tag {
  font-size: 0.58rem;
  font-weight: 600;
  color: #12a05e;
  background: #e8f5ee;
  border-radius: 100px;
  padding: 1px 5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Hero roadmap strip ─────────────────────────────────────────── */
.vs-roadmap-strip {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  position: relative;
  z-index: 3;
}

.vs-roadmap-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.77rem;
  color: #4a5a50;
  padding: 6px 11px;
  background: rgba(255,255,255,0.88);
  border: 1px solid #d6e6db;
  border-radius: 9px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.vs-roadmap-label {
  flex: 1;
  line-height: 1.3;
}

.vs-roadmap-pts {
  font-weight: 700;
  color: #12a05e;
  font-size: 0.73rem;
  white-space: nowrap;
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 780px) {

  /* Scale SVG by overriding presentation attributes (no !important needed) */
  .vsr-svg {
    width: 120px;
    height: 120px;
  }

  /* Reduce glow intensity on mobile */
  @keyframes vsrGlowPulse {
    0%, 100% { opacity: 0.12; }
    50%      { opacity: 0.28; }
  }

  .vsr-potential-row {
    padding: 3px 9px;
    gap: 4px;
    margin-top: 6px;
  }

  .vsr-pot-current,
  .vsr-pot-future {
    font-size: 0.6rem;
  }

  .vs-roadmap-strip {
    max-width: 100%;
  }

}

@media (max-width: 480px) {
  .vsr-svg {
    width: 100px;
    height: 100px;
  }

  .vsr-potential-row {
    margin-top: 8px;
  }
}