/* ============================================================
   The tuner, round 2 (shared/tuner.js; SPEC «The tuner, round 2»)
   ------------------------------------------------------------
   The states are classes on the tuner's group: tuner-live (a voice),
   tuner-ok (within 10 cents), tuner-off (the off-pitch screen). The zone is
   0.28 with no voice, 0.35 with a voice outside it, full inside it. Inside
   it the ring turns green, the check shows and the glow breathes. Motion is
   transform and opacity only.
   ============================================================ */
.tuner-zone { opacity: 0.28; transition: opacity 0.2s ease; }
.tuner-live .tuner-zone,
.tuner-off .tuner-zone { opacity: 0.35; }
.tuner-ok .tuner-zone { opacity: 1; }

.tuner-ring { stroke: var(--lilac-1); }
.tuner-beadhalo { fill: var(--lilac-1); }
.tuner-ok .tuner-ring { stroke: var(--tune-ok); }
.tuner-ok .tuner-beadhalo { fill: var(--tune-ok); }
/* no voice yet: no bead (the off-pitch screen always has one) */
.tuner:not(.tuner-live):not(.tuner-off) .tuner-bead { opacity: 0; }
.tuner-check { opacity: 0; }
.tuner-ok .tuner-check { opacity: 1; }
.tuner-zglow { opacity: 0; transition: opacity 0.2s ease; }
.tuner-ok .tuner-zglow { opacity: 1; }
.tuner-breathe { transform-box: fill-box; transform-origin: center; animation: tuner-breathe 2.2s ease-in-out infinite; }

/* On the off-pitch screen the bead swings toward «کوک» and never settles
   there. The microphone is closed there, so the motion rule allows it. */
.tuner-swing { animation: tuner-swing 3.4s cubic-bezier(0.45, 0, 0.25, 1) 0.3s infinite; }
@keyframes tuner-swing {
  0% { transform: rotate(-46deg); }
  32% { transform: rotate(-10deg); }
  48% { transform: rotate(-19deg); }
  66% { transform: rotate(-7deg); }
  82% { transform: rotate(-14deg); }
  100% { transform: rotate(-46deg); }
}
@keyframes tuner-breathe { 0%, 100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } }

/* reduced motion: the bead rests at -12 cents, the glow is still */
@media (prefers-reduced-motion: reduce) {
  .tuner-swing, .tuner-breathe { animation: none; }
  .tuner-swing { transform: rotate(-16.8deg); }
}