/* The breathing circle, one piece shared by both players
   (templates/partials/breath_circle.html): the /meditate player and the
   homepage's visitor player. An 8 second cycle, about 4 in and 4 out, its
   words switching with it. It moves only while the player holds is-playing,
   rests when paused or ended, and is off under prefers-reduced-motion.
   --breath-size is the one thing a player may set. */
.breath-circle { margin: 18px 0 10px; }
.breath-circle__ring { width: var(--breath-size, 96px); height: var(--breath-size, 96px); margin: 0 auto; border-radius: 50%; background: var(--cream-dark); border: 2px solid var(--teal-dark); }
.breath-circle__text { position: relative; height: 1.5em; margin: 10px 0 0; color: var(--text-mid); }
.breath-circle__in, .breath-circle__out { position: absolute; left: 0; right: 0; }
.breath-circle__out { opacity: 0; }
.med-player.is-playing .breath-circle__ring, .visitor-player.is-playing .breath-circle__ring { animation: breath-circle-ring 8s ease-in-out infinite; }
.med-player.is-playing .breath-circle__in, .visitor-player.is-playing .breath-circle__in { animation: breath-circle-in 8s ease-in-out infinite; }
.med-player.is-playing .breath-circle__out, .visitor-player.is-playing .breath-circle__out { animation: breath-circle-out 8s ease-in-out infinite; }
@keyframes breath-circle-ring { 0%, 100% { transform: scale(.72); } 50% { transform: scale(1.1); } }
@keyframes breath-circle-in { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes breath-circle-out { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .med-player.is-playing .breath-circle__ring, .visitor-player.is-playing .breath-circle__ring,
  .med-player.is-playing .breath-circle__in, .visitor-player.is-playing .breath-circle__in,
  .med-player.is-playing .breath-circle__out, .visitor-player.is-playing .breath-circle__out { animation: none; }
  .med-player.is-playing .breath-circle__out, .visitor-player.is-playing .breath-circle__out { opacity: 0; }
  .med-player.is-playing .breath-circle__in, .visitor-player.is-playing .breath-circle__in { opacity: 1; }
}