:root {
    --daylight: #F4F1E6;
    --ink: #11131A;
    --eclipse-blue: #1C3A5F;
    --brass: #C5A24A;
    --violet: #6F4BC1;
    --cyan: #8DE5E2;
    --vermilion: #F04B36;
    --display: 'Bricolage Grotesque', sans-serif;
    --serif: 'Cormorant Garamond', serif;
    --kr: 'Noto Sans KR', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--daylight);
    color: var(--ink);
    font-family: var(--kr);
    overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.grain {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: .18;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(17, 19, 26, .12) 0 1px, transparent 1.5px),
        radial-gradient(circle at 78% 64%, rgba(111, 75, 193, .12) 0 1px, transparent 1.4px),
        radial-gradient(circle at 42% 82%, rgba(197, 162, 74, .16) 0 1px, transparent 1.6px);
    background-size: 27px 29px, 39px 37px, 51px 47px;
    mix-blend-mode: multiply;
}

.time-ruler {
    position: fixed;
    right: 2.1vw;
    top: 9vh;
    bottom: 9vh;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font: 700 12px/1 var(--kr);
    letter-spacing: .16em;
    color: var(--ink);
}

.time-ruler::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--ink) 0 8px, transparent 8px 18px);
    opacity: .45;
}

.time-ruler span {
    position: relative;
    padding-right: 32px;
    transform: translateX(calc(var(--drift, 0) * 1px));
    transition: color .4s ease, transform .4s ease;
}

.time-ruler span::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 20px;
    height: 2px;
    background: var(--vermilion);
    transform: translateY(-50%) scaleX(.5);
}

.scene {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(141, 229, 226, .18), transparent 24rem);
    opacity: .72;
}

.dawn {
    background: var(--daylight);
    display: grid;
    place-items: center;
}

.contradiction-weave {
    position: absolute;
    inset: 5vmin;
    opacity: .22;
    background-image:
        linear-gradient(90deg, var(--eclipse-blue) 0 8px, transparent 8px 18px),
        linear-gradient(0deg, var(--brass) 0 8px, transparent 8px 18px);
    background-size: 42px 42px;
    clip-path: polygon(0 13%, 87% 0, 100% 76%, 18% 100%);
}

.horizon {
    position: absolute;
    width: 68vw;
    height: 2px;
    background: var(--vermilion);
    opacity: .78;
}

.horizon-left { left: -9vw; top: 38vh; transform: rotate(-10deg); }
.horizon-right { right: -8vw; bottom: 35vh; transform: rotate(10deg); background: var(--cyan); }

.hero-title-wrap {
    position: relative;
    z-index: 3;
    width: min(82vw, 1100px);
    transform: translate(-4vw, 3vh);
}

.margin-note, .chapter {
    font-family: var(--kr);
    font-size: clamp(.72rem, 1.2vw, .98rem);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.margin-note {
    writing-mode: vertical-rl;
    position: absolute;
    left: -3.8rem;
    top: .65rem;
    color: var(--eclipse-blue);
}

h1, h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -.07em;
}

h1 {
    font-size: clamp(5rem, 17vw, 15rem);
    line-height: .78;
}

.double-shadow {
    text-shadow: -24px 20px 0 rgba(111, 75, 193, .42), 28px -18px 0 rgba(240, 75, 54, .38);
    transition: text-shadow .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}

.dial-shift .double-shadow {
    transform: rotate(-1.5deg) translateX(2vw);
    text-shadow: 28px 22px 0 rgba(28, 58, 95, .42), -26px -20px 0 rgba(141, 229, 226, .65);
}

.diary-line {
    max-width: 560px;
    margin: 2.2rem 0 0 12vw;
    font: italic 500 clamp(1.45rem, 3vw, 2.8rem)/1.03 var(--serif);
    color: var(--eclipse-blue);
}

.faulty-sundial {
    position: absolute;
    right: 9vw;
    top: 9vh;
    z-index: 5;
}

.dial-button, .quiet-affordance {
    border: 1px solid var(--ink);
    background: transparent;
    padding: .72rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--kr);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: lowercase;
    box-shadow: -8px 8px 0 var(--cyan), 8px -8px 0 rgba(197, 162, 74, .55);
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

.dial-button:hover, .quiet-affordance:hover {
    transform: translate(5px, -5px);
    box-shadow: 8px 8px 0 var(--violet), -8px -8px 0 rgba(240, 75, 54, .45);
    background: rgba(244, 241, 230, .75);
}

.dial-face {
    position: relative;
    margin: 1.8rem auto 0;
    width: 190px;
    height: 190px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: radial-gradient(circle, transparent 0 18%, rgba(197, 162, 74, .22) 19% 20%, transparent 21%), var(--daylight);
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.dial-shift .dial-face { transform: rotate(38deg); }

.dial-mark { position: absolute; left: 50%; top: 12px; width: 2px; height: 34px; background: var(--ink); transform-origin: 50% 83px; }
.mark-b { transform: rotate(90deg); background: var(--vermilion); }
.mark-c { transform: rotate(225deg); background: var(--violet); }
.gnomon { position: absolute; left: 50%; top: 48%; width: 14px; height: 76px; background: var(--ink); clip-path: polygon(0 100%, 100% 100%, 52% 0); transform: translate(-50%, -50%) rotate(-28deg); }
.shadow { position: absolute; left: 50%; top: 50%; width: 120px; height: 16px; transform-origin: 0 50%; filter: blur(.2px); }
.wrong-shadow-one { background: rgba(111, 75, 193, .42); transform: rotate(-28deg); }
.wrong-shadow-two { background: rgba(240, 75, 54, .36); transform: rotate(152deg); }

.calendar-scrap {
    position: absolute;
    z-index: 4;
    background: rgba(244, 241, 230, .86);
    border: 1px solid var(--ink);
    padding: 1rem 1.1rem;
    min-width: 150px;
    box-shadow: 13px -13px 0 rgba(17, 19, 26, .22), -10px 12px 0 rgba(141, 229, 226, .55);
    transform: rotate(var(--rot, -4deg));
}
.calendar-scrap span, .calendar-scrap em { display: block; font: 700 .72rem/1.2 var(--kr); letter-spacing: .15em; color: var(--vermilion); text-transform: uppercase; }
.calendar-scrap strong { display: block; margin: .45rem 0; font: 800 1.55rem/.9 var(--display); }
.calendar-scrap em { color: var(--eclipse-blue); font-style: normal; }
.scrap-dawn { left: 8vw; bottom: 10vh; --rot: 7deg; }

.noon {
    background: linear-gradient(102deg, var(--daylight) 0 49.6%, var(--ink) 49.8% 100%);
    color: var(--ink);
}
.hard-seam { position: absolute; inset: -8vh auto -8vh 50%; width: 9px; background: var(--vermilion); transform: rotate(6deg); z-index: 2; }
.black-sun {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(180px, 28vw, 410px);
    height: clamp(180px, 28vw, 410px);
    border-radius: 50%;
    background: var(--ink);
    transform: translate(-50%, -50%);
    box-shadow: -34px 30px 0 rgba(111, 75, 193, .55), 36px -28px 0 rgba(141, 229, 226, .38);
    transition: background .45s ease, box-shadow .45s ease;
}
.black-sun span { position: absolute; inset: 20%; border-radius: 50%; border: 1px solid var(--brass); }
.black-sun.moon { background: var(--daylight); box-shadow: -34px 30px 0 rgba(141, 229, 226, .55), 36px -28px 0 rgba(240, 75, 54, .38); }
.clock-orbit { position: absolute; left: 50%; top: 50%; width: 72vmin; height: 72vmin; border: 1px dashed rgba(197, 162, 74, .55); border-radius: 50%; transform: translate(-50%, -50%); animation: contrarySpin 22s linear infinite; }
.clock-orbit i { position: absolute; left: 50%; top: -6px; width: 3px; height: 46px; background: var(--brass); transform-origin: 50% 36vmin; }
.clock-orbit i:nth-child(2) { transform: rotate(90deg); background: var(--cyan); }
.clock-orbit i:nth-child(3) { transform: rotate(180deg); }
.clock-orbit i:nth-child(4) { transform: rotate(270deg); background: var(--vermilion); }
@keyframes contrarySpin { to { transform: translate(-50%, -50%) rotate(-360deg); } }

.scene-copy { position: absolute; z-index: 5; max-width: 460px; }
.scene-copy h2, .final-copy h2 { font-size: clamp(3.2rem, 7.5vw, 8rem); line-height: .82; }
.scene-copy p, .final-copy p { font: 500 clamp(1.2rem, 2.15vw, 2rem)/1.12 var(--serif); }
.copy-left { left: 7vw; top: 13vh; }
.copy-right { right: 6vw; bottom: 12vh; color: var(--daylight); text-align: right; }
.inverted { transform: rotate(2deg); }
.scrap-noon { right: 16vw; top: 11vh; --rot: -8deg; color: var(--ink); }

.door { background: var(--eclipse-blue); color: var(--daylight); }
.door::before { content: ""; position: absolute; inset: 0; background: linear-gradient(35deg, transparent 0 46%, var(--cyan) 46.2% 47%, transparent 47.2%), radial-gradient(circle at 70% 20%, rgba(197, 162, 74, .28), transparent 24rem); }
.door-stage { position: absolute; left: 11vw; top: 14vh; width: 38vw; height: 72vh; perspective: 1200px; }
.door-panel {
    position: absolute;
    inset: 0;
    border: 3px solid var(--daylight);
    background: linear-gradient(90deg, var(--eclipse-blue), #11131A);
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.2, .8, .2, 1);
    display: grid;
    align-content: space-between;
    padding: 2rem;
    box-shadow: 28px -24px 0 rgba(240, 75, 54, .64), -28px 26px 0 rgba(141, 229, 226, .38);
}
.door-panel.open { transform: rotateY(-62deg); }
.door-panel span:first-child { font: 800 clamp(3rem, 8vw, 8rem)/.8 var(--display); letter-spacing: -.06em; }
.door-panel span:last-child { justify-self: end; font: 700 clamp(1rem, 2vw, 2rem)/1 var(--kr); color: var(--cyan); }
.door-shadow { position: absolute; left: 12%; top: 14%; width: 83%; height: 78%; background: rgba(197, 162, 74, .5); transform: skewY(-10deg) translateX(48%); filter: blur(1px); }
.door-stage .quiet-affordance { position: absolute; right: -5vw; bottom: 5vh; color: var(--daylight); border-color: var(--daylight); }
.door-copy { right: 7vw; top: 22vh; }
.birds span { position: absolute; width: 58px; height: 24px; border-top: 3px solid var(--cyan); border-radius: 50%; animation: birdCross 12s linear infinite; }
.birds span:nth-child(1) { top: 18vh; left: -8vw; }
.birds span:nth-child(2) { top: 25vh; right: -8vw; animation-direction: reverse; border-color: var(--brass); }
.birds span:nth-child(3) { bottom: 20vh; left: -8vw; animation-duration: 16s; }
.birds span:nth-child(4) { bottom: 28vh; right: -8vw; animation-direction: reverse; animation-duration: 15s; border-color: var(--vermilion); }
@keyframes birdCross { to { transform: translateX(115vw) scaleX(-1); } }

.rain { background: var(--daylight); color: var(--ink); }
.rain::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(108deg, transparent 0 28px, rgba(141, 229, 226, .36) 29px 31px, transparent 32px 58px); clip-path: polygon(0 0, 100% 13%, 84% 100%, 0 87%); }
.umbrella-sun { position: absolute; left: 8vw; top: 17vh; width: min(560px, 50vw); height: 62vh; }
.umbrella-canopy { position: absolute; left: 0; top: 0; width: 100%; height: 44%; background: var(--brass); clip-path: ellipse(50% 45% at 50% 100%); box-shadow: -22px 22px 0 var(--violet), 20px -18px 0 rgba(141, 229, 226, .75); }
.umbrella-handle { position: absolute; left: 50%; top: 38%; width: 5px; height: 52%; background: var(--ink); }
.umbrella-handle::after { content: ""; position: absolute; bottom: -22px; left: -34px; width: 70px; height: 50px; border: 5px solid var(--ink); border-top: 0; border-radius: 0 0 50px 50px; }
.sun-rain i { position: absolute; top: 20%; width: 4px; height: 110px; background: linear-gradient(var(--cyan), var(--vermilion)); animation: upwardRain 2.8s ease-in-out infinite; }
.sun-rain i:nth-child(1) { left: 8%; animation-delay: -.2s; }.sun-rain i:nth-child(2) { left: 24%; animation-delay: -.8s; }.sun-rain i:nth-child(3) { left: 42%; animation-delay: -1.4s; }.sun-rain i:nth-child(4) { left: 60%; animation-delay: -.5s; }.sun-rain i:nth-child(5) { left: 76%; animation-delay: -1.9s; }.sun-rain i:nth-child(6) { left: 90%; animation-delay: -1.1s; }
@keyframes upwardRain { 0% { transform: translateY(220px); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateY(-55px); opacity: 0; } }
.rain-copy { right: 7vw; top: 18vh; }
.read-shadow { position: absolute; right: 17vw; bottom: 15vh; }
.paper-slips span { position: absolute; padding: .45rem .65rem; background: var(--daylight); border: 1px solid var(--ink); font: 700 .85rem/1 var(--kr); box-shadow: 7px -7px 0 rgba(240, 75, 54, .42); transform: rotate(var(--r)); transition: transform .5s ease; }
.paper-slips.active span { transform: translateY(-18px) rotate(calc(var(--r) * -1)); }
.paper-slips span:nth-child(1) { left: 58vw; bottom: 36vh; --r: 8deg; }.paper-slips span:nth-child(2) { left: 72vw; bottom: 30vh; --r: -11deg; }.paper-slips span:nth-child(3) { left: 66vw; bottom: 21vh; --r: 17deg; }.paper-slips span:nth-child(4) { left: 82vw; bottom: 43vh; --r: -5deg; }.paper-slips span:nth-child(5) { left: 50vw; bottom: 18vh; --r: -17deg; }

.tomorrow { background: var(--ink); color: var(--daylight); display: grid; place-items: center; }
.moon-seam { position: absolute; inset: 0; background: linear-gradient(84deg, transparent 0 46%, var(--daylight) 46.1% 49%, transparent 49.1%), radial-gradient(circle at 48% 50%, var(--daylight) 0 11vmin, transparent 11.2vmin); opacity: .9; }
.spiral-path { position: absolute; width: 72vmin; height: 72vmin; border-radius: 50%; animation: contrarySpin 28s linear infinite reverse; }
.spiral-path::before { content: ""; position: absolute; inset: 8%; border: 2px dotted var(--cyan); border-radius: 50%; box-shadow: inset 0 0 0 5vmin transparent, 0 0 0 12vmin rgba(111, 75, 193, .16); }
.spiral-path span { position: absolute; left: 50%; top: 50%; font: 700 .9rem/1 var(--kr); letter-spacing: .12em; color: var(--cyan); transform: rotate(calc(var(--i) * 60deg)) translateX(31vmin) rotate(calc(var(--i) * -60deg)); }
.final-copy { position: relative; z-index: 5; width: min(780px, 78vw); text-align: center; }
.final-copy .diary-line { margin: 2rem auto; color: var(--daylight); }
.final-copy .quiet-affordance { color: var(--daylight); border-color: var(--daylight); }

.chapter { display: inline-block; margin-bottom: 1rem; color: var(--vermilion); }
.noon .copy-right .chapter, .tomorrow .chapter { color: var(--cyan); }

.scene.in-view .scene-copy, .scene.in-view .final-copy, .scene.in-view .calendar-scrap { animation: crossSettle .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes crossSettle { from { opacity: 0; transform: translateX(var(--enter, -44px)) rotate(-3deg); } to { opacity: 1; transform: translateX(0) rotate(var(--rot, 0deg)); } }

@media (max-width: 760px) {
    .time-ruler { right: 1rem; top: 5vh; bottom: 5vh; }
    .margin-note { writing-mode: horizontal-tb; position: static; margin-bottom: 1rem; }
    .hero-title-wrap { width: 84vw; transform: translate(-3vw, 6vh); }
    h1 { font-size: clamp(4.5rem, 23vw, 8rem); }
    .faulty-sundial { right: 5vw; top: 4vh; transform: scale(.72); transform-origin: top right; }
    .scene-copy, .copy-left, .copy-right, .door-copy, .rain-copy { left: 7vw; right: 11vw; top: auto; bottom: 8vh; text-align: left; }
    .black-sun { top: 34%; }
    .door-stage { left: 8vw; top: 8vh; width: 72vw; height: 48vh; }
    .umbrella-sun { left: 5vw; width: 80vw; top: 10vh; }
    .paper-slips span { display: none; }
}