/* mujun.study — A Catalogue of Contradictions
   Palette: terracotta-warm
   Typography: garamond-classic (EB Garamond + Cormorant Garamond)
*/

/* ------------------------------------------------------------------
   Palette tokens
   ------------------------------------------------------------------ */
:root {
    --kiln-white:    #F4ECE1;
    --fired-linen:   #E8D9C8;
    --warm-loam:     #D4C4B0;
    --umber-ink:     #2E1F14;
    --umber-deep:    #1A110A;
    --clay-smoke:    #6B5744;
    --raw-terracotta:#C4663A;
    --copper-patina: #5B8C6A;
    --slip-wash:     #D4A574;
    --kiln-floor:    #1A110A;
    --paper-light:   #F4ECE1;
    --pure-white:    #FFFFFF; /* used only inside SVG / mix-blend */
    --pure-black:    #000000; /* used only inside SVG / mix-blend */

    --display-font:  'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    --body-font:     'Cormorant Garamond', 'EB Garamond', Georgia, serif;

    --gutter:        clamp(24px, 4vw, 64px);
    --rail-width:    2px;

    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html, body {
    width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    font-size: 19px;
    line-height: 1.75;
    color: var(--umber-ink);
    background-color: var(--kiln-white);
    font-feature-settings: "liga" 1, "dlig" 1, "onum" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 1400ms var(--ease-out-soft);
}

body.bg-kiln-white   { background-color: var(--kiln-white); }
body.bg-fired-linen  { background-color: var(--fired-linen); }
body.bg-warm-loam    { background-color: var(--warm-loam); }
body.bg-kiln-floor   { background-color: var(--kiln-floor); }

img, svg { max-width: 100%; display: block; }

/* Hidden SVG defs container */
.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   Persistent noise overlay (the page is "paper")
   ------------------------------------------------------------------ */
.noise-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.035;
    mix-blend-mode: multiply;
    transition: opacity 600ms var(--ease-out-soft), mix-blend-mode 0ms;
}

.noise-layer svg { width: 100%; height: 100%; }

body.bg-kiln-floor .noise-layer {
    opacity: 0.06;
    mix-blend-mode: screen;
}

/* ------------------------------------------------------------------
   Reading progress rail (left edge)
   ------------------------------------------------------------------ */
.progress-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--rail-width);
    height: 100vh;
    background-color: rgba(196, 102, 58, 0.08);
    z-index: 60;
    pointer-events: none;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--raw-terracotta);
    transition: height 80ms linear;
}

/* ------------------------------------------------------------------
   Folio (sections)
   ------------------------------------------------------------------ */
.folio {
    position: relative;
    width: 100%;
    z-index: 1;
}

.section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: clamp(56px, 8vh, 96px) calc(var(--gutter) * 2) clamp(56px, 8vh, 96px) calc(var(--gutter) * 1.5);
    overflow: hidden;
    opacity: 0.18;
    transition: opacity 1200ms var(--ease-out-soft);
    border-bottom: 10px solid transparent;
    background-clip: padding-box;
    isolation: isolate;
}

/* Page-turn band between sections */
.section::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 10px;
    background:
        linear-gradient(180deg,
            rgba(196, 102, 58, 0.0) 0%,
            rgba(196, 102, 58, 0.18) 35%,
            rgba(46, 31, 20, 0.45) 50%,
            rgba(196, 102, 58, 0.18) 65%,
            rgba(196, 102, 58, 0.0) 100%);
    opacity: 0.6;
    pointer-events: none;
}

.section:last-child { border-bottom: 0; }
.section:last-child::after { display: none; }

/* Background variants */
.section[data-bg="kiln-white"]   { background-color: var(--kiln-white); }
.section[data-bg="fired-linen"]  { background-color: var(--fired-linen); }
.section[data-bg="warm-loam"]    { background-color: var(--warm-loam); }
.section[data-bg="kiln-floor"]   { background-color: var(--kiln-floor); color: var(--kiln-white); }

.section[data-bg="kiln-floor"] .folio-number,
.section[data-bg="kiln-floor"] .folio-marginalia,
.section[data-bg="kiln-floor"] .folio-caption {
    color: rgba(244, 236, 225, 0.55);
}

/* States */
.section.is-active   { opacity: 1; }
.section.was-active  { opacity: 0.22; }

/* Faint section number (chapter-style) */
.folio-number {
    position: absolute;
    top: clamp(40px, 6vh, 72px);
    right: clamp(40px, 6vw, 96px);
    font-family: var(--display-font);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(120px, 18vw, 200px);
    line-height: 1;
    color: var(--raw-terracotta);
    opacity: 0.10;
    letter-spacing: 0.01em;
    user-select: none;
    pointer-events: none;
    z-index: 0;
}

.folio-number.light { color: var(--slip-wash); opacity: 0.18; }

/* ------------------------------------------------------------------
   Title Folio
   ------------------------------------------------------------------ */
.title-folio {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr auto;
    align-items: end;
}

.title-folio .title-block {
    grid-column: 2 / span 7;
    grid-row: 2;
    position: relative;
    z-index: 2;
    padding-bottom: clamp(40px, 8vh, 96px);
}

.display {
    font-family: var(--display-font);
    font-weight: 500;
    font-size: clamp(56px, 9.2vw, 96px);
    line-height: 1.10;
    letter-spacing: 0.01em;
    color: var(--umber-ink);
    margin: 22px 0 18px;
}

.display.light { color: var(--kiln-white); }

.display .word, .display .kanji {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 900ms var(--ease-out-soft), transform 900ms var(--ease-out-soft);
    margin-right: 0.18em;
}

.display .kanji {
    font-family: 'EB Garamond', 'Cormorant Garamond', serif;
    color: var(--raw-terracotta);
    font-weight: 700;
    margin: 0 0.16em 0 0.04em;
    font-size: 0.78em;
    vertical-align: 0.02em;
    letter-spacing: 0.02em;
}

.section.is-active .display .word,
.section.is-active .display .kanji {
    opacity: 1;
    transform: translateY(0);
}

/* Word reveal stagger */
.section.is-active .display .word:nth-child(1),
.section.is-active .display .kanji:nth-child(1) { transition-delay: 80ms; }
.section.is-active .display .word:nth-child(2),
.section.is-active .display .kanji:nth-child(2) { transition-delay: 280ms; }
.section.is-active .display .word:nth-child(3),
.section.is-active .display .kanji:nth-child(3) { transition-delay: 480ms; }
.section.is-active .display .word:nth-child(4),
.section.is-active .display .kanji:nth-child(4) { transition-delay: 680ms; }

/* Underline-draw SVG */
.underline-svg {
    display: block;
    width: clamp(280px, 46vw, 600px);
    height: 24px;
    margin-top: 4px;
    overflow: visible;
}

.underline-svg.sm {
    width: clamp(180px, 28vw, 320px);
    height: 18px;
}

.underline-path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1200ms var(--ease-out-soft), stroke-width 300ms var(--ease-out-soft);
}

.section.is-active .underline-path {
    stroke-dashoffset: 0;
    transition-delay: 900ms;
}

.heading-draw:hover ~ .underline-svg .underline-path {
    stroke-width: 4;
}

/* Marginalia + captions */
.folio-marginalia {
    font-family: var(--body-font);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    color: var(--clay-smoke);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

.folio-marginalia.light { color: rgba(244, 236, 225, 0.6); }

.folio-caption {
    font-family: var(--body-font);
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    color: var(--clay-smoke);
    margin-top: 28px;
    max-width: 56ch;
    line-height: 1.6;
}

.folio-caption.light { color: rgba(244, 236, 225, 0.6); }
.folio-caption.center { text-align: center; max-width: none; }

/* ------------------------------------------------------------------
   Essay Folio
   ------------------------------------------------------------------ */
.essay-folio {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    row-gap: clamp(20px, 4vh, 36px);
    align-content: start;
    padding-top: clamp(96px, 14vh, 160px);
}

.essay-heading {
    grid-column: 2 / span 7;
    grid-row: 1;
    font-family: var(--display-font);
    font-weight: 500;
    font-size: clamp(38px, 5.4vw, 64px);
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: var(--umber-ink);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 900ms var(--ease-out-soft), transform 900ms var(--ease-out-soft);
}

.section.is-active .essay-heading {
    opacity: 1;
    transform: translateY(0);
}

.essay-folio > .underline-svg {
    grid-column: 2 / span 4;
    grid-row: 2;
    margin-top: -4px;
}

.two-column {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 3fr) 80px minmax(280px, 3fr) 1fr;
    column-gap: clamp(24px, 4vw, 56px);
    align-items: start;
    margin-top: clamp(20px, 5vh, 56px);
}

.two-column .col {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 900ms var(--ease-out-soft) 240ms, transform 900ms var(--ease-out-soft) 240ms;
}

.two-column .col-left  { grid-column: 2; }
.two-column .col-right { grid-column: 4; padding-top: 80px; transition-delay: 420ms; }

.two-column .col p { margin-bottom: 1.05em; }
.two-column .col p:last-child { margin-bottom: 0; }

.two-column .col em {
    font-style: italic;
    color: var(--umber-ink);
    font-weight: 500;
}

.section.is-active .two-column .col {
    opacity: 1;
    transform: translateY(0);
}

/* Drop cap on the first paragraph */
.dropcap .cap {
    font-family: var(--display-font);
    font-weight: 700;
    color: var(--raw-terracotta);
    float: left;
    font-size: 4.6em;
    line-height: 0.88;
    padding: 0.06em 0.10em 0 0;
    margin-top: 0.04em;
    letter-spacing: -0.02em;
}

/* Divider blob lives in the gutter */
.blob-divider {
    grid-column: 3;
    width: 100%;
    height: clamp(220px, 38vh, 360px);
    align-self: center;
    margin-top: 18px;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 1200ms var(--ease-out-soft) 600ms, transform 1200ms var(--ease-out-soft) 600ms;
}

.section.is-active .blob-divider {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ------------------------------------------------------------------
   Contemplation Folio
   ------------------------------------------------------------------ */
.contemplation-folio {
    display: grid;
    place-items: center;
    text-align: left;
    padding: clamp(80px, 14vh, 140px) clamp(64px, 12vw, 200px);
}

.aphorism {
    position: relative;
    z-index: 2;
    max-width: 720px;
    font-family: var(--display-font);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.32;
    color: var(--umber-ink);
    border-left: 1.5px solid var(--raw-terracotta);
    padding-left: clamp(20px, 3vw, 40px);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1100ms var(--ease-out-soft) 200ms, transform 1100ms var(--ease-out-soft) 200ms;
}

.section.is-active .aphorism {
    opacity: 1;
    transform: translateY(0);
}

.aphorism p { margin-bottom: 18px; }
.aphorism footer {
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    color: var(--clay-smoke);
    letter-spacing: 0.02em;
}

.contemplation-folio.deep .aphorism {
    color: var(--umber-ink);
}

/* ------------------------------------------------------------------
   Artifact Folio
   ------------------------------------------------------------------ */
.artifact-folio {
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(80px, 14vh, 140px) clamp(40px, 8vw, 120px);
}

.artifact-stage {
    position: relative;
    z-index: 2;
    width: min(420px, 80%);
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 1100ms var(--ease-out-soft) 200ms, transform 1100ms var(--ease-out-soft) 200ms;
}

.section.is-active .artifact-stage {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.fragment {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 0 transparent);
    animation: spin-slow 60s linear infinite;
    transform-origin: 50% 50%;
}

.fragment-group { transform-origin: 50% 50%; }

@keyframes spin-slow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.artifact-caption {
    font-family: var(--body-font);
    font-style: italic;
    font-weight: 300;
    font-size: 15px;
    color: var(--clay-smoke);
    margin-top: 32px;
    letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------
   Coda + Colophon (dark)
   ------------------------------------------------------------------ */
.title-folio.coda {
    background-color: var(--kiln-floor);
    color: var(--kiln-white);
}

.title-folio.coda .display {
    color: var(--kiln-white);
}

.colophon-folio {
    background-color: var(--kiln-floor);
    color: var(--kiln-white);
    display: grid;
    place-items: center;
    text-align: center;
    padding: clamp(96px, 16vh, 160px) clamp(40px, 10vw, 160px);
}

.colophon-stage {
    max-width: 720px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1100ms var(--ease-out-soft) 200ms, transform 1100ms var(--ease-out-soft) 200ms;
}

.section.is-active .colophon-stage {
    opacity: 1;
    transform: translateY(0);
}

.colophon-body {
    font-family: var(--body-font);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.8;
    color: rgba(244, 236, 225, 0.82);
    margin: 22px auto 36px;
    max-width: 60ch;
}

.colophon-body em {
    font-style: italic;
    color: var(--slip-wash);
    font-weight: 500;
}

.colophon-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 24px 0 28px;
}

.mark-fragment {
    width: 40px; height: 40px;
    animation: spin-slow 60s linear infinite;
}

.mark-fragment.flip {
    animation-direction: reverse;
}

.mark-rule {
    display: inline-block;
    width: 80px;
    height: 1px;
    background: rgba(244, 236, 225, 0.35);
}

.colophon-credit {
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    color: rgba(244, 236, 225, 0.7);
    letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------
   Blob motifs
   ------------------------------------------------------------------ */
.blob {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
}

.blob-path {
    transition: d 1200ms var(--ease-out-soft);
    will-change: transform;
}

/* Halo behind heading (upper-right of viewport) */
.title-folio .blob-halo {
    width: clamp(320px, 36vw, 520px);
    height: clamp(320px, 36vw, 520px);
    top: 6%;
    right: 8%;
    animation: breathe 9s ease-in-out infinite;
}

.title-folio .blob-halo.right {
    top: 10%;
    right: 6%;
    animation-duration: 11s;
}

/* Corner blob bleeding off lower-left */
.title-folio .blob-corner {
    width: clamp(220px, 26vw, 380px);
    height: clamp(220px, 26vw, 380px);
    bottom: -8%;
    left: -6%;
    animation: breathe 12s ease-in-out infinite reverse;
}

/* Background blob inside contemplation folios */
.contemplation-folio .blob-bg {
    width: min(120vmin, 1000px);
    height: min(120vmin, 1000px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    animation: breathe 14s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.05) rotate(2deg); }
}

.contemplation-folio .blob-bg {
    animation-name: breathe-center;
}

@keyframes breathe-center {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50%      { transform: translate(-50%, -50%) scale(1.06) rotate(3deg); }
}

/* Cursor "lean" — driven by JS via custom properties */
.blob {
    --lean-x: 0px;
    --lean-y: 0px;
}

.blob.is-leaning {
    transform: translate(var(--lean-x), var(--lean-y));
    transition: transform 800ms var(--ease-spring);
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
    body { font-size: 17px; line-height: 1.7; }

    .section {
        padding: 64px clamp(24px, 6vw, 48px);
    }

    .title-folio {
        grid-template-columns: 1fr;
    }

    .title-folio .title-block {
        grid-column: 1;
        padding-bottom: 32px;
    }

    .display { font-size: clamp(44px, 11vw, 72px); }
    .essay-heading { font-size: clamp(30px, 7vw, 48px); }

    .essay-folio {
        grid-template-columns: 1fr;
        padding-top: 72px;
    }

    .essay-heading { grid-column: 1; }
    .essay-folio > .underline-svg { grid-column: 1; }

    .two-column {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .two-column .col-left,
    .two-column .col-right { grid-column: 1; padding-top: 0; }
    .blob-divider {
        grid-column: 1;
        height: 140px;
        margin: 8px 0;
    }

    .folio-number {
        font-size: clamp(80px, 28vw, 140px);
        right: 16px;
        top: 20px;
    }

    .title-folio .blob-halo,
    .title-folio .blob-corner {
        width: 60vw; height: 60vw;
    }
}

@media (max-width: 540px) {
    .display { font-size: clamp(38px, 12vw, 60px); }
    .aphorism { font-size: clamp(22px, 6vw, 30px); padding-left: 16px; }
}