/* Breathing Exercise Animations */
@keyframes breathe-4-7-8 {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    21% { transform: scale(1.5); opacity: 1; } /* Inhale 4s */
    57% { transform: scale(1.5); opacity: 1; } /* Hold 7s */
    100% { transform: scale(1); opacity: 0.6; } /* Exhale 8s */
}

.breathe-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-soft-cyan) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.breathe-active {
    animation: breathe-4-7-8 19s infinite ease-in-out;
}

/* Timer Circular Progress */
.timer-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s linear;
}

/* UI Transitions */
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
.slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}