@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes breathe-in {
    0% { 
        transform: scale(0.8); 
        border-width: 2px;
        box-shadow: 0 0 10px rgba(168, 85, 247, 0); 
    }
    100% { 
        transform: scale(1.2); 
        border-width: 8px;
        box-shadow: 0 0 40px rgba(168, 85, 247, 0.8); 
    }
}

@keyframes breathe-out {
    0% { 
        transform: scale(1.2); 
        border-width: 8px;
        box-shadow: 0 0 40px rgba(168, 85, 247, 0.8); 
    }
    100% { 
        transform: scale(0.8); 
        border-width: 2px;
        box-shadow: 0 0 10px rgba(168, 85, 247, 0); 
    }
}
body {
    background-color: #000;
    background-image: 
        radial-gradient(#333 1px, transparent 1px),
        radial-gradient(#333 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    font-family: 'Times New Roman', Times, serif;
}
#breath-circle {
    animation: pulse 2s infinite ease-in-out;
}
.breathing-in #breath-circle {
    animation: breathe-in 4s infinite alternate ease-in-out;
}

.breathing-out #breath-circle {
    animation: breathe-out 6s infinite alternate ease-in-out;
}
.breath-hold #breath-circle {
    animation: none;
    transform: scale(1.2);
    border-width: 6px;
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.6);
}