*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.ai-breathing-wrapper {
position: relative;
width: 300px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ai-core {
position: relative;
width: 60px;
height: 60px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8);
z-index: 10;
animation: core-pulse 4s ease-in-out infinite;
}
@keyframes core-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8); }
50% { transform: scale(1.1); box-shadow: 0 0 30px 10px rgba(255, 255, 255, 1); }
}
.breathing-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
mix-blend-mode: screen;
filter: blur(8px);
}
/* Layer 1: Pink/Purple */
.ring-inner {
width: 100px;
height: 100px;
background: radial-gradient(circle, #ec4899, transparent 70%);
animation: breathe 4s ease-in-out infinite;
}
/* Layer 2: Blue */
.ring-mid {
width: 140px;
height: 140px;
background: radial-gradient(circle, #3b82f6, transparent 70%);
animation: breathe 4s ease-in-out infinite 1s;
}
/* Layer 3: Teal */
.ring-outer {
width: 180px;
height: 180px;
background: radial-gradient(circle, #10b981, transparent 70%);
animation: breathe 4s ease-in-out infinite 2s;
}
@keyframes breathe {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.9; }
100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.5; }
}
.status-text {
position: absolute;
bottom: -40px;
color: #94a3b8;
font-size: 1rem;
letter-spacing: 2px;
text-transform: uppercase;
animation: fade-text 2s infinite alternate;
}
@keyframes fade-text {
to { opacity: 0.5; }
}
