/* The next button glows (owner 1.11.2026), the way the picture tutorial
   rings the control to press: a teal ring with a soft halo. lib/motor-cta-glow.js
   puts the class on the one button the pupil should press now. Only
   box-shadow changes, so no button moves or changes size; a calm 1.8 s
   breath in the game's teal (#0E8A7C), never a flash. */
.motor-cta-glow {
  animation: motor-cta-glow 1.8s ease-in-out infinite;
}
@keyframes motor-cta-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(14, 138, 124, 0.5), 0 0 0 2px rgba(14, 138, 124, 0), 0 0 0 0 rgba(14, 138, 124, 0); }
  50% { box-shadow: 0 0 0 3px rgba(14, 138, 124, 0.95), 0 0 0 7px rgba(14, 138, 124, 0.22), 0 0 20px 6px rgba(14, 138, 124, 0.5); }
}
/* A disabled button never glows, even for the moment before the script
   takes the class off. */
.motor-cta-glow:disabled,
.motor-cta-glow[aria-disabled="true"] {
  animation: none;
}
/* Reduced motion: the same ring, still. */
@media (prefers-reduced-motion: reduce) {
  .motor-cta-glow {
    animation: none;
    box-shadow: 0 0 0 3px rgba(14, 138, 124, 0.8), 0 0 10px 2px rgba(14, 138, 124, 0.35) !important;
  }
  .motor-cta-glow:disabled,
  .motor-cta-glow[aria-disabled="true"] { box-shadow: none !important; }
}