/* haroo.day — ethereal blue calm meets airy minimalist */
/* Typography weights per DESIGN.md: Cormorant Garamond (300, 400italic), Nunito (300, 400), Space Mono (400), Noto Sans KR (300) */

:root {
    /* Palette (DESIGN.md hex values) */
    --dawn:        #f4a0a0;
    --morning:     #87ceeb;
    --midday:      #5da4d6;
    --golden:      #e8b87e;
    --twilight:    #8b7fad;
    --night:       #2c2850;

    --text-primary: #3d3b45;
    --text-muted:   #9490a0;

    --cloud-surface: rgba(255, 255, 255, 0.6);
    --cloud-shadow:  0 20px 60px -20px rgba(60, 55, 75, 0.12);
    --cloud-shadow-soft: 0 30px 80px -30px rgba(60, 55, 75, 0.18);

    /* Sky gradient stops (set by JS based on hour) */
    --sky-top:    #87ceeb;
    --sky-bottom: #f4a0a0;
    --sky-accent: #5da4d6;

    /* Type */
    --serif:    "Cormorant Garamond", Georgia, serif;
    --sans:     "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:     "Space Mono", "SF Mono", Menlo, monospace;
    --korean:   "Noto Sans KR", "Nunito", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    background: var(--sky-top);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
    font-family: var(--sans);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1.9;
    background: linear-gradient(
        to bottom,
        var(--sky-top) 0%,
        var(--sky-accent) 45%,
        var(--sky-bottom) 100%
    );
    background-attachment: fixed;
    /* 30 minute crossfade for imperceptible time-of-day shifts */
    transition: background 1800s linear;
    overflow-x: hidden;
}

/* A soft veil that softens the gradient like distant haze */
.sky-veil {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.18), transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.08), transparent 70%);
    z-index: 0;
}

.page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    padding: 0 24px;
}

/* ---------- THE SKY (HERO) ---------- */
.sky {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 16px 120px;
    overflow: hidden;
}

.sky-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.datestamp {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-primary);
    opacity: 0.6;
    padding: 6px 14px;
    border: 1px solid rgba(61, 59, 69, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.prompt {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.4;
    letter-spacing: 0.005em;
    color: var(--text-primary);
    animation: breathe 6s ease-in-out infinite;
    will-change: transform, opacity;
}

.prompt em {
    font-style: italic;
    font-weight: 300;
}

.prompt-line {
    display: inline-block;
}

.korean-accent {
    font-family: var(--korean);
    font-weight: 300;
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    letter-spacing: 0.3em;
    color: var(--text-primary);
    opacity: 0.35;
    margin-top: 16px;
}

.time-of-day {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: lowercase;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Drifting cloud whispers in the hero */
.sky-drift {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.drift {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%);
    filter: blur(12px);
    opacity: 0.7;
    animation: drift 60s linear infinite;
}
.drift.d1 { width: 360px; height: 200px; top: 18%;  left: -180px; animation-duration: 70s; }
.drift.d2 { width: 480px; height: 240px; top: 55%;  left: -220px; animation-duration: 110s; animation-delay: -30s; opacity: 0.5; }
.drift.d3 { width: 280px; height: 160px; top: 78%;  left: -160px; animation-duration: 90s;  animation-delay: -60s; opacity: 0.4; }

@keyframes drift {
    0%   { transform: translateX(0)               translateY(0); }
    50%  { transform: translateX(60vw)            translateY(-10px); }
    100% { transform: translateX(120vw)           translateY(0); }
}

@keyframes breathe {
    0%, 100% { transform: scale(1);    opacity: 0.95; }
    50%      { transform: scale(1.02); opacity: 1; }
}

/* ---------- CLOUD SECTIONS ---------- */
.cloud-stack {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 40px 0 120px;
    max-width: 720px;
    margin: 0 auto;
}

.cloud {
    background: var(--cloud-surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 40px 44px;
    box-shadow: var(--cloud-shadow);
    border: 1px solid rgba(255,255,255,0.55);
    transition: transform 1.2s ease, box-shadow 1.2s ease;
    transform: translateY(0);
}

.cloud:hover {
    transform: translateY(-4px);
    box-shadow: var(--cloud-shadow-soft);
}

.cloud-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(60,55,75,0.08);
    padding-bottom: 16px;
}

.cloud-time {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.cloud-title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.cloud-body {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.cloud-body:last-of-type {
    margin-bottom: 22px;
}

.cloud-list {
    list-style: none;
    margin: 8px 0 22px;
    padding: 0;
}
.cloud-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    line-height: 1.9;
    font-weight: 300;
}
.cloud-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 8px;
    height: 1px;
    background: var(--text-muted);
    opacity: 0.7;
}

.cloud-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cloud-tag {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: lowercase;
    color: var(--text-muted);
    padding: 4px 12px;
    border: 1px solid rgba(148,144,160,0.3);
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
}

.cloud-tag:nth-child(1) {
    font-family: var(--korean);
    letter-spacing: 0.2em;
}

/* ---------- HORIZON LINE ---------- */
.horizon {
    position: relative;
    height: 2px;
    width: min(100%, 820px);
    margin: 40px auto 80px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(139, 127, 173, 0.3),
        transparent
    );
}
.horizon-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 4px 16px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---------- ARCHIVE MIST ---------- */
.archive {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-bottom: 60px;
    /* Mist fade applied to the entire stack */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.entry {
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px;
    padding: 26px 32px;
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 12px 40px -20px rgba(60,55,75,0.10);
    /* Per-card depth fade — combines with the archive mask */
    opacity: calc(1 - var(--depth, 0) * 0.15);
    transform: translateY(calc(var(--depth, 0) * 2px));
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.entry-date {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.entry-title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

.entry-body {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text-primary);
}

/* ---------- FOOT ---------- */
.page-foot {
    text-align: center;
    padding: 60px 16px 80px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.foot-sub {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    opacity: 0.55;
    font-size: 0.95rem;
}

/* ---------- TIME-OF-DAY THEME ADJUSTMENTS ---------- */
body.tod-night,
body.tod-twilight {
    color: #f0eef5;
}
body.tod-night .datestamp,
body.tod-twilight .datestamp,
body.tod-night .prompt,
body.tod-twilight .prompt,
body.tod-night .korean-accent,
body.tod-twilight .korean-accent {
    color: #f0eef5;
}
body.tod-night .cloud,
body.tod-twilight .cloud,
body.tod-night .entry,
body.tod-twilight .entry {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.18);
    color: #f0eef5;
}
body.tod-night .cloud-title,
body.tod-twilight .cloud-title,
body.tod-night .cloud-body,
body.tod-twilight .cloud-body,
body.tod-night .cloud-list li,
body.tod-twilight .cloud-list li,
body.tod-night .entry-title,
body.tod-twilight .entry-title,
body.tod-night .entry-body,
body.tod-twilight .entry-body {
    color: #f0eef5;
}
body.tod-night .cloud-time,
body.tod-twilight .cloud-time,
body.tod-night .cloud-tag,
body.tod-twilight .cloud-tag,
body.tod-night .entry-date,
body.tod-twilight .entry-date,
body.tod-night .horizon-label,
body.tod-twilight .horizon-label,
body.tod-night .time-of-day,
body.tod-twilight .time-of-day {
    color: rgba(240,238,245,0.65);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
    .cloud {
        padding: 30px 26px;
        border-radius: 20px;
    }
    .entry {
        padding: 22px 22px;
    }
    .cloud-stack {
        gap: 40px;
    }
    .sky {
        padding: 60px 12px 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prompt { animation: none; }
    .drift  { animation: none; }
    body { transition: none; }
}