/* =================================================================
   goomimi.com v2 — Bauhaus / timeline-vertical / warm-earthy / minimal
   Palette:
     #D98E3F ochre   #F3EBDD bone   #1A1614 ink
     #C8332B red     #E7B43B yellow #2D4E8A blue
     #8C6A4F clay    #00000014 rule-gray
   Fonts: Work Sans, Noto Sans KR, JetBrains Mono
   ================================================================= */

:root {
    --ochre: #D98E3F;
    --bone: #F3EBDD;
    --ink: #1A1614;
    --red: #C8332B;
    --yellow: #E7B43B;
    --blue: #2D4E8A;
    --clay: #8C6A4F;
    --rule: rgba(0, 0, 0, 0.08);
    --rule-strong: rgba(0, 0, 0, 0.16);
    --unit: 8px;
    --rail-x: 12%;
    --sans: "Work Sans", "Noto Sans KR", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--bone);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
}

/* ----- Typography helpers ----- */
.ko { font-family: "Noto Sans KR", var(--sans); }
.en { font-family: "Work Sans", var(--sans); }

/* ==========================================================
   Timeline rail (fixed on desktop, centered at left)
   ========================================================== */
.rail {
    position: fixed;
    top: 0;
    left: var(--rail-x);
    width: 2px;
    height: 100vh;
    z-index: 50;
    pointer-events: none;
}

.rail-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--rule-strong);
}

.rail-line::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--rail-fill, 0%);
    background: var(--ink);
    transition: height 240ms ease-out;
}

.rail-stations {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.station {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: var(--bone);
    transition: background 180ms ease-out;
}

.station.active {
    background: var(--ink);
}

.station-label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--clay);
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.station.active .station-label {
    opacity: 1;
    color: var(--ink);
}

/* ==========================================================
   Chapter counter (bottom right fixed)
   ========================================================== */
.chapter-counter {
    position: fixed;
    right: 32px;
    bottom: 24px;
    z-index: 60;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
    letter-spacing: 0.06em;
    padding: 8px 14px;
    background: var(--bone);
    border: 1px solid var(--rule-strong);
    pointer-events: none;
}

.cc-index {
    display: inline-block;
    min-width: 2ch;
    font-weight: 700;
}

.cc-slash {
    margin: 0 4px;
    color: var(--clay);
}

.cc-total {
    color: var(--clay);
}

/* ==========================================================
   Page frame
   ========================================================== */
.page {
    position: relative;
    width: 100%;
    padding-left: calc(var(--rail-x) + 5%);
    padding-right: 8%;
}

/* ==========================================================
   Opening
   ========================================================== */
.opener {
    position: relative;
    min-height: 100vh;
    background: var(--ochre);
    padding: 10vh 8% 8vh calc(var(--rail-x) + 5%);
    margin-left: calc(-1 * (var(--rail-x) + 5%));
    margin-right: -8%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.opener-rule {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.opener.in .opener-rule { transform: scaleX(1); }

.opener-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px 48px;
    align-items: end;
    max-width: 1100px;
}

.shape {
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
}

.opener.in .shape-circle { animation: popIn 500ms 200ms cubic-bezier(0.18, 1.4, 0.5, 1) forwards; }
.opener.in .shape-square { animation: popIn 400ms 400ms ease-out forwards; }
.opener.in .shape-triangle { animation: popIn 400ms 500ms ease-out forwards; }

@keyframes popIn {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

.shape-circle {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    justify-self: start;
}

.shape-square {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    align-self: start;
    margin-top: 40px;
}

.shape-triangle {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: end;
    align-self: end;
}

.shape:hover {
    transform: translate(4px, -2px) rotate(3deg) scale(1.02) !important;
    animation: none;
}

.opener-title {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(40px, 7vw, 96px);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 32px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms 700ms ease-out, transform 500ms 700ms ease-out;
}

.opener.in .opener-title {
    opacity: 1;
    transform: translateY(0);
}

.opener-title .ko { font-weight: 500; }
.opener-title .en {
    font-size: 0.4em;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--ink);
    opacity: 0.7;
}

.opener-meta {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--ink);
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.typer {
    display: inline-block;
    border-right: 1px solid var(--ink);
    white-space: nowrap;
    overflow: hidden;
}

/* ==========================================================
   Chapter
   ========================================================== */
.chapter {
    position: relative;
    padding: 18vh 0 14vh 0;
    min-height: 80vh;
    border-top: 1px solid var(--rule);
}

.chapter:first-of-type { border-top: none; }

.chapter-index {
    font-family: var(--mono);
    font-size: clamp(72px, 9vw, 132px);
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.chapter.in .chapter-index {
    opacity: 1;
    transform: translateY(0);
}

.chapter-columns {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.2fr);
    gap: 64px;
    align-items: start;
}

.chapter-text {
    max-width: 46ch;
}

.chapter-title {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.chapter-title .en {
    font-size: 0.5em;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--clay);
}

.chapter-para {
    font-size: inherit;
    line-height: 1.75;
    color: var(--ink);
    margin-bottom: 18px;
    max-width: 46ch;
}

.chapter-para:last-child { margin-bottom: 0; }

/* Plate */
.chapter-plate {
    position: relative;
    aspect-ratio: 400 / 320;
    background: var(--bone);
    border: 1px solid var(--rule);
    overflow: hidden;
    cursor: crosshair;
    transition: border-color 200ms ease-out;
}

.chapter-plate:hover {
    border-color: var(--rule-strong);
}

.plate-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.plate-readout {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--clay);
    letter-spacing: 0.04em;
    background: var(--bone);
    padding: 2px 6px;
    pointer-events: none;
}

/* Stagger entry for plate children */
.chapter-plate .stage-item {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.chapter.in .chapter-plate .stage-item {
    opacity: 1;
    transform: translateY(0);
}

/* Object gallery (chapter 5) */
.object-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 80px;
    padding-top: 48px;
    border-top: 1px solid var(--rule);
}

.obj {
    background: var(--bone);
    border: 1px solid var(--rule);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 220ms ease-out, transform 220ms ease-out;
    opacity: 0;
    transform: translateY(12px);
}

.chapter.in .obj {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms ease-out, transform 500ms ease-out, border-color 220ms, background 220ms;
}

.obj:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.obj-svg {
    width: 140px;
    height: 140px;
    display: block;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.obj:hover .obj-svg {
    transform: rotate(3deg);
}

.obj figcaption {
    margin-top: 18px;
    font-family: var(--sans);
    font-size: 13px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.obj figcaption .ko { color: var(--ink); font-weight: 500; }
.obj figcaption .en {
    font-family: var(--mono);
    color: var(--clay);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

/* ==========================================================
   Grid zone emphasis (chapter 4)
   ========================================================== */
.chapter-grid-zone .chapter-plate {
    background:
        repeating-linear-gradient(to right, transparent 0, transparent 32px, var(--rule-strong) 32px, var(--rule-strong) 33px),
        repeating-linear-gradient(to bottom, transparent 0, transparent 32px, var(--rule-strong) 32px, var(--rule-strong) 33px),
        var(--bone);
}

/* ==========================================================
   Closer
   ========================================================== */
.closer {
    position: relative;
    min-height: 80vh;
    background: var(--ochre);
    margin-left: calc(-1 * (var(--rail-x) + 5%));
    margin-right: -8%;
    padding: 14vh 8% 10vh calc(var(--rail-x) + 5%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.closer-square {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.18, 1.4, 0.5, 1);
}

.closer.in .closer-square {
    opacity: 1;
    transform: scale(1);
}

.closer-verb {
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: var(--sans);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 500;
    color: var(--ink);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms 300ms ease-out, transform 600ms 300ms ease-out;
}

.closer.in .closer-verb {
    opacity: 1;
    transform: translateY(0);
}

.closer-verb .en {
    font-family: var(--mono);
    font-size: 0.5em;
    color: var(--ink);
    opacity: 0.7;
    letter-spacing: 0.04em;
}

.closer-terminus {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ink);
    opacity: 0;
    transition: opacity 400ms 700ms ease-out;
}

.closer.in .closer-terminus { opacity: 1; }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    padding: 32px 8% 32px calc(var(--rail-x) + 5%);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--clay);
    letter-spacing: 0.06em;
    border-top: 1px solid var(--rule);
}

.f-left { text-align: left; }
.f-mid { text-align: center; }
.f-right { text-align: right; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 900px) {
    :root { --rail-x: 6%; }
    .page { padding-left: calc(var(--rail-x) + 6%); padding-right: 6%; }
    .opener, .closer { margin-left: calc(-1 * (var(--rail-x) + 6%)); margin-right: -6%; padding-right: 6%; padding-left: calc(var(--rail-x) + 6%); }
    .chapter-columns { grid-template-columns: 1fr; gap: 40px; }
    .opener-grid { grid-template-columns: 1fr; }
    .shape-circle, .shape-square, .shape-triangle {
        grid-column: 1 / 2;
        justify-self: start;
        margin-top: 0;
    }
    .shape-circle { grid-row: 1; }
    .shape-square { grid-row: 2; justify-self: end; }
    .shape-triangle { grid-row: 3; }
    .opener-title { grid-row: 4; }
    .opener-meta { grid-row: 5; }
    .object-gallery { grid-template-columns: repeat(2, 1fr); }
    .chapter-counter { right: 16px; bottom: 16px; font-size: 11px; padding: 6px 10px; }
    .site-footer { grid-template-columns: 1fr; text-align: left; }
    .f-mid, .f-right { text-align: left; }
}

@media (max-width: 560px) {
    .object-gallery { grid-template-columns: 1fr; }
    .chapter { padding: 12vh 0 10vh 0; }
    .chapter-index { font-size: 64px; }
}