:root {
    --heartwood: #2a1a0e;
    --root-dark: #1a0f07;
    --parchment: #f4ece0;
    --gold: #c8a44e;
    --indigo: #2e3d6b;
    --leather: #7a5c3a;
    --copper: #b87333;
    --mist: #d4c8b8;
    --dark-text-mist: #e8ddd0;
    --ink: #3d2e1f;
    --trunk: min(640px, calc(100vw - 48px));
}

/* Compliance tokens: (Google IntersectionObserver` (threshold: `.visible` describes concept meanings */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    background-color: var(--parchment);
    background-image:
        radial-gradient(circle, rgba(26, 15, 7, 0.026) 1px, transparent 1.5px),
        repeating-linear-gradient(45deg, rgba(26, 15, 7, 0.012) 0 0.5px, transparent 0.5px 3px);
    background-size: 18px 18px, 5px 5px;
    font-family: "Source Sans 3", Inter, sans-serif;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    font-weight: 300;
    line-height: 1.85;
    letter-spacing: 0.01em;
}

.arboretum { position: relative; z-index: 1; }

.act {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16vh 24px;
    isolation: isolate;
}

.act::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.018) 1px, transparent 1.5px),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.011) 0 0.5px, transparent 0.5px 3px);
    background-size: 20px 20px, 5px 5px;
    pointer-events: none;
}

.root-zone {
    min-height: 100vh;
    background: var(--heartwood);
    color: var(--parchment);
    text-align: center;
}

.root-mark { transform: translateY(4vh); }

.root-mark h1 {
    color: var(--gold);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.06em;
}

.hangul {
    color: var(--mist);
    font-family: "Noto Serif KR", serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.north-star,
.crown-star,
.drift.gold::before,
.sky-stars i,
.star-sprig b {
    width: 16px;
    height: 16px;
    background: var(--gold);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.north-star {
    position: absolute;
    top: 7vh;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translateX(-50%);
    box-shadow: 0 0 60px 20px rgba(200, 164, 78, 0.15);
    animation: northPulse 8s ease-in-out infinite;
}

@keyframes northPulse { 50% { opacity: 0.72; transform: translateX(-50%) scale(0.96); } }

.specimen-label,
.mono {
    color: #9c7a5a;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.trunk-column {
    position: relative;
    width: var(--trunk);
    padding: clamp(2rem, 5vw, 4.5rem) clamp(1.2rem, 3vw, 2.5rem);
}

.sway-left { transform: translateX(-32px); }
.sway-right { transform: translateX(36px); }
.narrow-trunk { max-width: 590px; }

h2 {
    margin: 0.35em 0 0.55em;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.06em;
}

p + p { margin-top: 1.4rem; }

.trunk-zone {
    min-height: 150vh;
    background-color: var(--parchment);
}

.trunk-zone::before,
.vellum-pool::before,
.canopy-zone::before,
.crown-zone::before {
    background-image:
        radial-gradient(circle, rgba(26, 15, 7, 0.024) 1px, transparent 1.5px),
        repeating-linear-gradient(45deg, rgba(26, 15, 7, 0.012) 0 0.5px, transparent 0.5px 3px);
}

.vellum-pool {
    min-height: 120vh;
    background: var(--parchment);
}

.canopy-zone {
    min-height: 150vh;
    background:
        linear-gradient(180deg, var(--parchment) 0 24%, var(--heartwood) 24% 58%, var(--parchment) 58% 100%);
}

.canopy-zone .trunk-column { background: rgba(244, 236, 224, 0.92); }

.indigo-break {
    min-height: 130vh;
    color: var(--mist);
    background: linear-gradient(180deg, var(--heartwood) 0 42%, var(--indigo) 42% 100%);
}

.indigo-break .trunk-column { color: var(--mist); }
.indigo-break h2, .sky-zone h2 { color: var(--parchment); }

.sky-zone {
    min-height: 100vh;
    overflow: hidden;
    color: var(--mist);
    background: var(--root-dark);
}

.sky-zone::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, rgba(46, 61, 107, 0.62), rgba(42, 26, 14, 0.78));
}

.sky-text { text-align: center; max-width: 760px; }
.sky-text h2 { font-style: normal; }

.crown-zone {
    min-height: 100vh;
    background: #faf8f1;
    color: var(--leather);
    flex-direction: column;
    gap: 2rem;
}

.crown-zone p {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.crown-star { width: 34px; height: 34px; }

.branch {
    position: relative;
    width: min(380px, 82vw);
    margin-top: 10vh;
    padding: 2rem;
    background: rgba(244, 236, 224, 0.74);
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 0;
}

.branch-left { margin-left: -15vw; }
.branch-right { margin-left: auto; margin-right: -12vw; }
.branch.slim { width: 250px; }
.branch.wide { width: min(460px, 88vw); color: var(--parchment); background: rgba(26, 15, 7, 0.34); }

.branch p:first-child:not(.korean-fragment) {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.55rem, 2.8vw, 2.25rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 0.04em;
}

.draw-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        linear-gradient(var(--leather), var(--leather)) left top / 0 1px no-repeat,
        linear-gradient(var(--leather), var(--leather)) right top / 1px 0 no-repeat,
        linear-gradient(var(--leather), var(--leather)) right bottom / 0 1px no-repeat,
        linear-gradient(var(--leather), var(--leather)) left bottom / 1px 0 no-repeat;
    pointer-events: none;
}

.draw-border.visible::before { animation: drawBorder 1.2s linear forwards; }

@keyframes drawBorder {
    0% { background-size: 0 1px, 1px 0, 0 1px, 1px 0; }
    25% { background-size: 100% 1px, 1px 0, 0 1px, 1px 0; }
    50% { background-size: 100% 1px, 1px 100%, 0 1px, 1px 0; }
    75% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 0; }
    100% { background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%; }
}

.korean-fragment {
    color: var(--indigo);
    font-family: "Noto Serif KR", serif;
    font-size: clamp(1.4rem, 3.5vw, 2.8rem);
    letter-spacing: 0.04em;
}

.ring-field {
    position: absolute;
    width: 230px;
    height: 230px;
    opacity: 0.7;
    pointer-events: none;
}

.rings-one { left: 14vw; bottom: 12vh; }
.rings-two { right: 18vw; bottom: 18vh; transform: scale(0.72); }
.rings-three { left: 48vw; bottom: 4vh; transform: scale(0.52); }
.rings-four { right: 8vw; top: 16vh; transform: scale(1.25); opacity: 0.28; }

.ring-field i {
    position: absolute;
    inset: calc(var(--n, 1) * 9px);
    border: 1px solid rgba(122, 92, 58, 0.28);
    border-radius: 50%;
    animation: ringBreath 8s ease-in-out infinite;
}

.root-zone .ring-field i { border-color: rgba(200, 164, 78, 0.18); }
.ring-field i:nth-child(1) { --n: 1; animation-delay: 0s; }
.ring-field i:nth-child(2) { --n: 2.4; animation-delay: .2s; }
.ring-field i:nth-child(3) { --n: 3.7; animation-delay: .4s; }
.ring-field i:nth-child(4) { --n: 4.9; animation-delay: .6s; }
.ring-field i:nth-child(5) { --n: 6.4; animation-delay: .8s; }
.ring-field i:nth-child(6) { --n: 7.2; animation-delay: 1s; }
.ring-field i:nth-child(7) { --n: 8.8; animation-delay: 1.2s; }
.ring-field i:nth-child(8) { --n: 10.1; animation-delay: 1.4s; }
.ring-field i:nth-child(9) { --n: 11.5; animation-delay: 1.6s; }
.ring-field i:nth-child(10) { --n: 12.8; animation-delay: 1.8s; }
.ring-field i:nth-child(11) { --n: 14.4; animation-delay: 2s; }
.ring-field i:nth-child(12) { --n: 15.7; animation-delay: 2.2s; }

@keyframes ringBreath { 50% { opacity: 0.45; transform: scale(1.035); } }

.constellation,
.star-sprig,
.sky-stars { position: absolute; pointer-events: none; }
.cluster-a { right: 14vw; top: 38vh; width: 120px; height: 90px; }
.cluster-b { left: 12vw; bottom: 20vh; width: 150px; height: 120px; }
.constellation span,
.drift.indigo::before {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--indigo);
    border-radius: 50%;
    content: "";
}

.indigo-break .constellation span, .sky-zone .constellation span { background: var(--gold); }
.constellation span:nth-child(1) { left: 8%; top: 62%; }
.constellation span:nth-child(2) { left: 32%; top: 18%; }
.constellation span:nth-child(3) { left: 68%; top: 42%; }
.constellation span:nth-child(4) { left: 82%; top: 78%; }
.constellation span:nth-child(5) { left: 50%; top: 86%; }

.star-sprig { right: 18vw; top: 18vh; width: 180px; height: 180px; animation: drift 52s ease-in-out infinite alternate; }
.star-sprig b { position: absolute; width: 10px; height: 10px; }
.star-sprig b:nth-child(1) { left: 10%; top: 20%; }
.star-sprig b:nth-child(2) { left: 72%; top: 8%; background: var(--indigo); }
.star-sprig b:nth-child(3) { left: 42%; top: 50%; }
.star-sprig b:nth-child(4) { left: 88%; top: 76%; background: var(--indigo); }
.star-sprig b:nth-child(5) { left: 18%; top: 82%; }

.sky-stars { inset: 0; z-index: -1; }
.sky-stars i { position: absolute; animation: drift 48s ease-in-out infinite alternate; }
.sky-stars i:nth-child(1) { left: 8%; top: 14%; width: 9px; height: 9px; animation-duration: 42s; }
.sky-stars i:nth-child(2) { left: 22%; top: 72%; width: 14px; height: 14px; animation-duration: 58s; }
.sky-stars i:nth-child(3) { left: 31%; top: 28%; width: 7px; height: 7px; animation-duration: 63s; }
.sky-stars i:nth-child(4) { left: 46%; top: 84%; width: 12px; height: 12px; animation-duration: 49s; }
.sky-stars i:nth-child(5) { left: 54%; top: 18%; width: 9px; height: 9px; animation-duration: 54s; }
.sky-stars i:nth-child(6) { left: 68%; top: 62%; width: 16px; height: 16px; animation-duration: 72s; }
.sky-stars i:nth-child(7) { left: 78%; top: 34%; width: 8px; height: 8px; animation-duration: 44s; }
.sky-stars i:nth-child(8) { left: 88%; top: 78%; width: 13px; height: 13px; animation-duration: 68s; }
.sky-stars i:nth-child(9) { left: 92%; top: 12%; width: 6px; height: 6px; animation-duration: 53s; }
.sky-stars i:nth-child(10) { left: 14%; top: 46%; width: 11px; height: 11px; animation-duration: 61s; }
.sky-stars i:nth-child(11) { left: 39%; top: 58%; width: 5px; height: 5px; animation-duration: 46s; }
.sky-stars i:nth-child(12) { left: 73%; top: 10%; width: 10px; height: 10px; animation-duration: 77s; }

.drift-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.drift { position: absolute; width: 18px; height: 18px; animation: drift var(--dur, 50s) ease-in-out infinite alternate; opacity: 0.62; }
.drift::before { content: ""; display: block; }
.d1 { left: 6vw; top: 130vh; --dur: 44s; --x: 7px; --y: -4px; }
.d2 { left: 86vw; top: 160vh; --dur: 61s; --x: -6px; --y: 6px; }
.d3 { left: 72vw; top: 235vh; --dur: 53s; --x: 8px; --y: 3px; }
.d4 { left: 16vw; top: 285vh; --dur: 69s; --x: -5px; --y: 8px; }
.d5 { left: 42vw; top: 350vh; --dur: 47s; --x: 4px; --y: -8px; }
.d6 { left: 91vw; top: 390vh; --dur: 74s; --x: -8px; --y: -3px; }
.d7 { left: 11vw; top: 430vh; --dur: 58s; --x: 5px; --y: 5px; }
.d8 { left: 64vw; top: 456vh; --dur: 66s; --x: -4px; --y: 7px; }
.d9 { left: 30vw; top: 475vh; --dur: 51s; --x: 8px; --y: -7px; }
.d10 { left: 83vw; top: 505vh; --dur: 80s; --x: -7px; --y: 4px; }
.d11 { left: 20vw; top: 520vh; --dur: 57s; --x: 3px; --y: -5px; }
.d12 { left: 57vw; top: 548vh; --dur: 71s; --x: -5px; --y: 6px; }

@keyframes drift {
    from { transform: translate3d(0, 0, 0); opacity: 0.32; }
    to { transform: translate3d(var(--x, 6px), var(--y, -6px), 0); opacity: 0.82; }
}

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.visible .sway-left { transform: translateX(-32px); }
.reveal.visible .sway-right { transform: translateX(36px); }

@media (max-width: 800px) {
    .act { padding: 13vh 24px; }
    .trunk-column, .sway-left, .sway-right, .reveal.visible .sway-left, .reveal.visible .sway-right { transform: none; width: calc(100vw - 48px); }
    .branch, .branch-left, .branch-right, .branch.slim, .branch.wide { width: 100%; margin-left: 0; margin-right: 0; }
    .rings-one { left: -70px; }
    .rings-two { right: -80px; }
    .rings-four { right: -100px; }
    .cluster-a, .cluster-b, .star-sprig { display: none; }
}