/* === Base Reset & Custom Properties === */
:root {
    --kiln-orange: #c45e2c;
    --persimmon: #d4875e;
    --rice-paper: #f6f0e8;
    --parchment: #e8ddd0;
    --sumi-ink: #2c2418;
    --faded-brush: #7a6e5e;
    --charred-earth: #5c3a1e;
    --deep-loam: #1a1408;
    --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    --blur-in: 6px;
    --blur-out: 3px;
}

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

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

body {
    background-color: var(--rice-paper);
    color: var(--sumi-ink);
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.78;
    letter-spacing: 0.01em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* === Typography === */
.site-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--sumi-ink);
}

.greeting {
    font-family: 'Lora', serif;
    font-style: italic;
    color: var(--faded-brush);
    max-width: 38ch;
}

.prose-block p {
    max-width: 38ch;
    margin-left: 8vw;
}

.haiku {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    line-height: 2.4;
    color: var(--rice-paper);
    text-align: center;
}

.accent-text {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faded-brush);
}

/* === Stream One: The Surface === */
.stream {
    position: relative;
    width: 100%;
}

.stream-one {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8vh 8vw;
}

.stream-one .camellia {
    position: absolute;
    left: 5vw;
    top: 10vh;
    width: 40%;
    max-width: 380px;
    height: 60vh;
    opacity: 0;
    transition: opacity 2.5s var(--ease-gentle);
}

.stream-one .camellia.visible {
    opacity: 1;
}

.stream-one .site-title {
    position: absolute;
    top: 12vh;
    left: 42vw;
}

.stream-one .greeting {
    position: absolute;
    top: 30vh;
    left: 42vw;
}

.stream-one .greeting p {
    margin-bottom: 0.5em;
}

.ink-wash-one {
    position: absolute;
    right: 10vw;
    top: 30vh;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 94, 44, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* === SVG Stroke Animations === */
.draw-stroke {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: drawLine 1.8s var(--ease-gentle) forwards;
}

.camellia.visible .draw-stroke {
    animation: drawLine 1.8s var(--ease-gentle) forwards;
}

.camellia .stem { animation-delay: 0.3s; }
.camellia .leaf:nth-child(2) { animation-delay: 0.45s; }
.camellia .leaf:nth-child(3) { animation-delay: 0.6s; }
.camellia .leaf:nth-child(4) { animation-delay: 0.75s; }
.camellia .leaf:nth-child(5) { animation-delay: 0.9s; }
.camellia .leaf:nth-child(6) { animation-delay: 1.05s; }
.camellia .leaf:nth-child(7) { animation-delay: 1.2s; }
.camellia .leaf:nth-child(8) { animation-delay: 1.35s; }
.camellia .leaf:nth-child(9) { animation-delay: 1.5s; }
.camellia .leaf:nth-child(10) { animation-delay: 1.65s; }
.camellia .leaf:nth-child(11) { animation-delay: 1.8s; }
.camellia .leaf:nth-child(12) { animation-delay: 1.95s; }
.camellia .leaf:nth-child(13) { animation-delay: 2.1s; }
.camellia .vein:nth-of-type(1) { animation-delay: 2.25s; }
.camellia .vein:nth-of-type(2) { animation-delay: 2.4s; }
.camellia .vein:nth-of-type(3) { animation-delay: 2.55s; }
.camellia .vein:nth-of-type(4) { animation-delay: 2.7s; }
.camellia .vein:nth-of-type(5) { animation-delay: 2.85s; }
.camellia .vein:nth-of-type(6) { animation-delay: 3.0s; }

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* === Stream Two: The Depth === */
.stream-two {
    height: 150vh;
    position: relative;
    margin-top: 40vh;
}

.layer-back {
    position: sticky;
    top: 10vh;
    z-index: 1;
    pointer-events: none;
}

.layer-back .fern {
    width: 60%;
    max-width: 500px;
    height: auto;
    transform: scale(1.05);
    filter: blur(0.5px);
}

.layer-mid {
    position: sticky;
    top: 20vh;
    z-index: 2;
}

.layer-mid #prose-1 {
    margin-top: 5vh;
}

.layer-mid #prose-2 {
    margin-top: 35vh;
    margin-left: 15vw;
}

.layer-mid #prose-3 {
    margin-top: 65vh;
    margin-left: 5vw;
}

.layer-front {
    position: sticky;
    top: 5vh;
    z-index: 3;
    pointer-events: none;
}

.golden-rule {
    width: 61.8%;
    height: 1px;
    background-color: var(--parchment);
    margin-top: 20vh;
}

.hanko {
    position: absolute;
    top: 38.2%;
    left: 61.8%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--kiln-orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hanko-character {
    font-family: serif;
    font-size: 1.2rem;
    color: var(--rice-paper);
    line-height: 1;
}

/* === Stream Three: The Settling === */
.stream-three {
    height: 80vh;
    margin-top: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--deep-loam);
}

.lotus-composition {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 55px;
}

.lotus-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lotus {
    width: 100%;
    height: 100%;
}

.haiku p {
    margin: 0;
}

/* === Blur-Focus Interaction === */
.blur-target {
    filter: blur(var(--blur-in));
    opacity: 0.3;
    transition: filter 0.8s var(--ease-gentle), opacity 1.2s var(--ease-gentle);
}

.blur-target.in-focus {
    filter: blur(0px);
    opacity: 1;
}

.blur-target.past-focus {
    filter: blur(var(--blur-out));
    opacity: 0.5;
}

/* === Hover States === */
.site-title:hover {
    color: var(--charred-earth);
    transition: color 0.8s var(--ease-gentle);
}

.prose-block:hover {
    opacity: 1;
}

/* === Ink Wash Circles for Stream Two === */
.prose-block {
    position: relative;
}

.prose-block::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -20px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 94, 44, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}