:root {
    --terracotta: #B46B48;
    --fired-clay: #8B4D32;
    --washi: #F5EDE3;
    --marble-white: #FAFAF7;
    --ink-stone: #2C2420;
    --ash: #9B9488;
    --celadon: #A8BBA4;
    --ochre: #C49A3C;

    --font-display: 'Bebas Neue', sans-serif;
    --font-korean: 'Noto Serif KR', serif;
    --font-body: 'Cormorant Garamond', Georgia, serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background-color: var(--washi);
    color: var(--ink-stone);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ================================================
   RAKED GRAVEL LINES - Fibonacci-spaced, zen garden
   ================================================ */
.gravel-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(155, 148, 136, 0.06) 8px,
            rgba(155, 148, 136, 0.06) 8.5px,
            transparent 8.5px,
            transparent 21px,
            rgba(155, 148, 136, 0.05) 21px,
            rgba(155, 148, 136, 0.05) 21.5px,
            transparent 21.5px,
            transparent 42px,
            rgba(155, 148, 136, 0.04) 42px,
            rgba(155, 148, 136, 0.04) 42.5px,
            transparent 42.5px,
            transparent 76px,
            rgba(155, 148, 136, 0.06) 76px,
            rgba(155, 148, 136, 0.06) 76.5px,
            transparent 76.5px,
            transparent 110px
        );
}

/* ================================================
   SCROLL PROGRESS DOT
   ================================================ */
.scroll-dot {
    position: fixed;
    right: 24px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ochre);
    z-index: 100;
    opacity: 0.5;
    transition: top 0.15s ease-out;
    box-shadow:
        0 0 8px rgba(196, 154, 60, 0.3),
        0 0 20px rgba(196, 154, 60, 0.1);
}

.scroll-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid;
    border-image: repeating-linear-gradient(
        37deg,
        var(--marble-white) 0px,
        var(--ash) 2px,
        var(--marble-white) 4px,
        var(--terracotta) 5px,
        var(--marble-white) 6px
    ) 1;
    border-radius: 50%;
    opacity: 0.4;
}

/* ================================================
   DIAGONAL SECTIONS - 7-degree parallelogram slices
   ================================================ */
.diagonal-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.diagonal-forward {
    clip-path: polygon(0 0, 100% 4vh, 100% 100%, 0 calc(100% - 4vh));
    margin-top: -4vh;
}

.diagonal-reverse {
    clip-path: polygon(0 4vh, 100% 0, 100% calc(100% - 4vh), 0 100%);
    margin-top: -4vh;
}

.hero-section {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vh));
    margin-top: 0;
}

.terminal-section {
    clip-path: polygon(0 4vh, 100% 0, 100% 100%, 0 100%);
}

/* ================================================
   GRADIENT MESHES - Soft luminous color fields
   ================================================ */
.gradient-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.mesh-hero {
    background:
        radial-gradient(ellipse 60% 50% at 75% 25%, rgba(180, 107, 72, 0.20) 0%, transparent 100%),
        radial-gradient(ellipse 55% 60% at 20% 75%, rgba(196, 154, 60, 0.15) 0%, transparent 100%),
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(168, 187, 164, 0.10) 0%, transparent 100%),
        radial-gradient(ellipse 40% 35% at 85% 70%, rgba(139, 77, 50, 0.08) 0%, transparent 100%);
    animation: meshBreathe 8s ease-in-out infinite alternate;
    background-color: var(--washi);
}

.mesh-warm {
    background:
        radial-gradient(ellipse 55% 50% at 60% 40%, rgba(180, 107, 72, 0.16) 0%, transparent 100%),
        radial-gradient(ellipse 50% 55% at 25% 75%, rgba(196, 154, 60, 0.12) 0%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 80% 60%, rgba(168, 187, 164, 0.06) 0%, transparent 100%);
    animation: meshBreathe 8s ease-in-out 2s infinite alternate;
    background-color: var(--marble-white);
}

.mesh-cool {
    background:
        radial-gradient(ellipse 50% 55% at 40% 50%, rgba(168, 187, 164, 0.14) 0%, transparent 100%),
        radial-gradient(ellipse 45% 50% at 80% 30%, rgba(155, 148, 136, 0.10) 0%, transparent 100%),
        radial-gradient(ellipse 40% 35% at 20% 20%, rgba(180, 107, 72, 0.06) 0%, transparent 100%);
    animation: meshBreathe 8s ease-in-out 4s infinite alternate;
    background-color: var(--washi);
}

.mesh-cool-alt {
    background:
        radial-gradient(ellipse 55% 45% at 35% 60%, rgba(168, 187, 164, 0.12) 0%, transparent 100%),
        radial-gradient(ellipse 50% 50% at 75% 35%, rgba(196, 154, 60, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 40% 40% at 55% 80%, rgba(155, 148, 136, 0.10) 0%, transparent 100%);
    animation: meshBreathe 8s ease-in-out 6s infinite alternate;
    background-color: var(--marble-white);
}

.mesh-terminal {
    background:
        radial-gradient(ellipse 55% 55% at 30% 60%, rgba(196, 154, 60, 0.18) 0%, transparent 100%),
        radial-gradient(ellipse 50% 50% at 70% 35%, rgba(180, 107, 72, 0.14) 0%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 50% 50%, rgba(168, 187, 164, 0.08) 0%, transparent 100%),
        radial-gradient(ellipse 35% 30% at 15% 30%, rgba(139, 77, 50, 0.06) 0%, transparent 100%);
    animation: meshBreathe 8s ease-in-out infinite alternate;
    background-color: var(--washi);
}

@keyframes meshBreathe {
    0% {
        transform: scale(1) translate(0, 0);
    }
    50% {
        transform: scale(1.01) translate(-0.5%, 0.5%);
    }
    100% {
        transform: scale(1.03) translate(-1.5%, 1%);
    }
}

/* ================================================
   MARBLE VEINING BORDERS - Calacatta marble effect
   ================================================ */
.marble-edge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        37deg,
        var(--marble-white) 0px,
        var(--marble-white) 18px,
        var(--ash) 18px,
        var(--ash) 20px,
        var(--marble-white) 20px,
        var(--marble-white) 38px,
        rgba(180, 107, 72, 0.5) 38px,
        rgba(180, 107, 72, 0.35) 39px,
        var(--marble-white) 39px,
        var(--marble-white) 65px,
        var(--ash) 65px,
        rgba(155, 148, 136, 0.6) 66px,
        var(--marble-white) 66px,
        var(--marble-white) 80px
    );
    opacity: 0.65;
    z-index: 3;
}

/* ================================================
   KOREAN WATERMARKS - Ghostly calligraphic accents
   ================================================ */
.korean-watermark {
    position: absolute;
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: clamp(5rem, 12vw, 8rem);
    color: var(--ink-stone);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.watermark-left {
    left: 8%;
    top: 18%;
}

.watermark-right {
    right: 8%;
    top: 22%;
}

.watermark-center {
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    font-size: clamp(4rem, 10vw, 7rem);
    opacity: 0.035;
}

.watermark-large {
    font-size: clamp(6rem, 16vw, 12rem);
    opacity: 0.06;
    top: 30%;
}

/* ================================================
   SECTION CONTENT LAYOUT
   ================================================ */
.section-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
    padding: 6rem 4rem;
}

.hero-content {
    max-width: 100%;
    text-align: left;
    padding-left: 10%;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.content-left {
    padding-left: 12%;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.content-visual {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 6rem 2rem;
}

/* ================================================
   HERO TYPOGRAPHY
   ================================================ */
.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(4rem, 12vw + 1rem, 14rem);
    color: var(--ink-stone);
    letter-spacing: 0.04em;
    line-height: 0.95;
    text-shadow: 0 2px 40px rgba(180, 107, 72, 0.15);
    margin-bottom: 1.5rem;
}

.hero-hangul {
    font-family: var(--font-korean);
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--terracotta);
    opacity: 0;
    animation: fadeIn 1.2s ease-out 1.8s forwards;
    margin-bottom: 0.75rem;
    letter-spacing: 0.08em;
}

.hero-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--ash);
    letter-spacing: 0.03em;
    opacity: 0;
    animation: fadeIn 1s ease-out 2.4s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================
   SECTION HEADINGS
   ================================================ */
.section-number {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.8rem;
    color: var(--ash);
    letter-spacing: 0.12em;
    display: inline-block;
    margin-bottom: 1.5rem;
    position: relative;
    padding: 0.25rem 0.6rem;
    background: repeating-linear-gradient(
        37deg,
        rgba(250, 250, 247, 0.6) 0px,
        rgba(250, 250, 247, 0.6) 10px,
        rgba(155, 148, 136, 0.15) 10px,
        rgba(155, 148, 136, 0.15) 11px,
        rgba(250, 250, 247, 0.6) 11px,
        rgba(250, 250, 247, 0.6) 20px
    );
    border-radius: 2px;
}

.section-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--ink-stone);
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 30px rgba(180, 107, 72, 0.1);
}

/* ================================================
   BODY TEXT
   ================================================ */
.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.2vw + 0.5rem, 1.35rem);
    line-height: 1.85;
    color: var(--ink-stone);
    margin-bottom: 1.75rem;
    letter-spacing: 0.01em;
    max-width: 55ch;
}

.body-text:last-of-type {
    margin-bottom: 2rem;
}

.annotation {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.8rem;
    color: var(--ash);
    letter-spacing: 0.02em;
    margin-top: 2.5rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(155, 148, 136, 0.15);
}

.math-highlight {
    color: var(--celadon);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

/* ================================================
   PULL QUOTE - Marble-veined left border
   ================================================ */
.pull-quote {
    margin: 3rem 0 2rem;
    padding: 1.5rem 0 1.5rem 2rem;
    border-left: 2px solid;
    border-image: repeating-linear-gradient(
        180deg,
        var(--marble-white) 0px,
        var(--ash) 4px,
        var(--marble-white) 8px,
        rgba(180, 107, 72, 0.6) 10px,
        var(--marble-white) 12px,
        var(--marble-white) 18px,
        rgba(155, 148, 136, 0.4) 20px,
        var(--marble-white) 22px
    ) 1;
    position: relative;
}

.pull-quote p {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--ink-stone);
    letter-spacing: 0.04em;
    line-height: 1.25;
}

.pull-quote cite {
    display: block;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.75rem;
    font-style: normal;
    color: var(--ash);
    margin-top: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ================================================
   VISUAL FIELD - Circles and probability curve
   ================================================ */
.visual-field {
    position: relative;
    width: 500px;
    height: 500px;
}

.visual-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(180, 107, 72, 0.15);
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.visual-circle--lg {
    width: 340px;
    height: 340px;
    top: 8%;
    left: 3%;
    background: radial-gradient(ellipse at center, rgba(168, 187, 164, 0.10) 0%, transparent 70%);
    animation: circleFloat 12s ease-in-out infinite alternate;
}

.visual-circle--md {
    width: 200px;
    height: 200px;
    top: 40%;
    left: 38%;
    background: radial-gradient(ellipse at center, rgba(180, 107, 72, 0.08) 0%, transparent 70%);
    animation: circleFloat 10s ease-in-out 2s infinite alternate;
}

.visual-circle--sm {
    width: 120px;
    height: 120px;
    top: 12%;
    left: 58%;
    background: radial-gradient(ellipse at center, rgba(196, 154, 60, 0.10) 0%, transparent 70%);
    animation: circleFloat 14s ease-in-out 4s infinite alternate;
}

.visual-circle--xs {
    width: 60px;
    height: 60px;
    top: 65%;
    left: 15%;
    background: radial-gradient(ellipse at center, rgba(168, 187, 164, 0.12) 0%, transparent 70%);
    border-color: rgba(168, 187, 164, 0.2);
    animation: circleFloat 16s ease-in-out 1s infinite alternate;
}

@keyframes circleFloat {
    0% { transform: translate(0, 0); }
    33% { transform: translate(3px, -5px); }
    66% { transform: translate(-4px, 3px); }
    100% { transform: translate(2px, -2px); }
}

.probability-curve {
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 90%;
    height: 40%;
    opacity: 0.7;
}

.curve-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 2s ease-out;
}

.diagonal-section.visible .curve-path {
    stroke-dashoffset: 0;
}

/* ================================================
   TERMINAL SECTION
   ================================================ */
.terminal-content {
    max-width: 100%;
    text-align: center;
    width: 100%;
    padding: 8rem 2rem;
}

.terminal-text {
    font-family: var(--font-body);
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
    color: var(--ink-stone);
    margin-bottom: 3.5rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.terminal-domain {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--terracotta);
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.terminal-colophon {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--ash);
    line-height: 1.7;
    max-width: 420px;
    margin: 0 auto;
}

/* ================================================
   TYPEWRITER ANIMATION STATES
   ================================================ */
.typewriter span {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.06s ease-out;
}

.typewriter span.typed {
    opacity: 1;
}

.typewriter span.space {
    width: 0.25em;
}

/* ================================================
   SECTION REVEAL ANIMATIONS
   ================================================ */
.diagonal-section .section-content {
    opacity: 0;
    transform: translateX(20px) translateY(20px);
    transition:
        opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.diagonal-section.visible .section-content {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* Staggered reveal for child elements */
.diagonal-section.visible .section-number {
    animation: staggerFade 0.5s ease-out 0.1s forwards;
}

.diagonal-section.visible .section-heading {
    animation: staggerFade 0.5s ease-out 0.2s forwards;
}

.diagonal-section.visible .body-text:nth-child(3) {
    animation: staggerFade 0.5s ease-out 0.3s forwards;
}

.diagonal-section.visible .body-text:nth-child(4) {
    animation: staggerFade 0.5s ease-out 0.4s forwards;
}

.diagonal-section.visible .annotation {
    animation: staggerFade 0.5s ease-out 0.6s forwards;
}

.diagonal-section.visible .pull-quote {
    animation: staggerFade 0.5s ease-out 0.5s forwards;
}

@keyframes staggerFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1024px) {
    .section-content {
        max-width: 75%;
    }

    .visual-field {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 768px) {
    .section-content {
        max-width: 88%;
        padding: 4rem 2rem;
    }

    .hero-content {
        padding-left: 6%;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .content-left {
        padding-left: 6%;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .diagonal-forward {
        clip-path: polygon(0 0, 100% 2.5vh, 100% 100%, 0 calc(100% - 2.5vh));
        margin-top: -2.5vh;
    }

    .diagonal-reverse {
        clip-path: polygon(0 2.5vh, 100% 0, 100% calc(100% - 2.5vh), 0 100%);
        margin-top: -2.5vh;
    }

    .hero-section {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.5vh));
    }

    .terminal-section {
        clip-path: polygon(0 2.5vh, 100% 0, 100% 100%, 0 100%);
    }

    .visual-field {
        width: 300px;
        height: 300px;
    }

    .visual-circle--lg {
        width: 240px;
        height: 240px;
    }

    .visual-circle--md {
        width: 140px;
        height: 140px;
    }

    .visual-circle--sm {
        width: 80px;
        height: 80px;
    }

    .visual-circle--xs {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .section-content {
        max-width: 100%;
        padding: 3rem 1.5rem;
    }

    .hero-content {
        padding-left: 5%;
    }

    .content-left {
        padding-left: 5%;
    }

    .body-text {
        font-size: 1.02rem;
        line-height: 1.75;
    }

    .korean-watermark {
        font-size: 4rem;
    }

    .watermark-large {
        font-size: 5rem;
    }

    .scroll-dot {
        right: 12px;
    }

    .visual-field {
        width: 220px;
        height: 220px;
    }

    .terminal-content {
        padding: 5rem 1.5rem;
    }

    .pull-quote {
        padding-left: 1.25rem;
    }

    .pull-quote p {
        font-size: clamp(1.2rem, 2.5vw, 2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gradient-mesh {
        animation: none;
    }

    .hero-hangul,
    .hero-sub {
        animation: none;
        opacity: 1;
    }

    .diagonal-section .section-content {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .typewriter span {
        opacity: 1;
    }

    .visual-circle {
        animation: none;
    }

    .curve-path {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}