/* BreathOrb animation — see src/components/breath-orb.js. */

.breath-orb {
  display: block;
  filter: drop-shadow(0 12px 30px rgba(29, 158, 117, 0.28));
  animation: breath-orb-breath 8600ms infinite;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes breath-orb-breath {
  /* start of inhale */
  0%    { transform: scale(0.85); opacity: 0.78; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
  /* end of inhale (3.4 / 8.6 = 39.5%) */
  39.5% { transform: scale(1.15); opacity: 1.0; animation-timing-function: linear; }
  /* end of hold peak (4.0 / 8.6 = 46.5%) */
  46.5% { transform: scale(1.15); opacity: 1.0; animation-timing-function: cubic-bezier(0.4, 0, 0.7, 1); }
  /* end of exhale (8.2 / 8.6 = 95.3%) */
  95.3% { transform: scale(0.85); opacity: 0.78; animation-timing-function: linear; }
  /* end of hold trough */
  100%  { transform: scale(0.85); opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  .breath-orb { animation: none; transform: scale(1); opacity: 1; }
}