/* breathe — box-breathing pacer: 16s cycle, four equal phases (in / hold / out / hold).
   One red circle, one word at a time. */
.bbreathe { display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  padding: 2rem 0 1.2rem; }
.bb-dot { width: 84px; height: 84px; border-radius: 50%; background: #C25450;
  transform: scale(0.55); animation: bb-scale 16s infinite; }
@keyframes bb-scale {
  0%   { transform: scale(0.55); animation-timing-function: ease-in-out; } /* in */
  25%  { transform: scale(1);    animation-timing-function: steps(1, end); } /* hold */
  50%  { transform: scale(1);    animation-timing-function: ease-in-out; } /* out */
  75%  { transform: scale(0.55); animation-timing-function: steps(1, end); } /* hold */
  100% { transform: scale(0.55); }
}
.bb-labels { position: relative; height: 1.4em; margin: 0; width: 100%; text-align: center;
  color: #8B8680; font-size: 0.95rem; }
.bb-labels span { position: absolute; inset: 0; opacity: 0; animation: bb-word 16s infinite; }
.bb-labels span:nth-child(1) { animation-delay: 0s; }
.bb-labels span:nth-child(2) { animation-delay: 4s; }
.bb-labels span:nth-child(3) { animation-delay: 8s; }
.bb-labels span:nth-child(4) { animation-delay: 12s; }
@keyframes bb-word {
  0%, 23% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-dot { animation: none; }
  .bb-labels span { animation: none; position: static; opacity: 1; }
  .bb-labels span + span::before { content: " · "; }
}