:root {
    /* Interactions are intimate and object-based—buds bloom at low contrast. */
    --paper: #FFF8EA;
    --petal: #F7B7C8;
    --leaf: #9CCB7A;
    --blue: #BFE7F2;
    --apricot: #F6B56B;
    --twig: #5B4636;
    --violet: #7B79B8;
    --shadow: #D8D2C4;
    --ink: #5B4636;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--twig);
    font-family: "Nanum Myeongjo", serif;
    overflow-x: hidden;
}

button, a { font: inherit; }

.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: .32;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(91,70,54,.09) 0 1px, transparent 1.5px),
        radial-gradient(circle at 76% 18%, rgba(216,210,196,.42) 0 1px, transparent 1.8px),
        radial-gradient(circle at 42% 81%, rgba(156,203,122,.13) 0 1px, transparent 1.7px),
        linear-gradient(90deg, rgba(91,70,54,.025), transparent 18%, rgba(91,70,54,.018) 52%, transparent);
    background-size: 17px 17px, 29px 29px, 41px 41px, 100% 100%;
    mix-blend-mode: multiply;
}

.day-scroll { position: relative; z-index: 2; }

.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 8vh 9vw;
    background:
        radial-gradient(circle at var(--light-x, 15%) var(--light-y, 15%), rgba(255,255,255,.72), transparent 34%),
        linear-gradient(135deg, var(--wash-a, #FFF8EA), var(--wash-b, #FFF8EA));
}

.scene::before {
    content: "";
    position: absolute;
    inset: 3.4vh 3vw;
    border: 1px solid rgba(91,70,54,.16);
    border-radius: 38% 62% 48% 52% / 4% 5% 3% 6%;
    clip-path: polygon(0 2%, 97% 0, 100% 96%, 72% 99%, 39% 97%, 0 100%);
    pointer-events: none;
    z-index: -1;
}

.scene::after {
    content: attr(data-hour);
    position: absolute;
    left: 6vw;
    bottom: 5vh;
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(.72rem, 1vw, .92rem);
    letter-spacing: .16em;
    color: rgba(91,70,54,.42);
}

.vellum {
    position: absolute;
    inset: 6vh 6vw;
    background: rgba(255,248,234,.45);
    border-radius: 28px 18px 34px 22px;
    box-shadow: 0 28px 80px rgba(91,70,54,.08), inset 0 0 35px rgba(255,255,255,.4);
    backdrop-filter: blur(1px);
    transform: rotate(var(--paper-tilt, -.8deg));
    z-index: -1;
}

.torn-left { clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 97%, 2% 82%, 0 66%, 3% 51%, 1% 33%, 3% 17%); }
.torn-right { clip-path: polygon(0 0, 98% 1%, 100% 16%, 97% 33%, 100% 50%, 97% 69%, 99% 88%, 96% 100%, 0 98%); }

.scene-copy {
    max-width: 640px;
    position: relative;
    z-index: 3;
    filter: blur(3px);
    opacity: .2;
    transform: translateY(26px) rotate(-.4deg);
    transition: opacity 900ms ease, filter 900ms ease, transform 900ms cubic-bezier(.19, 1, .22, 1);
}

.scene.active .scene-copy { opacity: 1; filter: blur(0); transform: translateY(0) rotate(-.4deg); }
.right-copy { justify-self: end; margin-right: 6vw; }
.left-copy { justify-self: start; margin-left: 4vw; }
.center-copy { text-align: center; }

h1, h2 {
    font-family: "Gowun Dodum", sans-serif;
    color: var(--twig);
    font-weight: 400;
    margin: .05em 0 .18em;
    line-height: .95;
}

h1 {
    font-size: clamp(7rem, 22vw, 20rem);
    letter-spacing: -.08em;
    animation: inkSoak 2600ms ease both;
    text-shadow: 0 0 18px rgba(91,70,54,.12);
}

h2 { font-size: clamp(3.4rem, 8vw, 9.6rem); letter-spacing: -.055em; }

.poem {
    font-size: clamp(1.05rem, 1.7vw, 1.55rem);
    line-height: 1.8;
    max-width: 35em;
    color: rgba(91,70,54,.82);
}

.utility, .date-stamp, .margin-stamp {
    font-family: "IBM Plex Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.utility { font-size: .78rem; color: rgba(91,70,54,.54); }

.hour-label {
    font-family: "Gaegu", cursive;
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    color: var(--active-ink, var(--petal));
    margin: 0 0 .5rem;
    transform: rotate(-2deg);
}

.date-stamp, .margin-stamp {
    position: absolute;
    border: 2px solid currentColor;
    color: var(--petal);
    background: transparent;
    border-radius: 4px;
    padding: .55rem .75rem;
    font-size: .78rem;
    transform: rotate(-7deg);
    box-shadow: inset 0 0 0 1px currentColor;
    cursor: pointer;
    z-index: 5;
}

.date-stamp { top: 12vh; left: 11vw; }
.margin-stamp { right: 11vw; bottom: 17vh; }
.margin-stamp.green { color: var(--leaf); left: 10vw; right: auto; }

.hangul-stamp {
    position: absolute;
    right: 13vw;
    top: 18vh;
    width: 78px;
    height: 78px;
    border: 1.5px solid rgba(247,183,200,.75);
    color: rgba(247,183,200,.8);
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: "Gowun Dodum", sans-serif;
    font-size: 1.8rem;
    transform: rotate(16deg);
}
.hangul-stamp.violet { border-color: rgba(123,121,184,.62); color: rgba(123,121,184,.72); }

.bud-nav {
    position: fixed;
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: grid;
    gap: 15px;
}

.bud-nav::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 8px;
    border-left: 1px dashed rgba(91,70,54,.24);
}

.bud {
    position: relative;
    border: 0;
    background: transparent;
    width: 18px;
    height: 18px;
    padding: 0;
    cursor: pointer;
}
.bud::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--leaf);
    border-radius: 65% 35% 58% 42%;
    transform: rotate(45deg) scale(.72);
    transition: transform 450ms ease, background 450ms ease;
    box-shadow: 0 2px 9px rgba(91,70,54,.16);
}
.bud.active::before { background: var(--petal); transform: rotate(45deg) scale(1.35); border-radius: 70% 30% 70% 30%; }
.bud span {
    position: absolute;
    right: 28px;
    top: -7px;
    white-space: nowrap;
    font-family: "Gaegu", cursive;
    font-size: 1rem;
    opacity: 0;
    color: var(--twig);
    transition: opacity 300ms ease;
}
.bud.active span, .bud:hover span { opacity: 1; }

.sun-map {
    position: fixed;
    left: 2.6vw;
    top: 7vh;
    width: 90px;
    height: 86vh;
    z-index: 12;
    pointer-events: none;
    opacity: .9;
}
.sun-map svg { width: 100%; height: 100%; overflow: visible; }
#sunCurve { fill: none; stroke: rgba(91,70,54,.18); stroke-width: 1.5; stroke-dasharray: 4 10; }
.sun-disc {
    position: absolute;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF8EA 0 32%, #F6B56B 33% 100%);
    box-shadow: 0 0 38px rgba(246,181,107,.52), 0 0 0 10px rgba(246,181,107,.08);
    transform: translate(-50%, -50%);
}

.petal-field { position: fixed; inset: 0; z-index: 11; pointer-events: none; overflow: hidden; }
.petal, .cursor-petal {
    position: absolute;
    width: 16px;
    height: 11px;
    border-radius: 75% 15% 80% 18%;
    background: linear-gradient(135deg, rgba(255,248,234,.75), var(--petal));
    box-shadow: inset -2px 0 4px rgba(91,70,54,.08);
    transform: rotate(var(--r, 20deg));
}
.petal { animation: petalDrift var(--dur, 11s) linear infinite; opacity: var(--op, .8); }
.cursor-petal { z-index: 40; pointer-events: none; opacity: 0; transition: opacity 300ms ease; }

.wash { position: absolute; inset: 0; z-index: -3; opacity: .65; }
.wash-blue { background: radial-gradient(circle at 25% 18%, #BFE7F2 0 11%, transparent 36%); }
.scene-dawn { --wash-a: #FFF8EA; --wash-b: #BFE7F2; --light-x: 18%; --light-y: 12%; }
.scene-morning { --wash-a: #FFF8EA; --wash-b: #F7B7C8; --light-x: 28%; --light-y: 20%; --active-ink: #F7B7C8; }
.scene-noon { --wash-a: #BFE7F2; --wash-b: #9CCB7A; --light-x: 50%; --light-y: 7%; --active-ink: #9CCB7A; }
.scene-afternoon { --wash-a: #FFF8EA; --wash-b: #D8D2C4; --light-x: 60%; --light-y: 28%; --active-ink: #9CCB7A; }
.scene-sunset { --wash-a: #F6B56B; --wash-b: #F7B7C8; --light-x: 72%; --light-y: 43%; --active-ink: #F6B56B; }
.scene-evening { --wash-a: #BFE7F2; --wash-b: #7B79B8; --light-x: 82%; --light-y: 62%; --active-ink: #7B79B8; }
.scene-night { --wash-a: #7B79B8; --wash-b: #5B4636; --light-x: 80%; --light-y: 24%; color: #FFF8EA; --active-ink: #BFE7F2; }
.scene-night h2, .scene-night .poem, .scene-night .utility { color: #FFF8EA; }
.scene-night::before { border-color: rgba(255,248,234,.24); }

.dew-cluster i {
    position: absolute;
    border: 1px solid rgba(191,231,242,.84);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.85), rgba(191,231,242,.18));
    animation: ripple 4s ease-in-out infinite;
}
.dew-cluster i:nth-child(1) { width: 70px; height: 70px; left: 22vw; bottom: 18vh; }
.dew-cluster i:nth-child(2) { width: 38px; height: 38px; left: 16vw; bottom: 31vh; animation-delay: .6s; }
.dew-cluster i:nth-child(3) { width: 95px; height: 95px; right: 23vw; top: 20vh; animation-delay: 1s; }
.dew-cluster i:nth-child(4) { width: 24px; height: 24px; right: 35vw; bottom: 19vh; animation-delay: 1.4s; }
.dew-cluster i:nth-child(5) { width: 50px; height: 50px; left: 49vw; top: 14vh; animation-delay: 2s; }

.flower-note {
    position: absolute;
    left: 11vw;
    top: 28vh;
    font-family: "Gaegu", cursive;
    color: rgba(91,70,54,.58);
    transform: rotate(-12deg);
    cursor: pointer;
}
.flower-note::before {
    content: "";
    display: block;
    width: 44px;
    height: 85px;
    margin: 0 auto 8px;
    background: linear-gradient(#9CCB7A, #9CCB7A) center/2px 100% no-repeat,
        radial-gradient(ellipse at 50% 20%, rgba(247,183,200,.75) 0 26%, transparent 28%),
        radial-gradient(ellipse at 28% 35%, rgba(247,183,200,.55) 0 23%, transparent 25%),
        radial-gradient(ellipse at 72% 35%, rgba(247,183,200,.55) 0 23%, transparent 25%);
    filter: saturate(.8);
}
.flower-note.revealed::after {
    content: attr(data-note);
    position: absolute;
    left: 50px;
    top: 20px;
    width: 180px;
    padding: .7rem;
    background: rgba(255,248,234,.84);
    border: 1px solid rgba(91,70,54,.2);
    border-radius: 12px;
}

.milk-carton {
    position: absolute;
    left: 18vw;
    bottom: 19vh;
    width: 92px;
    height: 132px;
    background: linear-gradient(100deg, #FFF8EA, #BFE7F2);
    border: 2px solid rgba(91,70,54,.26);
    clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% 100%, 0 100%);
    transform: rotate(-7deg);
}
.milk-carton span { position: absolute; bottom: 28px; left: 22px; font-family: "Gowun Dodum"; color: #7B79B8; font-size: 1.5rem; }
.laundry-line { position: absolute; right: 13vw; top: 18vh; width: 290px; border-top: 2px solid rgba(91,70,54,.22); transform: rotate(-3deg); }
.laundry-line i { position: relative; display: inline-block; width: 11px; height: 45px; margin: 0 27px; background: #D8D2C4; border-radius: 8px; animation: sway 3.8s ease-in-out infinite; transform-origin: top; }

.sun-rectangle { position: absolute; inset: 18vh 18vw auto auto; width: 38vw; height: 32vh; background: rgba(255,248,234,.36); transform: skew(-10deg) translateX(var(--shadow-x, 0)); box-shadow: 0 0 55px rgba(255,248,234,.26); }

.tile-steps { position: absolute; inset: auto 13vw 8vh 16vw; height: 32vh; background-image: linear-gradient(rgba(91,70,54,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(91,70,54,.13) 1px, transparent 1px); background-size: 74px 54px; transform: perspective(700px) rotateX(58deg) rotateZ(-4deg); opacity: .55; }
.petal-spiral i { position: absolute; width: 20px; height: 13px; background: #F7B7C8; border-radius: 80% 10% 70% 20%; animation: spiral 8s ease-in-out infinite; }
.petal-spiral i:nth-child(1) { left: 42vw; top: 18vh; }
.petal-spiral i:nth-child(2) { left: 57vw; top: 27vh; animation-delay: -1s; }
.petal-spiral i:nth-child(3) { left: 63vw; top: 52vh; animation-delay: -2s; }
.petal-spiral i:nth-child(4) { left: 32vw; top: 55vh; animation-delay: -3s; }
.petal-spiral i:nth-child(5) { left: 25vw; top: 35vh; animation-delay: -4s; }
.petal-spiral i:nth-child(6) { left: 50vw; top: 70vh; animation-delay: -5s; }
.doodle-arrow { position: absolute; right: 18vw; bottom: 18vh; font-family: "Gaegu", cursive; font-size: 2rem; color: #9CCB7A; transform: rotate(8deg); }

.awning { position: absolute; right: 0; top: 14vh; width: 35vw; height: 92px; background: repeating-linear-gradient(90deg, #F7B7C8 0 38px, #FFF8EA 38px 76px); border-bottom: 4px solid rgba(91,70,54,.18); border-radius: 0 0 40px 40px; transform: rotate(2deg); }
.receipt-stack i { position: absolute; width: 95px; height: 130px; background: rgba(255,248,234,.82); border: 1px solid rgba(91,70,54,.18); box-shadow: 0 12px 25px rgba(91,70,54,.08); }
.receipt-stack i:nth-child(1) { right: 25vw; bottom: 14vh; transform: rotate(8deg); }
.receipt-stack i:nth-child(2) { right: 20vw; bottom: 17vh; transform: rotate(-7deg); }
.receipt-stack i:nth-child(3) { right: 16vw; bottom: 13vh; transform: rotate(14deg); }
.bicycle-bell { position: absolute; left: 16vw; bottom: 22vh; width: 96px; height: 96px; border: 6px solid #5B4636; border-radius: 50%; border-left-color: transparent; transform: rotate(-18deg); }
.bicycle-bell::after { content: ""; position: absolute; right: -24px; top: 39px; width: 32px; height: 8px; background: #5B4636; border-radius: 8px; }
.ants i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #5B4636; bottom: 13vh; animation: antWalk 7s linear infinite; }
.ants i:nth-child(1) { left: 34vw; }
.ants i:nth-child(2) { left: 37vw; animation-delay: .4s; }
.ants i:nth-child(3) { left: 40vw; animation-delay: .8s; }
.ants i:nth-child(4) { left: 43vw; animation-delay: 1.2s; }
.ants i:nth-child(5) { left: 46vw; animation-delay: 1.6s; }

.apricot-window { position: absolute; left: 13vw; top: 14vh; width: 38vw; height: 45vh; border: 10px solid rgba(91,70,54,.24); background: linear-gradient(135deg, rgba(246,181,107,.55), rgba(255,248,234,.2)); box-shadow: 36px 42px 0 rgba(246,181,107,.18); transform: rotate(-2deg); }
.apricot-window i { position: absolute; inset: 0; border-left: 4px solid rgba(91,70,54,.15); left: 50%; }
.apricot-window i:nth-child(2) { border-left: 0; border-top: 4px solid rgba(91,70,54,.15); top: 50%; }
.apricot-window i:nth-child(3) { inset: 15% auto auto 8%; width: 72%; height: 38%; background: rgba(91,70,54,.08); transform: skew(-26deg); }
.wind-chime { position: absolute; right: 19vw; top: 11vh; display: flex; gap: 18px; }
.wind-chime i { width: 10px; height: 95px; background: linear-gradient(#FFF8EA, #BFE7F2); border-radius: 12px; transform-origin: top; animation: sway 4.2s ease-in-out infinite; }
.wind-chime i:nth-child(2) { height: 126px; animation-delay: .8s; }
.wind-chime i:nth-child(3) { height: 80px; animation-delay: 1.4s; }
.kite { position: absolute; right: 13vw; bottom: 18vh; width: 70px; height: 70px; background: linear-gradient(135deg, #F7B7C8 50%, #FFF8EA 50%); transform: rotate(45deg); box-shadow: -40px 40px 0 -28px rgba(123,121,184,.5); }

.lantern-lane { position: absolute; inset: 0; }
.lantern-lane i { position: absolute; width: 42px; height: 68px; background: radial-gradient(circle, #F6B56B, rgba(246,181,107,.25)); border-radius: 50% 50% 44% 44%; box-shadow: 0 0 35px rgba(246,181,107,.5); animation: lanternFloat 5s ease-in-out infinite; }
.lantern-lane i:nth-child(1) { left: 18vw; top: 20vh; }
.lantern-lane i:nth-child(2) { left: 31vw; top: 42vh; animation-delay: .8s; }
.lantern-lane i:nth-child(3) { right: 24vw; top: 22vh; animation-delay: 1.6s; }
.lantern-lane i:nth-child(4) { right: 14vw; bottom: 20vh; animation-delay: 2.2s; }
.tea-cup { position: absolute; right: 20vw; bottom: 13vh; width: 160px; height: 70px; border: 4px solid rgba(255,248,234,.7); border-top: 0; border-radius: 0 0 70px 70px; }
.tea-cup::before { content: ""; position: absolute; right: -48px; top: 8px; width: 46px; height: 36px; border: 4px solid rgba(255,248,234,.65); border-left: 0; border-radius: 0 28px 28px 0; }

.memory-layer { background: linear-gradient(135deg, rgba(255,248,234,.13), rgba(191,231,242,.11)); box-shadow: inset 0 0 90px rgba(255,248,234,.08); }
.notebook-rings { position: absolute; left: 8vw; top: 10vh; bottom: 10vh; display: grid; align-content: space-around; }
.notebook-rings i { width: 42px; height: 22px; border: 3px solid rgba(255,248,234,.45); border-right: 0; border-radius: 20px 0 0 20px; }
.moon-cup { position: absolute; right: 16vw; top: 18vh; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 58% 42%, transparent 0 32px, #FFF8EA 34px 58px, transparent 60px); filter: drop-shadow(0 0 35px rgba(191,231,242,.35)); }
.moon-cup i { position: absolute; left: 28px; bottom: 26px; width: 116px; height: 42px; border: 3px solid rgba(255,248,234,.48); border-top: 0; border-radius: 0 0 50% 50%; }
.memory-lines i { position: absolute; height: 1px; width: 34vw; background: rgba(255,248,234,.16); transform: rotate(-8deg); }
.memory-lines i:nth-child(1) { left: 17vw; top: 22vh; }
.memory-lines i:nth-child(2) { right: 18vw; top: 38vh; }
.memory-lines i:nth-child(3) { left: 23vw; bottom: 31vh; }
.memory-lines i:nth-child(4) { right: 22vw; bottom: 18vh; }
.tucked-note { display: inline-block; margin-top: 1rem; color: #FFF8EA; text-decoration: none; border: 1px solid rgba(255,248,234,.42); padding: .8rem 1.1rem; border-radius: 2px 16px 4px 12px; font-family: "Gaegu", cursive; font-size: 1.4rem; transform: rotate(-2deg); background: rgba(255,248,234,.08); }

@keyframes inkSoak { from { opacity: 0; filter: blur(14px); letter-spacing: .1em; } to { opacity: 1; filter: blur(0); letter-spacing: -.08em; } }
@keyframes ripple { 0%, 100% { transform: scale(.92); opacity: .48; } 50% { transform: scale(1.08); opacity: .86; } }
@keyframes petalDrift { from { transform: translate3d(0, -12vh, 0) rotate(var(--r)); } to { transform: translate3d(var(--dx, 80px), 112vh, 0) rotate(calc(var(--r) + 360deg)); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }
@keyframes spiral { 0%, 100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(42px, -30px) rotate(180deg); } }
@keyframes antWalk { from { transform: translateX(-30px); opacity: .15; } 20%, 80% { opacity: .9; } to { transform: translateX(180px); opacity: .12; } }
@keyframes lanternFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

@media (max-width: 760px) {
    .scene { padding: 9vh 11vw; }
    .right-copy, .left-copy { justify-self: center; margin: 0; }
    .bud-nav { right: 12px; }
    .sun-map { left: 10px; width: 48px; opacity: .45; }
    h1 { font-size: 34vw; }
    h2 { font-size: 15vw; }
    .date-stamp { left: 20vw; top: 10vh; }
    .milk-carton, .bicycle-bell, .receipt-stack, .apricot-window, .wind-chime, .tea-cup, .moon-cup { opacity: .48; }
}