:root {
    --cream: #FDF8F2;
    --sage-green: #A3B18A;
    --dusty-rose: #DDBEA9;
    --text-color: #584B42;
    --gold-accent: #C4A484;
    --soft-orange: #EAA788;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Manrope', sans-serif;
    background-color: var(--cream);
    color: var(--text-color);
}

#background-animation {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: -1;
}

.bokeh {
    position: absolute; border-radius: 50%;
    filter: blur(25px); opacity: 0;
}
.bokeh:nth-child(1) { background: var(--dusty-rose); width: 250px; height: 250px; animation: move 25s infinite alternate; }
.bokeh:nth-child(2) { background: var(--sage-green); width: 300px; height: 300px; animation: move 30s infinite alternate-reverse; }
.bokeh:nth-child(3) { background: var(--soft-orange); width: 200px; height: 200px; animation: move 20s infinite alternate; }

@keyframes move {
    from { transform: translate(10vw, 20vh) scale(0.8); opacity: 0.1; }
    to { transform: translate(70vw, 80vh) scale(1.2); opacity: 0.25; }
}

.landing-page {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    background-color: var(--cream); z-index: 200;
    opacity: 1;
    visibility: visible;
}
        
.landing-page.fade-out {
    animation: fadeOutWelcome 2s ease-in 4s forwards;
}

@keyframes fadeOutWelcome {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

.landing-page h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 500; margin: 0; text-align: center; }
.landing-page .sub-text { font-size: 1.2rem; margin: 0.5rem 0; font-weight: 300; }
.landing-page .korean-subtext { font-size: 1rem; font-weight: 400; color: var(--sage-green); }
.landing-page .whisper-text { position: absolute; bottom: 3rem; font-size: 0.9rem; font-weight: 300; color: #aaa; }

.main-harbor {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 2rem 1rem;
    box-sizing: border-box;
    opacity: 0;
    animation: fadeInMain 1.5s ease-in-out 4.5s forwards;
}

@keyframes fadeInMain { 
    to { opacity: 1; } 
}

.header-content { text-align: center; }
.live-clock { font-size: 0.9rem; color: var(--sage-green); }
.mantra-of-the-day { margin-top: 0.75rem; font-style: italic; color: var(--text-color); }

.music-control {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 100; cursor: pointer;
    width: 30px; height: 30px;
}
.music-control svg { width: 100%; height: 100%; fill: var(--gold-accent); }
.music-control .unmute-icon { display: block; }
.music-control .mute-icon { display: none; }

.central-feature {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 100%;
}

.lotus-container {
    width: 150px;
    height: 150px;
    cursor: pointer;
    position: relative;
    text-align: center;
    margin-bottom: 1rem; /* Space between lotus and text */
}

.lotus-base {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--soft-orange), var(--dusty-rose));
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 15px var(--dusty-rose));
    animation: pulse 4s infinite ease-in-out;
}

@keyframes pulse {
     0%, 100% { transform: translate(-50%, -50%) scale(1); }
     50% { transform: translate(-50%, -50%) scale(1.03); }
}

.prompt-text {
    margin-top: 0;
    font-size: 1.1rem;
    transition: opacity 0.5s ease;
    height: auto;
}
.prompt-text .heart { color: var(--dusty-rose); }

.counters {
    text-align: center;
    font-size: 0.85rem;
    color: var(--sage-green);
    line-height: 1.6;
}
.counters p { margin: 0; }

.message-card-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(253, 248, 242, 0.7);
    backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center;
    z-index: 300; opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease;
}
.message-card-overlay.visible { opacity: 1; pointer-events: auto; }

.message-card {
    position: relative;
    background-color: var(--cream);
    padding: 3rem 2.5rem;
    border-radius: 10px;
    width: 85%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.message-card-overlay.visible .message-card { transform: scale(1); }

#message-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1.6;
    margin: 0;
}
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    color: #aaa;
    cursor: pointer;
}

#listen-container { margin-top: 2rem; }
#listen-button { background: none; border: none; cursor: pointer; }
#listen-button svg { width: 28px; height: 28px; fill: var(--gold-accent); transition: transform 0.2s ease; }
#listen-button:hover svg { transform: scale(1.1); }