/* ============================================
   BREATHING ANIMATIONS - ZEN LUXURY
   ============================================ */

/* Inhale Animation - Circle grows smoothly */
.breathing-circle.inhale {
  animation: pulse-inhale var(--duration-breath) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards,
             glow-pulse var(--duration-breath) ease-in-out forwards;
}

/* Exhale Animation - Circle shrinks smoothly */
.breathing-circle.exhale {
  animation: pulse-exhale var(--duration-breath) cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards,
             glow-pulse var(--duration-breath) ease-in-out forwards;
}

/* Scale Keyframes */
@keyframes pulse-inhale {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

@keyframes pulse-exhale {
  from {
    transform: scale(1.5);
  }
  to {
    transform: scale(1);
  }
}

/* Glow Pulse Effect */
@keyframes glow-pulse {
  0% {
    box-shadow:
      0 0 60px rgba(107, 127, 248, 0.2),
      inset 0 0 60px rgba(107, 127, 248, 0.1);
  }
  50% {
    box-shadow:
      0 0 100px rgba(107, 127, 248, 0.4),
      inset 0 0 80px rgba(107, 127, 248, 0.2);
  }
  100% {
    box-shadow:
      0 0 60px rgba(107, 127, 248, 0.2),
      inset 0 0 60px rgba(107, 127, 248, 0.1);
  }
}

/* Smooth fade-in for instruction text */
.breath-instruction {
  animation: fade-in 0.6s ease-in forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Celebration animation when daily goal reached */
@keyframes celebrate {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.15) rotate(-3deg);
  }
  75% {
    transform: scale(1.15) rotate(3deg);
  }
}

.celebrate {
  animation: celebrate 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Subtle bounce for milestone achievements */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.bounce {
  animation: bounce 0.6s ease-in-out;
}

/* Button Hover Shine Effect */
@keyframes button-shine {
  from {
    transform: translateX(-100%) skewX(-15deg);
  }
  to {
    transform: translateX(200%) skewX(-15deg);
  }
}

/* Progress Ring Animation */
@keyframes progress-fill {
  from {
    stroke-dashoffset: 1036;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .breathing-circle.inhale,
  .breathing-circle.exhale {
    animation: none;
    transition: transform var(--duration-breath) linear;
  }

  .breathing-circle.inhale {
    transform: scale(1.5);
  }

  .breathing-circle.exhale {
    transform: scale(1);
  }

  @keyframes glow-pulse {
    0%, 100% {
      box-shadow:
        0 0 60px rgba(107, 127, 248, 0.2),
        inset 0 0 60px rgba(107, 127, 248, 0.1);
    }
  }

  .breath-instruction {
    animation: none;
    opacity: 1;
  }
}

/* Stagger entrance animations on load */
.stats-header {
  animation: slide-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.circle-wrapper {
  animation: scale-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.controls {
  animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}