/* resar.one — wabi-sabi imperfect ceramic
   palette: kiln and earth
   raw clay      #F5F0E8   (background)
   aged wood     #4A3F30   (body text)
   river stone   #8A7D68   (annotations)
   ash glaze     #C8B090   (hairlines)
   kintsugi gold #C4A040   (single accent)
   iron slip     #A89070   (decorative)
   kiln wash     #E8E0D0   (stone 4 bg)
   dried mud     #D8CDB8   (rare accent)
*/

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

html, body {
    background-color: #F5F0E8;
    color: #4A3F30;
    font-family: "Crimson Text", "Cormorant", Georgia, serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 2.0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
}

.garden-path {
    display: block;
    position: relative;
    width: 100%;
}

/* ----- shared content typography ----- */

.heading {
    font-family: "Cormorant", Georgia, serif;
    font-weight: 300;
    color: #4A3F30;
    letter-spacing: 0.04em;
    line-height: 1.25;
    font-size: 38px;
    margin-bottom: 1.6em;
}

.stone-2 .heading { font-size: 42px; }
.stone-3 .heading { font-size: 32px; }
.stone-4 .heading { font-size: 36px; margin-bottom: 1.8em; }

.body {
    font-family: "Crimson Text", Georgia, serif;
    font-weight: 400;
    color: #4A3F30;
    font-size: 15px;
    line-height: 2.0;
    margin-bottom: 1.4em;
}

.annotation {
    font-family: "DM Mono", "Courier New", monospace;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #8A7D68;
    text-transform: lowercase;
    margin-top: 1.8em;
    line-height: 1.6;
}

/* ----- stones (the garden path) -----
   each stone is at minimum a full viewport, with vast emptiness.
   content is placed via absolute coordinates, asymmetric.
   each stone fades in via IntersectionObserver (.is-visible).
*/
.stone {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.content {
    position: absolute;
    opacity: 0;
    transition: opacity 2000ms ease-in;
}

.stone.is-visible .content {
    opacity: 1;
}

/* ----- Stone 1 — The Threshold ----- */

.stone-1 {
    min-height: 100vh;
}

.threshold-crack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2400ms ease-in;
}

.stone-1.is-visible .threshold-crack {
    opacity: 1;
}

.threshold-text {
    left: 30%;
    top: 70%;
    transform: translateY(-50%);
    max-width: 360px;
}

.threshold-text .phrase {
    font-family: "Cormorant", Georgia, serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #4A3F30;
}

/* ----- Stone 2 — The First Object ----- */

.stone-2 {
    min-height: 200vh; /* viewports 2-3 */
}

.first-object {
    left: 60%;
    top: 20%;
    width: 380px;
    max-width: 380px;
}

.first-object .heading {
    margin-bottom: 1.4em;
}

.torn-edge {
    display: block;
    width: 100%;
    height: 14px;
    margin-top: 1.6em;
    overflow: visible;
}

/* ----- Stone 3 — The Kintsugi Moment ----- */

.stone-3 {
    min-height: 200vh; /* viewports 3-4 */
}

.kintsugi-seam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.kintsugi-seam #kintsugi-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}

.stone-3.is-visible .kintsugi-seam #kintsugi-path {
    animation: draw-kintsugi 3000ms ease-in-out forwards;
    animation-delay: 600ms;
}

.kintsugi-seam circle {
    opacity: 0;
    transition: opacity 1200ms ease-in 3200ms;
}

.stone-3.is-visible .kintsugi-seam circle {
    opacity: 1;
}

@keyframes draw-kintsugi {
    from { stroke-dashoffset: 1400; }
    to   { stroke-dashoffset: 0; }
}

.kintsugi-block {
    width: 320px;
    max-width: 320px;
    z-index: 2;
}

.kintsugi-left {
    left: 15%;
    top: 30%;
}

.kintsugi-right {
    left: 70%;
    top: 55%;
}

/* ----- Stone 4 — The Patina ----- */

.stone-4 {
    min-height: 200vh; /* viewports 4-5 */
    background-color: #E8E0D0;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.49  0 0 0 0 0.39  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
    background-size: 80px 80px;
}

.patina-column {
    left: 25%;
    top: 14%;
    width: 340px;
    max-width: 340px;
    padding-left: 28px;
    padding-bottom: 6vh;
}

.patina-column .body {
    margin-bottom: 1.6em;
}

.breath-mark {
    position: absolute;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #C8B090;
    opacity: 0.3;
    pointer-events: none;
}

/* ----- Stone 5 — The Return ----- */

.stone-5 {
    min-height: 100vh;
    position: relative;
}

.return-text {
    left: 60%;
    top: 22%;
    width: 240px;
    text-align: left;
}

.single-word {
    font-family: "Cormorant", Georgia, serif;
    font-weight: 300;
    font-size: 64px;
    line-height: 1;
    color: #4A3F30;
    letter-spacing: 0.04em;
    margin-bottom: 0.6em;
}

.return-annotation {
    margin-top: 1.2em;
}

.enso {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 22%;
    top: 58%;
    opacity: 0;
    transition: opacity 2200ms ease-in;
}

.stone-5.is-visible .enso {
    opacity: 1;
}

.potters-mark {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 8%;
    bottom: 10%;
    opacity: 0;
    transition: opacity 2200ms ease-in 600ms;
}

.stone-5.is-visible .potters-mark {
    opacity: 1;
}

/* ----- responsive scaling ----- */

@media (max-width: 900px) {
    .threshold-text { left: 10%; max-width: 80%; }
    .first-object { left: 12%; top: 14%; width: 76%; max-width: 380px; }
    .kintsugi-left { left: 8%; top: 18%; width: 76%; max-width: 320px; }
    .kintsugi-right { left: 16%; top: 64%; width: 76%; max-width: 320px; }
    .patina-column { left: 12%; top: 10%; width: 76%; max-width: 360px; }
    .return-text { left: 14%; top: 18%; width: 70%; }
    .enso { left: 12%; top: 56%; }

    .heading { font-size: 32px; }
    .stone-2 .heading { font-size: 34px; }
    .stone-3 .heading { font-size: 28px; }
    .stone-4 .heading { font-size: 30px; }
    .single-word { font-size: 52px; }
}