/* ============================================================
   Ballots — module styles for the redesigned show page: the
   Yes / Unsure / No stance glyphs (entrance / hover / selected
   animations) and the community-pulse bars. Ported from the
   design system; selection is driven by the real radio via
   :has(:checked), so it works without JS.
   ============================================================ */

.stance-glyph { display: block; overflow: visible; }
.stance-glyph .sg-disc,
.stance-glyph .sg-rim,
.stance-glyph .sg-ring,
.stance-glyph .sg-q,
.stance-glyph .sg-check,
.stance-glyph .sg-x {
  transform-box: fill-box;
  transform-origin: center;
}

/* the disc gives a gentle pop on hover / when selected */
.stance-glyph .sg-disc { transition: transform .25s cubic-bezier(.34, 1.4, .64, 1); }
.vote-card:hover .sg-disc,
.vote-card:has(:checked) .sg-disc,
.glyph-animate .sg-disc { transform: scale(1.035); }

/* the check is drawn (dasharray ≥ path length so it's whole at rest) */
.stance-glyph .sg-check { stroke-dasharray: 140; }
@keyframes sg-draw { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
.vote-card:hover .sg-yes .sg-check,
.vote-card:has(:checked) .sg-yes .sg-check,
.glyph-animate .sg-yes .sg-check { animation: sg-draw .5s ease; }

/* NO · gentle X tilt */
@keyframes sg-shake {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(4deg); }
  70%      { transform: rotate(-3deg); }
}
.vote-card:hover .sg-no .sg-x,
.vote-card:has(:checked) .sg-no .sg-x,
.glyph-animate .sg-no .sg-x { animation: sg-shake .45s ease; }

/* UNSURE · soft ring settle + "?" fade-up */
@keyframes sg-tighten {
  0%   { transform: scale(1.06); opacity: .7; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes sg-pop {
  0%   { transform: scale(.92); opacity: .6; }
  100% { transform: scale(1);   opacity: 1; }
}
.vote-card:hover .sg-unsure .sg-ring,
.vote-card:has(:checked) .sg-unsure .sg-ring,
.glyph-animate .sg-unsure .sg-ring { animation: sg-tighten .4s ease; }
.vote-card:hover .sg-unsure .sg-q,
.vote-card:has(:checked) .sg-unsure .sg-q,
.glyph-animate .sg-unsure .sg-q { animation: sg-pop .4s ease; }

/* community-pulse bars grow to their share when the results appear */
.pulse-bar { transition: width .9s cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  .stance-glyph * { animation: none !important; }
  .stance-glyph .sg-disc { transition: none; }
  .pulse-bar { transition: none; }
}