/* ============================================================
   sora.day -- the daily sky
   japanese-minimal sky meditation
   ============================================================ */

:root {
    /* Palette from DESIGN.md */
    --sky:     #87ceeb;
    --dawn:    #f0a0a0;
    --dusk:    #d06040;
    --night:   #0a1020;
    --cloud:   #f8f8ff;
    --horizon: #c0a080;

    /* Default sky gradient (overwritten by JS based on time of day) */
    --sky-gradient: linear-gradient(180deg, #f0a0a0 0%, #c0a080 55%, #f8f8ff 100%);
    --ink-color: #0a1020;
    --ink-soft: rgba(10, 16, 32, 0.55);
    --cloud-soft: rgba(248, 248, 255, 0.65);

    --col: 480px;
    --pad-v: 20vh;

    --serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --sans-jp:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --serif-en: "Cormorant", "Iowan Old Style", Georgia, serif;
}

/* Period-specific text colors -- text shifts from dark on light skies
   to luminous cloud on dark skies */
body[data-period="dawn"],
body[data-period="morning"],
body[data-period="noon"],
body[data-period="afternoon"] {
    --ink-color: #2a1a20;
    --ink-soft: rgba(42, 26, 32, 0.55);
}

body[data-period="dusk"] {
    --ink-color: #1a0a12;
    --ink-soft: rgba(26, 10, 18, 0.6);
}

body[data-period="night"] {
    --ink-color: #f8f8ff;
    --ink-soft: rgba(248, 248, 255, 0.55);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    background: var(--sky-gradient);
    background-attachment: fixed;
    color: var(--ink-color);
    font-family: var(--sans-jp);
    font-weight: 200;
    line-height: 2.0;
    transition: background 60s ease-in-out, color 4s ease;
    overflow-x: hidden;
}

/* ---------- atmospheric layers ---------- */
.sky-veil {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(248,248,255,0.25), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(248,248,255,0.18), transparent 60%);
    mix-blend-mode: screen;
    transition: opacity 4s ease;
}

.sky-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 6s ease;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(248,248,255,0.9), transparent 60%),
        radial-gradient(1px 1px at 27% 42%, rgba(248,248,255,0.6), transparent 60%),
        radial-gradient(1.2px 1.2px at 41% 12%, rgba(248,248,255,0.85), transparent 60%),
        radial-gradient(1px 1px at 58% 67%, rgba(248,248,255,0.5), transparent 60%),
        radial-gradient(1.4px 1.4px at 73% 28%, rgba(248,248,255,0.95), transparent 60%),
        radial-gradient(1px 1px at 84% 53%, rgba(248,248,255,0.55), transparent 60%),
        radial-gradient(1px 1px at 8% 76%, rgba(248,248,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 92% 88%, rgba(248,248,255,0.65), transparent 60%),
        radial-gradient(1px 1px at 36% 84%, rgba(248,248,255,0.7), transparent 60%),
        radial-gradient(1.2px 1.2px at 64% 8%, rgba(248,248,255,0.8), transparent 60%);
}

body[data-period="night"] .sky-stars { opacity: 0.9; }
body[data-period="dusk"] .sky-stars  { opacity: 0.25; }

.sky-sun {
    position: fixed;
    left: 50%;
    top: 30%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at center,
        rgba(255, 240, 220, 0.55) 0%,
        rgba(255, 220, 180, 0.25) 30%,
        rgba(255, 220, 180, 0.0) 65%);
    filter: blur(8px);
    transition: top 4s ease, opacity 4s ease, background 4s ease;
}

body[data-period="dawn"]      .sky-sun { top: 70%; background: radial-gradient(circle, rgba(255,200,200,0.6), rgba(255,200,200,0) 65%); }
body[data-period="morning"]   .sky-sun { top: 35%; background: radial-gradient(circle, rgba(255,240,210,0.55), rgba(255,240,210,0) 65%); }
body[data-period="noon"]      .sky-sun { top: 14%; background: radial-gradient(circle, rgba(255,250,235,0.7),  rgba(255,250,235,0) 60%); }
body[data-period="afternoon"] .sky-sun { top: 30%; background: radial-gradient(circle, rgba(255,235,200,0.6),  rgba(255,235,200,0) 65%); }
body[data-period="dusk"]      .sky-sun { top: 78%; background: radial-gradient(circle, rgba(255,170,120,0.7),  rgba(208,96,64,0)   65%); }
body[data-period="night"]     .sky-sun { top: 22%; opacity: 0.4; background: radial-gradient(circle, rgba(220,225,255,0.35), rgba(220,225,255,0) 60%); }

/* ---------- masthead ---------- */
.masthead {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.6rem 2rem;
    pointer-events: none;
    font-family: var(--serif-en);
    color: var(--ink-soft);
    letter-spacing: 0.04em;
}

.mark { display: flex; align-items: center; gap: 0.6rem; }
.kanji {
    font-family: var(--serif-jp);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1;
}
.domain {
    font-family: var(--serif-en);
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
}

.now {
    text-align: right;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.now-time {
    font-family: var(--serif-en);
    font-weight: 300;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
}
.now-period {
    font-family: var(--serif-en);
    font-style: italic;
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    opacity: 0.7;
    text-transform: lowercase;
}

/* ---------- scroll content ---------- */
.scroll {
    position: relative;
    z-index: 1;
    max-width: var(--col);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.observation {
    min-height: 100vh;
    padding: var(--pad-v) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0.0;
    transition: opacity 1.6s ease;
    will-change: opacity;
}

.observation.in-view { opacity: 1; }

/* hero */
.hero { padding-top: 30vh; }

.kicker {
    font-family: var(--serif-en);
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.32em;
    text-transform: lowercase;
    color: var(--ink-soft);
    margin-bottom: 3.2rem;
}

.display {
    font-family: var(--serif-jp);
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--ink-color);
    margin-bottom: 2.6rem;
}

.english {
    font-family: var(--serif-en);
    font-weight: 300;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.9;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

/* haiku sections */
.period-label {
    font-family: var(--serif-en);
    font-style: italic;
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: lowercase;
    color: var(--ink-soft);
    margin-bottom: 3.6rem;
}

.haiku {
    margin-bottom: 2.4rem;
}

.haiku.jp {
    font-family: var(--serif-jp);
    font-weight: 300;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    line-height: 2.0;
    letter-spacing: 0.14em;
    color: var(--ink-color);
}

.haiku.en {
    font-family: var(--serif-en);
    font-weight: 300;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.9;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* closing */
.closing { padding-bottom: 30vh; }

.signoff {
    margin-top: 3.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink-soft);
}
.kanji-sm {
    font-family: var(--serif-jp);
    font-weight: 300;
    font-size: 1.2rem;
}
.domain-sm {
    font-family: var(--serif-en);
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
}

/* ---------- foot ---------- */
.foot {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem;
    pointer-events: none;
    font-family: var(--serif-en);
    font-style: italic;
    font-weight: 300;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
}

.foot-right { font-variant-numeric: tabular-nums; font-style: normal; }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
    .masthead { padding: 1.2rem 1.2rem; }
    .foot     { padding: 1rem 1.2rem; }
    .domain   { font-size: 0.82rem; }
    .now-time { font-size: 0.95rem; }
    :root { --pad-v: 16vh; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
    .sky-veil, .sky-stars, .sky-sun { transition: none; }
    .observation { transition: none; opacity: 1; }
    html { scroll-behavior: auto; }
}