/* simulai.org -- wabi-sabi, ma-negative-space, washed-earth palette */

/* ----------------------------------------------------------------
   Tokens
---------------------------------------------------------------- */
:root {
    --bg:            #F5F0E8;  /* warm parchment */
    --bg-shadow:     #EDE6DA;  /* slightly darker parchment */
    --text:          #4A4238;  /* dried ink */
    --text-muted:    #9B8E7E;  /* faded brown */
    --line:          #C4B7A6;  /* muted taupe */
    --warm:          #8B6F47;  /* earthen ochre */
    --cool:          #7A8B7A;  /* muted sage */

    --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
    --mono:  "Source Code Pro", "SFMono-Regular", Menlo, Consolas, monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.9;
    color: var(--text);
    background-color: var(--bg);
    /* hairline crack texture: barely-perceptible noise of #EDE6DA on #F5F0E8 */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g stroke='%23EDE6DA' stroke-width='0.6' fill='none' opacity='0.85'><path d='M5 18 Q 40 22 78 14'/><path d='M120 8 Q 150 30 196 22'/><path d='M14 70 Q 60 76 102 64'/><path d='M150 92 Q 180 98 210 88'/><path d='M30 132 Q 70 140 118 130'/><path d='M140 168 Q 178 172 208 158'/><path d='M8 198 Q 50 206 96 196'/><path d='M118 210 Q 158 214 200 204'/><path d='M64 50 L 70 56'/><path d='M174 60 L 180 66'/><path d='M44 110 L 50 116'/><path d='M132 120 L 138 126'/><path d='M76 184 L 82 190'/><path d='M186 142 L 192 148'/></g></svg>");
    background-repeat: repeat;
    background-size: 220px 220px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

p {
    max-width: 100%;
}

::selection {
    background: var(--bg-shadow);
    color: var(--warm);
}

/* ----------------------------------------------------------------
   Garden / stone scaffolding
---------------------------------------------------------------- */
.garden {
    position: relative;
    width: 100%;
    /* total page height: ~540vh, five and a half full viewports */
    min-height: 540vh;
    overflow: hidden;
}

.stone {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Per-stone vertical bands so the layout reads as a sparse vertical scroll. */
.stone-origin       { height: 120vh; }
.stone-imperfection { height: 120vh; }
.stone-practice     { height: 120vh; }
.stone-community    { height:  80vh; }
.stone-continuation { height: 100vh; }

/* ----------------------------------------------------------------
   Typography
---------------------------------------------------------------- */
.stone-title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(56px, 8.4vw, 88px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--text);
}

.stone-title .dot {
    color: var(--warm);
    font-weight: 300;
}

.stone-heading {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--text);
    margin-bottom: 36px;
}

.annotation {
    display: block;
    font-family: var(--mono);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 22px;
    text-transform: lowercase;
}

p {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.9;
    color: var(--text);
}

/* ----------------------------------------------------------------
   Stone 1: Origin
---------------------------------------------------------------- */
.stone-origin .stone-title-wrap {
    position: absolute;
    top: 22vh;
    left: 15%;
    max-width: 520px;
}

.stone-origin .stone-title-wrap .annotation {
    margin-bottom: 30px;
}

.stone-origin .stone-paragraph {
    position: absolute;
    top: 70vh;
    left: 55%;
    max-width: 420px;
}

/* ----------------------------------------------------------------
   Stone 2: Imperfection
---------------------------------------------------------------- */
.stone-imperfection .enso-wrap {
    position: absolute;
    top: 50%;
    left: 22%;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    will-change: transform;
}

.enso {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.stone-imperfection .stone-right {
    position: absolute;
    top: 30%;
    right: 20%;
    max-width: 440px;
    text-align: left;
}

/* ----------------------------------------------------------------
   Stone 3: Practice
---------------------------------------------------------------- */
.stone-practice .stone-left-12 {
    position: absolute;
    top: 24%;
    left: 12%;
    max-width: 360px;
}

.stone-practice .stone-right-25 {
    position: absolute;
    top: calc(24% + 80px);
    right: 25%;
    max-width: 360px;
}

.stone-practice .thread {
    position: absolute;
    top: calc(24% + 220px);
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 1px;
    border: none;
    border-top: 1px solid var(--line);
    opacity: 0.3;
    margin: 0;
}

/* ----------------------------------------------------------------
   Stone 4: Community
---------------------------------------------------------------- */
.stone-community .stone-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 480px;
    text-align: left;
}

/* ----------------------------------------------------------------
   Stone 5: Continuation
---------------------------------------------------------------- */
.stone-continuation .stone-left-15 {
    position: absolute;
    top: 28%;
    left: 15%;
    max-width: 520px;
}

.closing {
    color: var(--cool);
    font-style: italic;
    font-weight: 400;
}

/* ----------------------------------------------------------------
   Reveal animation (intersection observer driven)
---------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* The thread fades in 400ms (per design) instead of 600ms */
.stone-practice .thread.reveal {
    transition: opacity 400ms ease, transform 400ms ease;
}

.stone-practice .thread.reveal.is-visible {
    opacity: 0.3;
}

/* ----------------------------------------------------------------
   Responsive (< 768px)
   Content blocks expand to 85% viewport width but vertical spacing
   proportions remain. The ensō scales to 60% of desktop size.
---------------------------------------------------------------- */
@media (max-width: 768px) {
    body {
        font-size: 18px;
    }

    .stone-title {
        font-size: clamp(44px, 11vw, 64px);
    }

    .stone-heading {
        font-size: clamp(28px, 7vw, 36px);
    }

    /* Stone heights stretch slightly on mobile so blocks don't overlap. */
    .stone-origin       { height: 130vh; }
    .stone-imperfection { height: 130vh; }
    .stone-practice     { height: 140vh; }
    .stone-community    { height:  90vh; }
    .stone-continuation { height: 100vh; }

    /* Origin */
    .stone-origin .stone-title-wrap {
        top: 18vh;
        left: 7.5%;
        right: 7.5%;
        max-width: 85%;
    }

    .stone-origin .stone-paragraph {
        top: 60vh;
        left: 7.5%;
        right: 7.5%;
        max-width: 85%;
    }

    /* Imperfection */
    .stone-imperfection .enso-wrap {
        top: 22%;
        left: 50%;
        transform: translate(-50%, 0);
        width: 132px;   /* 60% of 220 */
        height: 132px;
    }

    .stone-imperfection .stone-right {
        top: 50%;
        right: 7.5%;
        left: 7.5%;
        max-width: 85%;
    }

    /* Practice */
    .stone-practice .stone-left-12 {
        top: 12%;
        left: 7.5%;
        right: 7.5%;
        max-width: 85%;
    }

    .stone-practice .thread {
        top: 50%;
    }

    .stone-practice .stone-right-25 {
        top: calc(58%);
        left: 7.5%;
        right: 7.5%;
        max-width: 85%;
    }

    /* Community */
    .stone-community .stone-center {
        max-width: 85%;
        width: 85%;
    }

    /* Continuation */
    .stone-continuation .stone-left-15 {
        top: 22%;
        left: 7.5%;
        right: 7.5%;
        max-width: 85%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        opacity: 1;
        transform: none;
    }
    .stone-practice .thread.reveal {
        opacity: 0.3;
    }
    html {
        scroll-behavior: auto;
    }
}