/* haroo.day — one day, painted in watercolor.
   palette tokens, all eight, all from DESIGN.md.
*/

:root {
    --paper:        #F7E9C9;   /* jangji paper, base */
    --paper-soft:   #FBF6E9;   /* near-white paper at noon */
    --indigo:       #1E2A3C;   /* dawn / night sky */
    --plum:         #7E4A5F;   /* dusk italic */
    --aubergine:    #3E3349;   /* body text + timeline rule */
    --terracotta:   #C95B3F;   /* the single noon drop */
    --celadon:      #A8C0B0;   /* morning */
    --honey:        #D7B07A;   /* afternoon */
    --oat:          #D7C39A;   /* morning warm */
    --lamp:         #E8C26B;   /* dusk lamp glow */
    --mauve:        #7A6B7E;   /* dawn mid */
    --mauve-deep:   #5A4E5C;   /* mono ink */
    --clay:         #9C6B4F;   /* afternoon dark / dusk light */
    --peach:        #E8C9A8;   /* dawn lower */

    --ease-watercolor-bleed: cubic-bezier(0.24, 0.6, 0.18, 1.0);

    /* the document is approx 28000px tall on a 1440px viewport.
       day axis is 24 hours = 1440 minutes.
       we map 04:30..28:30 (24h window starting at 04:30) onto the doc.
       --doc-h is set in JS at runtime; CSS fallback below. */
    --doc-h: 28000px;

    /* timeline + entry geometry */
    --timeline-x: 12vw;
    --margin-r: 6vw;

    /* color of the pigment ring overlay */
    --pigment-ring: rgba(62, 51, 73, 0.18);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--aubergine);
    font-family: 'Gowun Batang', 'Noto Serif KR', 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    /* faint paper grain, hand-built (no images) */
    background-image:
        radial-gradient(circle at 18% 22%, rgba(122,107,126,0.05) 0, transparent 0.6%),
        radial-gradient(circle at 73% 41%, rgba(62,51,73,0.04) 0, transparent 0.5%),
        radial-gradient(circle at 41% 78%, rgba(122,107,126,0.04) 0, transparent 0.55%),
        radial-gradient(circle at 88% 12%, rgba(122,107,126,0.04) 0, transparent 0.5%),
        radial-gradient(circle at 9% 63%, rgba(62,51,73,0.04) 0, transparent 0.4%),
        linear-gradient(var(--paper), var(--paper));
    background-size: 480px 480px, 360px 360px, 520px 520px, 420px 420px, 300px 300px, auto;
    overflow-x: hidden;
}

/* ============================== now-reading badge ============================== */
.now-badge {
    position: fixed;
    top: 2vw;
    right: 2vw;
    z-index: 50;
    padding: 0.55rem 0.9rem 0.55rem 0.85rem;
    background: rgba(247, 233, 201, 0.85);
    color: var(--mauve-deep);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-feature-settings: "onum" 1, "tnum" 0;
    border: 1px solid rgba(62, 51, 73, 0.18);
    box-shadow: 0 0.5px 0 rgba(62, 51, 73, 0.06);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    transition: color 600ms ease-out, background 600ms ease-out, border-color 600ms ease-out;
}

/* the badge re-tints once the user scrolls into night */
.now-badge.is-night {
    background: rgba(30, 42, 60, 0.78);
    color: rgba(232, 194, 107, 0.92);
    border-color: rgba(232, 194, 107, 0.28);
}

/* ============================== day-scroll layout ============================== */
.day-scroll {
    position: relative;
    width: 100%;
    min-height: var(--doc-h);
    /* ensure the document is at least the tall canvas. JS will fine-tune. */
}

/* ============================== timeline rule ============================== */
.timeline {
    position: absolute;
    left: var(--timeline-x);
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--aubergine);
    z-index: 10;
    pointer-events: none;
}

.tick {
    position: absolute;
    left: 0;
    height: 1px;
    background: var(--aubergine);
    transform: translateY(-0.5px);
}
.tick.q  { width: 4px; opacity: 0.62; }
.tick.h  { width: 8px; opacity: 0.85; }

.tick-label {
    position: absolute;
    left: 13px;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-feature-settings: "onum" 1, "tnum" 0;
    color: var(--mauve-deep);
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

/* ============================== fold mark at noon ============================== */
.fold-mark {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 4;
    background: linear-gradient(
        to right,
        rgba(62, 51, 73, 0) 0%,
        rgba(62, 51, 73, 0.06) 18%,
        rgba(62, 51, 73, 0.10) 50%,
        rgba(62, 51, 73, 0.06) 82%,
        rgba(62, 51, 73, 0) 100%
    );
    pointer-events: none;
}

/* ============================== panels ============================== */
.panel {
    position: absolute;
    left: 0;
    right: 0;
    /* JS sets top + height per panel based on data-start / data-end */
    overflow: visible;
}

/* watercolor wash — the painted background per panel.
   built as a stack of radial + linear gradients, no PNGs. */
.wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* deckle alpha at top + bottom so panels visually feed into each other */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0,
        #000 200px,
        #000 calc(100% - 200px),
        transparent 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0,
        #000 200px,
        #000 calc(100% - 200px),
        transparent 100%);
}

/* dawn — indigo top, mauve middle, peach lower */
.wash-dawn {
    background:
        radial-gradient(ellipse 80% 30% at 50% 5%,  rgba(30,42,60,0.72) 0, rgba(30,42,60,0) 70%),
        radial-gradient(ellipse 90% 26% at 30% 25%, rgba(122,107,126,0.55) 0, rgba(122,107,126,0) 70%),
        radial-gradient(ellipse 95% 30% at 65% 45%, rgba(122,107,126,0.45) 0, rgba(232,201,168,0) 70%),
        radial-gradient(ellipse 110% 35% at 50% 80%, rgba(232,201,168,0.7) 0, rgba(232,201,168,0) 70%),
        linear-gradient(to bottom,
            rgba(30,42,60,0.65) 0%,
            rgba(122,107,126,0.55) 35%,
            rgba(232,201,168,0.55) 78%,
            rgba(247,233,201,0.0)  100%);
}

/* morning — paper, celadon, oat */
.wash-morning {
    background:
        radial-gradient(ellipse 70% 28% at 25% 18%, rgba(168,192,176,0.55) 0, rgba(168,192,176,0) 70%),
        radial-gradient(ellipse 80% 30% at 70% 38%, rgba(215,195,154,0.45) 0, rgba(215,195,154,0) 70%),
        radial-gradient(ellipse 95% 30% at 35% 70%, rgba(168,192,176,0.32) 0, rgba(168,192,176,0) 70%),
        radial-gradient(ellipse 80% 30% at 75% 88%, rgba(215,176,122,0.22) 0, rgba(215,176,122,0) 70%),
        linear-gradient(to bottom,
            rgba(247,233,201,0.85) 0%,
            rgba(168,192,176,0.18) 30%,
            rgba(215,195,154,0.30) 70%,
            rgba(251,246,233,0.85) 100%);
}

/* noon — palest paper, the single terracotta drop happens via .noon-drop on the entry */
.wash-noon {
    background:
        radial-gradient(ellipse 60% 22% at 32% 28%, rgba(215,195,154,0.22) 0, rgba(215,195,154,0) 75%),
        radial-gradient(ellipse 70% 18% at 78% 60%, rgba(215,195,154,0.18) 0, rgba(215,195,154,0) 75%),
        linear-gradient(to bottom,
            rgba(251,246,233,0.95) 0%,
            rgba(251,246,233,1)    50%,
            rgba(251,246,233,0.95) 100%);
}

/* afternoon — paper -> honey -> clay (slow gradient, this is the long panel) */
.wash-afternoon {
    background:
        radial-gradient(ellipse 80% 18% at 28% 18%, rgba(215,195,154,0.32) 0, rgba(215,195,154,0) 70%),
        radial-gradient(ellipse 85% 22% at 70% 55%, rgba(215,176,122,0.42) 0, rgba(215,176,122,0) 70%),
        radial-gradient(ellipse 90% 24% at 35% 88%, rgba(156,107,79,0.32) 0, rgba(156,107,79,0) 70%),
        linear-gradient(to bottom,
            rgba(251,246,233,0.85) 0%,
            rgba(215,176,122,0.42) 55%,
            rgba(156,107,79,0.42) 100%);
}

/* dusk — clay, plum, aubergine, with lamp glows scattered */
.wash-dusk {
    background:
        radial-gradient(ellipse 85% 22% at 35% 18%, rgba(156,107,79,0.55) 0, rgba(156,107,79,0) 70%),
        radial-gradient(ellipse 90% 26% at 70% 45%, rgba(126,74,95,0.65) 0, rgba(126,74,95,0) 70%),
        radial-gradient(ellipse 100% 30% at 40% 78%, rgba(62,51,73,0.62) 0, rgba(62,51,73,0) 70%),
        linear-gradient(to bottom,
            rgba(156,107,79,0.55) 0%,
            rgba(126,74,95,0.65) 50%,
            rgba(62,51,73,0.78) 100%);
}

/* night — indigo, with the texture darkening downward */
.wash-night {
    background:
        radial-gradient(ellipse 90% 22% at 30% 12%, rgba(62,51,73,0.62) 0, rgba(62,51,73,0) 70%),
        radial-gradient(ellipse 100% 28% at 68% 38%, rgba(30,42,60,0.78) 0, rgba(30,42,60,0) 70%),
        radial-gradient(ellipse 110% 34% at 50% 88%, rgba(30,42,60,0.92) 0, rgba(30,42,60,0) 70%),
        linear-gradient(to bottom,
            rgba(62,51,73,0.78) 0%,
            rgba(30,42,60,0.92) 50%,
            rgba(30,42,60,1)    100%);
}

/* ============================== pigment rings ============================== */
.pigment-ring {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    border: 1px solid var(--pigment-ring);
    mix-blend-mode: multiply;
    pointer-events: none;
    transform: rotate(-8deg);
}
.pigment-ring.ring-1 { top: 18%; right: 14vw; width: 110px; height: 90px; transform: rotate(-12deg); }
.pigment-ring.ring-2 { top: 64%; right: 22vw; width: 86px;  height: 70px; transform: rotate(8deg); }
.pigment-ring.ring-3 { top: 38%; right: 18vw; width: 130px; height: 100px; transform: rotate(-3deg); }
.pigment-ring.ring-4 { top: 28%; right: 12vw; width: 96px;  height: 78px; transform: rotate(14deg); }
.pigment-ring.ring-5 { top: 58%; right: 26vw; width: 140px; height: 110px; transform: rotate(-6deg); }
.pigment-ring.ring-6 { top: 12%; right: 16vw; width: 100px; height: 82px; transform: rotate(2deg); }

/* ============================== panel titles ============================== */
.panel-title {
    position: absolute;
    z-index: 6;
    margin: 0;
    /* JS positions vertically by data-time. Horizontal sits to the right of the timeline. */
    left: calc(var(--timeline-x) + 2.5vw);
    font-family: 'Gowun Batang', 'Noto Serif KR', serif;
    font-weight: 400;
    font-size: 3.25rem;
    line-height: 1.05;
    letter-spacing: 0.005em;
    pointer-events: none;
    white-space: nowrap;
}
.panel-title .ko {
    color: var(--indigo);
    font-size: 1.05em; /* korean 5% larger than latin */
    margin-right: 0.18em;
    line-height: 1.2; /* extra breathing room */
}
.panel-title .dash {
    color: var(--mauve);
    margin: 0 0.18em;
}
.panel-title .en {
    color: var(--plum);
    font-style: italic;
    font-family: 'Cormorant Garamond', 'Gowun Batang', serif;
    font-weight: 400;
}

/* dusk + night panel title text invert for legibility */
.panel-dusk .panel-title .ko,
.panel-night .panel-title .ko { color: #F7E9C9; }
.panel-dusk .panel-title .en,
.panel-night .panel-title .en { color: var(--lamp); }
.panel-dusk .panel-title .dash,
.panel-night .panel-title .dash { color: rgba(247,233,201,0.55); }

/* ============================== marginal hangeul/hanja seals ============================== */
.hangeul-seal {
    position: absolute;
    right: var(--margin-r);
    z-index: 5;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif;
    font-size: 0.7rem;
    color: var(--aubergine);
    opacity: 0.35;
    letter-spacing: 0;
    pointer-events: none;
}
.hangeul-seal.seal-1 { top: 22%; }
.hangeul-seal.seal-2 { top: 52%; }
.hangeul-seal.seal-3 { top: 78%; }

.panel-dusk .hangeul-seal,
.panel-night .hangeul-seal {
    color: var(--paper);
    opacity: 0.42;
}

/* ============================== entries ============================== */
.entry {
    position: absolute;
    z-index: 7;
    /* top set by JS based on data-time */
    /* left set inline, hand-tuned per design */
    width: clamp(240px, 32vw, 460px);
    margin: 0;
    padding: 0;
}

.entry .stamp {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mauve-deep);
    letter-spacing: 0.02em;
    font-feature-settings: "onum" 1, "tnum" 0;
    margin: 0 0 0.55rem 0;
}

.entry .obs {
    margin: 0;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif;
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.85;
    letter-spacing: 0.005em;
    color: var(--aubergine);
}

/* italic gloss */
.entry .obs em {
    font-family: 'Cormorant Garamond', 'Gowun Batang', serif;
    font-style: italic;
    color: var(--plum);
    font-size: 0.94em;
}

/* dusk + night entries lighten body type */
.panel-dusk .entry .obs,
.panel-night .entry .obs {
    color: #EBDDB4;
}
.panel-dusk .entry .stamp,
.panel-night .entry .stamp {
    color: rgba(232, 221, 180, 0.78);
}
.panel-dusk .entry .obs em,
.panel-night .entry .obs em {
    color: var(--lamp);
}

/* the noon-drop entry — the only place terracotta lives */
.entry.noon-drop .obs::first-letter,
.entry.noon-drop .stamp {
    /* keep typography normal; the terracotta is in the SVG sketch's bleed */
}
.entry.noon-drop {
    position: absolute;
}
.entry.noon-drop::after {
    /* single bleeding terracotta drop, positioned next to the stamp */
    content: "";
    position: absolute;
    left: -28px;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(201,91,63,0.95) 0%,
        rgba(201,91,63,0.65) 45%,
        rgba(201,91,63,0)    100%);
    filter: blur(0.4px);
    pointer-events: none;
}

/* ============================== sketches ============================== */
.sketch-fig {
    margin: 0.85rem 0 0 0;
    padding: 0;
    display: block;
}

.sketch {
    display: block;
    width: clamp(80px, 11vw, 140px);
    height: auto;
    /* watercolor-bleed reveal: starts clipped from right + fully transparent */
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition:
        clip-path 1.4s var(--ease-watercolor-bleed),
        opacity   1.8s var(--ease-watercolor-bleed),
        filter    600ms ease-out;
}

.entry.is-revealed .sketch {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* the only hover effect on the entire page */
.sketch-fig:hover .sketch {
    filter: contrast(1.06) saturate(1.04);
}

.sketch-fig .cap {
    margin-top: 0.4rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--plum);
    line-height: 1.4;
    letter-spacing: 0.005em;
}
.sketch-fig .cap em { font-style: italic; }

.panel-dusk .sketch-fig .cap,
.panel-night .sketch-fig .cap {
    color: var(--lamp);
    opacity: 0.85;
}

/* ============================== dusk lamps ============================== */
.lamp {
    position: absolute;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(232,194,107,0.92) 0%,
        rgba(232,194,107,0.55) 35%,
        rgba(232,194,107,0)    75%);
    filter: blur(0.4px);
    mix-blend-mode: screen;
    pointer-events: none;
}
.lamp.lamp-1 { top: 14%; left: 38vw; width: 28px; height: 28px; }
.lamp.lamp-2 { top: 26%; left: 64vw; width: 36px; height: 36px; }
.lamp.lamp-3 { top: 42%; left: 32vw; width: 26px; height: 26px; }
.lamp.lamp-4 { top: 58%; left: 70vw; width: 40px; height: 40px; }
.lamp.lamp-5 { top: 74%; left: 50vw; width: 32px; height: 32px; }
.lamp.lamp-6 { top: 86%; left: 26vw; width: 28px; height: 28px; }

/* ============================== final entry + end-viewport + colophon ============================== */
.entry.final-entry .obs {
    font-size: 1.875rem;
    color: var(--indigo);
    line-height: 1;
}
.panel-night .entry.final-entry .obs {
    color: var(--paper);
}

.full-stop {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--indigo);
    margin-left: 2px;
    vertical-align: baseline;
    box-shadow: 0 0 0 0 rgba(30,42,60,0.4);
}
.panel-night .full-stop { background: var(--paper); }

.end-viewport {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 200px;
    height: 100vh;
    /* one full viewport of indigo at the very end */
    background: var(--indigo);
    z-index: 0;
}

.colophon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 8;
    margin: 0;
    padding: 0 12vw;
    text-align: center;
    color: var(--plum);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1.7;
}

/* ============================== cookie note (legal minimum, hand-pinned) ============================== */
.cookie-note {
    position: fixed;
    bottom: 1.5vw;
    left: 1.5vw;
    z-index: 60;
    margin: 0;
    max-width: 220px;
    color: var(--plum);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0.78;
    pointer-events: none;
}

/* ============================== mobile ============================== */
@media (max-width: 768px) {
    :root {
        --timeline-x: 8vw;
        --margin-r: 4vw;
    }
    .panel-title {
        font-size: 2.5rem;
        left: calc(var(--timeline-x) + 2vw);
    }
    .panel-title .ko { font-size: 1.05em; }
    .entry {
        width: clamp(220px, 70vw, 360px);
    }
    .entry .obs {
        font-size: 1.125rem;
        line-height: 1.78;
    }
    .entry[style*="left:14vw"] { left: 12vw !important; }
    .entry[style*="left:15vw"] { left: 13vw !important; }
    .entry[style*="left:16vw"] { left: 13vw !important; }
    .entry[style*="left:18vw"] { left: 14vw !important; }
    .entry[style*="left:19vw"] { left: 14vw !important; }
    .entry[style*="left:20vw"] { left: 15vw !important; }
    .entry[style*="left:21vw"] { left: 15vw !important; }
    .entry[style*="left:22vw"] { left: 16vw !important; }

    .sketch {
        width: clamp(70px, 22vw, 110px);
    }
    .now-badge {
        font-size: 0.7rem;
        top: 1.5vw;
        right: 1.5vw;
        padding: 0.45rem 0.7rem;
    }
    .colophon { padding: 0 6vw; }
}