:root {
    --ink: #15110E;
    --paper: #F4E8CF;
    --cinnabar: #C83A2D;
    --brass: #F2B84B;
    --brush: #6A6258;
    --jade: #9FC8B8;
    --indigo: #243B6B;
    --display: 'Song Myung', serif;
    --serif: 'Noto Serif KR', serif;
    --sans: 'IBM Plex Sans KR', sans-serif;
    --latin: 'Cormorant Garamond', serif;
}

/* IBM Plex Sans KR* KR** for small interface labels */

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--ink);
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--serif);
    overflow-x: hidden;
}

button { font: inherit; }

.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: .45;
    mix-blend-mode: multiply;
    background:
        radial-gradient(circle at 20% 30%, rgba(106, 98, 88, .18) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 40%, rgba(21, 17, 14, .09) 0 1px, transparent 2px),
        repeating-linear-gradient(105deg, rgba(106, 98, 88, .08) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(8deg, rgba(244, 232, 207, .18) 0 2px, transparent 2px 11px);
}

.stroke-ribbon {
    position: fixed;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: .58rem;
    padding: .7rem .48rem;
    border: 1px solid rgba(244, 232, 207, .22);
    border-radius: 999px;
    background: rgba(21, 17, 14, .62);
    box-shadow: 0 18px 50px rgba(21, 17, 14, .35);
    backdrop-filter: blur(10px);
}

.ribbon-mark {
    width: 3.1rem;
    height: 3.1rem;
    border: 0;
    border-radius: 50%;
    background: rgba(244, 232, 207, .08);
    color: rgba(244, 232, 207, .55);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .45s ease, background .45s ease, color .45s ease, box-shadow .45s ease;
}

.ribbon-mark span {
    font-family: var(--display);
    font-size: 1.35rem;
    line-height: 1;
}

.ribbon-mark small {
    display: none;
}

.ribbon-mark.is-active {
    color: var(--paper);
    background: var(--cinnabar);
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 0 0 5px rgba(200, 58, 45, .18), 0 0 32px rgba(242, 184, 75, .38);
}

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

.scene::before {
    content: "";
    position: absolute;
    inset: 4vmin;
    border: 1px solid rgba(106, 98, 88, .22);
    transform: rotate(var(--tilt, -.7deg));
    pointer-events: none;
}

.scene-label {
    margin: 0 0 .9rem;
    color: var(--cinnabar);
    font-family: var(--sans);
    font-size: .77rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

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

h2 {
    font-size: clamp(3.2rem, 8vw, 9rem);
    line-height: .9;
}

p {
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.72;
}

.scene-dot {
    color: var(--paper);
    background:
        radial-gradient(circle at 18% 32%, rgba(200, 58, 45, .22), transparent 10rem),
        radial-gradient(circle at 78% 18%, rgba(159, 200, 184, .12), transparent 18rem),
        linear-gradient(145deg, var(--ink) 0%, #1f1b17 46%, var(--indigo) 130%);
}

.sheet-dark {
    position: absolute;
    inset: 8vmin 11vmin;
    background: rgba(244, 232, 207, .035);
    border: 1px solid rgba(244, 232, 207, .16);
    transform: rotate(-2.6deg);
    box-shadow: 0 36px 80px rgba(0,0,0,.3);
}

.guide-lines {
    position: absolute;
    inset: 12% 8%;
    opacity: .26;
}

.guide-lines span {
    position: absolute;
    height: 1px;
    width: 76vw;
    background: linear-gradient(90deg, transparent, var(--brush), transparent);
    transform: rotate(-9deg);
}

.guide-lines span:nth-child(1) { top: 14%; left: 2%; }
.guide-lines span:nth-child(2) { top: 38%; left: 9%; }
.guide-lines span:nth-child(3) { top: 60%; left: -3%; }
.guide-lines span:nth-child(4) { top: 78%; left: 12%; }

.dot-stage {
    position: absolute;
    left: 4vw;
    top: 8vh;
    width: min(72rem, 92vw);
    height: 36rem;
}

.cinnabar-dot {
    position: absolute;
    left: 10.8%;
    top: 43%;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--cinnabar);
    box-shadow: 0 0 0 .8rem rgba(200, 58, 45, .16), 0 0 4rem rgba(200, 58, 45, .58);
    animation: dotLand 1.6s cubic-bezier(.19, 1, .22, 1) both, bleed 2.8s 1.4s ease-in-out infinite alternate;
}

.brush-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.brush-svg path {
    fill: none;
    stroke: var(--paper);
    stroke-linecap: round;
    stroke-width: 18;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.3));
    animation: drawStroke 2.8s 1.05s cubic-bezier(.2,.8,.18,1) forwards;
}

.brush-svg .bleed-path {
    stroke: var(--cinnabar);
    stroke-width: 34;
    opacity: .16;
    filter: blur(9px);
    animation-delay: 1.25s;
}

.jamo-split {
    position: absolute;
    font-family: var(--display);
    font-size: clamp(8rem, 18vw, 18rem);
    color: rgba(244, 232, 207, .16);
    line-height: 1;
    animation: splitJamo 2.8s 2.6s cubic-bezier(.19,1,.22,1) forwards;
}

.split-giyeok { left: 42%; top: 18%; }
.split-vowel { left: 67%; top: 34%; animation-delay: 2.85s; }

.hero-copy {
    position: absolute;
    left: 12vw;
    bottom: 10vh;
    max-width: 48rem;
}

.kicker {
    font-family: var(--latin);
    font-size: clamp(1.4rem, 2.4vw, 2.5rem);
    color: var(--brass);
    margin: 0 0 .3rem;
    font-style: italic;
}

h1 {
    font-size: clamp(6rem, 18vw, 17rem);
    line-height: .78;
    text-shadow: 0 24px 50px rgba(0,0,0,.4);
}

.subtitle {
    max-width: 42rem;
    color: rgba(244, 232, 207, .76);
}

.seal {
    position: absolute;
    display: grid;
    place-items: center;
    width: 6.8rem;
    height: 6.8rem;
    border: .34rem solid var(--cinnabar);
    color: var(--cinnabar);
    font-family: var(--display);
    font-size: 1.15rem;
    transform: rotate(8deg);
    opacity: .92;
    animation: stampPress .9s 3.2s cubic-bezier(.2,1.4,.3,1) both;
}

.seal-one { right: 15vw; bottom: 17vh; }
.margin-note, .stroke-annotation {
    position: absolute;
    font-family: var(--sans);
    color: rgba(244, 232, 207, .54);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.note-one { right: 11vw; top: 18vh; transform: rotate(90deg); }

.scene-workshop {
    --tilt: 1.4deg;
    background:
        radial-gradient(circle at 82% 20%, rgba(242, 184, 75, .28), transparent 13rem),
        linear-gradient(116deg, var(--paper) 0 58%, #eadcbc 58% 100%);
}

.paper-panel {
    position: absolute;
    left: 9vw;
    top: 15vh;
    width: min(36rem, 82vw);
    padding: 2.5rem;
    background: rgba(244, 232, 207, .78);
    border: 1px solid rgba(106, 98, 88, .24);
    box-shadow: 18px 22px 0 rgba(106, 98, 88, .08);
    transform: rotate(-3deg);
}

.workshop-table {
    position: absolute;
    right: 8vw;
    top: 18vh;
    width: min(48rem, 76vw);
    height: 60vh;
    transform: rotate(3deg);
}

.type-block, .vowel-beam {
    position: absolute;
    display: grid;
    place-items: center;
    transition: transform .55s cubic-bezier(.19,1,.22,1), box-shadow .55s ease, background .55s ease;
}

.type-block {
    width: 12rem;
    height: 12rem;
    background: var(--ink);
    color: var(--paper);
    border: .8rem solid #2b211a;
    box-shadow: 0 24px 34px rgba(21, 17, 14, .34), inset 0 0 0 1px rgba(244,232,207,.18);
}

.type-block span { font-family: var(--display); font-size: 8rem; line-height: 1; }
.type-block em {
    position: absolute;
    left: 50%;
    bottom: -2.2rem;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--sans);
    font-style: normal;
    font-size: .78rem;
    color: var(--brush);
    opacity: 0;
    transition: opacity .35s ease;
}
.type-block:hover { transform: translateY(-1rem) rotate(-4deg); box-shadow: 0 34px 44px rgba(21, 17, 14, .3); }
.type-block:hover em { opacity: 1; }
.block-g { left: 6%; top: 4%; }
.block-n { right: 13%; top: 20%; transform: rotate(8deg); }
.block-m { left: 29%; bottom: 2%; transform: rotate(-6deg); }

.vowel-beam {
    width: 3.4rem;
    height: 18rem;
    color: var(--indigo);
    background: linear-gradient(180deg, rgba(159,200,184,.05), var(--jade), rgba(242,184,75,.35));
    border-radius: 999px;
    font-family: var(--display);
    font-size: 4.8rem;
    box-shadow: 0 0 38px rgba(159, 200, 184, .55);
    animation: beamSlide 3.4s ease-in-out infinite alternate;
}
.beam-a { left: 2%; bottom: 4%; }
.beam-o { left: 58%; top: 1%; transform: rotate(90deg); animation-delay: .3s; }
.beam-u { right: 0; bottom: 12%; transform: rotate(90deg); animation-delay: .6s; }
.stroke-annotation { left: 12vw; bottom: 11vh; color: var(--brush); }
.gate-glyph {
    position: absolute;
    right: -6vw;
    bottom: -12vh;
    font-family: var(--display);
    font-size: 42vw;
    color: rgba(36, 59, 107, .08);
    line-height: .8;
}

.scene-courtyard {
    --tilt: -1.8deg;
    background:
        radial-gradient(circle at 20% 25%, rgba(159, 200, 184, .34), transparent 13rem),
        linear-gradient(160deg, #f8ecd2, var(--paper) 54%, #e3d2ad);
}

.courtyard-moon {
    position: absolute;
    left: -4vw;
    top: -11vh;
    font-family: var(--display);
    font-size: 36vw;
    color: rgba(36, 59, 107, .11);
    line-height: 1;
}

.courtyard-copy {
    position: absolute;
    right: 10vw;
    top: 12vh;
    max-width: 40rem;
}

.assembly-board {
    position: absolute;
    left: 8vw;
    bottom: 12vh;
    width: min(62rem, 84vw);
    height: 50vh;
    transform: rotate(-4deg);
}

.syllable-tray {
    position: absolute;
    width: 16rem;
    height: 16rem;
    background: rgba(21, 17, 14, .91);
    border: .7rem solid rgba(106, 98, 88, .75);
    box-shadow: 0 26px 50px rgba(21,17,14,.28), inset 0 0 0 1px rgba(244,232,207,.14);
    transition: transform .65s cubic-bezier(.19,1,.22,1);
}
.tray-one { left: 2%; top: 4%; }
.tray-two { left: 33%; top: 30%; transform: rotate(6deg); }
.tray-three { right: 2%; top: 5%; transform: rotate(-7deg); }
.syllable-tray.is-locked { transform: rotate(0deg) scale(1.04); }

.piece, .syllable-tray strong {
    position: absolute;
    font-family: var(--display);
    line-height: 1;
}
.piece { color: var(--jade); font-size: 4.2rem; opacity: .78; transition: transform .7s cubic-bezier(.19,1,.22,1), opacity .7s ease; }
.initial { left: 2.2rem; top: 2rem; }
.medial { right: 2.1rem; top: 3.4rem; color: var(--brass); }
.final { left: 4.5rem; bottom: 2.2rem; color: var(--paper); }
.syllable-tray strong {
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--paper);
    font-size: 10rem;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .65s ease, transform .65s cubic-bezier(.19,1,.22,1);
}
.syllable-tray.is-locked .piece { opacity: 0; transform: translate(0,0) scale(.4); }
.syllable-tray.is-locked strong { opacity: 1; transform: scale(1); }
.paving-pattern {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: rgba(106,98,88,.2);
    font-family: var(--display);
    font-size: 8vw;
    white-space: nowrap;
}

.scene-lantern {
    color: var(--paper);
    background:
        radial-gradient(circle at 76% 22%, rgba(242,184,75,.22), transparent 16rem),
        linear-gradient(180deg, var(--indigo), var(--ink) 70%);
}

.night-sky {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(244,232,207,.42) 0 1px, transparent 2px);
    background-size: 7rem 7rem;
    opacity: .24;
}
.lantern-copy { position: absolute; left: 9vw; top: 12vh; max-width: 42rem; }
.lantern-copy p:not(.scene-label) { color: rgba(244,232,207,.76); }
.lantern-string {
    position: absolute;
    left: 7vw;
    right: 6vw;
    top: 47vh;
    height: 2px;
    background: rgba(244,232,207,.25);
    transform: rotate(-5deg);
}
.lantern {
    position: absolute;
    top: -1.5rem;
    width: 10rem;
    height: 12rem;
    border-radius: 50% 50% 44% 44%;
    background: radial-gradient(circle, rgba(242,184,75,.96), rgba(242,184,75,.42) 48%, rgba(200,58,45,.22));
    border: 2px solid rgba(244,232,207,.32);
    display: grid;
    place-items: center;
    box-shadow: 0 0 52px rgba(242,184,75,.45);
    animation: lanternBreath 3.2s ease-in-out infinite alternate;
}
.lantern::before { content: ""; position: absolute; top: -3.3rem; height: 3.3rem; width: 1px; background: rgba(244,232,207,.32); }
.lantern span { font-family: var(--display); font-size: 7rem; color: rgba(21,17,14,.68); }
.lantern:nth-child(1) { left: 2%; }
.lantern:nth-child(2) { left: 24%; animation-delay: .4s; }
.lantern:nth-child(3) { left: 47%; animation-delay: .8s; }
.lantern:nth-child(4) { left: 68%; animation-delay: .2s; }
.lantern:nth-child(5) { right: 2%; animation-delay: .65s; }
.lantern-small { width: 8rem; height: 9rem; }
.lantern-tall { height: 15rem; }
.roof-tiles {
    position: absolute;
    left: -3vw;
    bottom: 9vh;
    color: rgba(159,200,184,.18);
    font-family: var(--display);
    font-size: 9vw;
    white-space: nowrap;
}
.firefly {
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    color: var(--cinnabar);
    font-family: var(--display);
    font-size: 3rem;
    text-shadow: 0 0 22px var(--brass);
    left: 50%;
    top: 50%;
}

.scene-dawn {
    background:
        radial-gradient(circle at 50% 28%, rgba(242,184,75,.5), transparent 17rem),
        linear-gradient(180deg, #fff0cf 0%, var(--paper) 44%, #d7c49d 100%);
}
.dawn-banner {
    position: absolute;
    left: 6vw;
    top: 12vh;
    right: 6vw;
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 3vw, 3rem);
    transform: rotate(-2deg);
}
.dawn-banner span {
    width: clamp(8rem, 24vw, 22rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--brass);
    font-family: var(--display);
    font-size: clamp(6rem, 17vw, 16rem);
    box-shadow: 0 34px 60px rgba(21,17,14,.25), inset 0 0 0 .65rem rgba(244,232,207,.12);
    animation: canopyGlow 2.6s ease-in-out infinite alternate;
}
.dawn-banner span:nth-child(2) { color: var(--jade); animation-delay: .35s; transform: translateY(3vh); }
.dawn-banner span:nth-child(3) { color: var(--cinnabar); animation-delay: .7s; }
.final-copy {
    position: absolute;
    left: 14vw;
    bottom: 10vh;
    max-width: 45rem;
}
.seal-final { right: 12vw; bottom: 11vh; background: rgba(244,232,207,.28); animation-delay: .4s; }
.folded-banner {
    position: absolute;
    padding: .8rem 1.4rem;
    background: var(--indigo);
    color: var(--paper);
    font-family: var(--sans);
    letter-spacing: .1em;
    box-shadow: 0 14px 28px rgba(21,17,14,.2);
}
.banner-one { right: 9vw; top: 28vh; transform: rotate(7deg); }
.banner-two { left: 8vw; top: 6vh; transform: rotate(-7deg); background: var(--cinnabar); }

.scene.is-visible .paper-panel,
.scene.is-visible .courtyard-copy,
.scene.is-visible .lantern-copy,
.scene.is-visible .final-copy {
    animation: liftPaper .85s cubic-bezier(.19,1,.22,1) both;
}

@keyframes dotLand { from { transform: scale(4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bleed { from { box-shadow: 0 0 0 .35rem rgba(200,58,45,.16), 0 0 3rem rgba(200,58,45,.42); } to { box-shadow: 0 0 0 1.25rem rgba(200,58,45,.08), 0 0 5rem rgba(242,184,75,.25); } }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
@keyframes splitJamo { to { color: rgba(244,232,207,.62); transform: translateY(-1.2rem) rotate(-8deg); } }
@keyframes stampPress { 0% { opacity: 0; transform: scale(1.8) rotate(18deg); filter: blur(4px); } 70% { opacity: 1; transform: scale(.92) rotate(5deg); } 100% { opacity: .92; transform: scale(1) rotate(8deg); filter: blur(0); } }
@keyframes beamSlide { from { box-shadow: 0 0 20px rgba(159,200,184,.35); } to { box-shadow: 0 0 58px rgba(242,184,75,.45); } }
@keyframes lanternBreath { from { transform: translateY(0) scale(.96); } to { transform: translateY(.8rem) scale(1.04); } }
@keyframes canopyGlow { from { box-shadow: 0 28px 46px rgba(21,17,14,.22), 0 0 18px rgba(242,184,75,.12); } to { box-shadow: 0 38px 70px rgba(21,17,14,.28), 0 0 54px rgba(242,184,75,.42); } }
@keyframes liftPaper { from { opacity: .2; transform: translateY(2rem) rotate(-5deg); } to { opacity: 1; } }

@media (max-width: 760px) {
    .stroke-ribbon { right: .5rem; transform: translateY(-50%) scale(.78); }
    .hero-copy, .paper-panel, .courtyard-copy, .lantern-copy, .final-copy { left: 7vw; right: 14vw; width: auto; max-width: none; }
    .workshop-table { right: 16vw; top: 45vh; transform: scale(.72) rotate(3deg); transform-origin: top right; }
    .assembly-board { transform: scale(.68) rotate(-4deg); transform-origin: bottom left; }
    .dawn-banner { flex-direction: column; align-items: flex-end; top: 8vh; }
    .dawn-banner span { width: 9rem; }
}