/* iisugi.com - Japanese Zen Portfolio */
/* Palette: #f7f5f0, #3d3630, #c4beb4, #5c554d, #a8a098, #d4cec6, #6b7a4f */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #f7f5f0;
    color: #3d3630;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    line-height: 2.0;
    overflow-x: hidden;
}

/* ========================================
   Fixed Vertical Line at One-Third
   ======================================== */

.vertical-line {
    position: fixed;
    left: 33.33%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #c4beb4;
    z-index: 0;
    pointer-events: none;
}

/* ========================================
   Kanji Watermark
   ======================================== */

.kanji-watermark {
    position: fixed;
    top: 50%;
    left: 33.33%;
    transform: translate(-50%, -50%);
    font-family: 'Cormorant', serif;
    font-size: 28vw;
    font-weight: 300;
    color: #3d3630;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

/* ========================================
   Section 1: Stillness (Hero)
   ======================================== */

.stillness {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 12%;
    position: relative;
    z-index: 1;
}

.brand {
    font-family: 'Cormorant', serif;
    font-weight: 300;
    font-size: clamp(3.2rem, 8vw, 5.6rem);
    color: #3d3630;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.brand-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 10px;
    color: #a8a098;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-top: 1.2rem;
}

/* ========================================
   Section 2: Presence
   ======================================== */

.presence {
    position: relative;
    z-index: 1;
    padding: 120px 0;
    max-width: 480px;
    margin: 0 0 0 12%;
}

.presence-block {
    max-width: 340px;
}

.presence-heading {
    font-family: 'Cormorant', serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #3d3630;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.presence-text {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 0.88rem;
    color: #5c554d;
    line-height: 2.0;
}

/* ========================================
   Branch Line (connecting sections)
   ======================================== */

.branch-line {
    position: relative;
    z-index: 1;
    width: 80px;
    height: 1px;
    background: #c4beb4;
    margin: 0 0 0 calc(12% + 40px);
}

/* ========================================
   Section 3: Garden
   ======================================== */

.garden {
    position: relative;
    z-index: 1;
    padding: 160px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-field {
    position: relative;
    width: 600px;
    max-width: 90vw;
    height: 300px;
}

.stone {
    position: absolute;
    border-radius: 50%;
    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stone--dark { background: #5c554d; }
.stone--mid { background: #a8a098; }
.stone--light { background: #c4beb4; }
.stone--light-pale { background: #d4cec6; }

.stone--1 {
    width: 32px;
    height: 32px;
    top: 30%;
    left: 8%;
}

.stone--2 {
    width: 20px;
    height: 20px;
    top: 55%;
    left: 22%;
}

.stone--3 {
    width: 28px;
    height: 28px;
    top: 20%;
    left: 40%;
}

.stone--4 {
    width: 24px;
    height: 24px;
    top: 65%;
    left: 52%;
}

.stone--5 {
    width: 18px;
    height: 18px;
    top: 35%;
    left: 68%;
}

.stone--6 {
    width: 16px;
    height: 16px;
    top: 70%;
    left: 78%;
}

.stone--7 {
    width: 22px;
    height: 22px;
    top: 25%;
    left: 88%;
}

.moss-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6b7a4f;
    top: 48%;
    left: 35%;
}

/* ========================================
   Section 4: Breath
   ======================================== */

.breath {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 200px 2rem 160px;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.breath-line {
    width: 40px;
    height: 1px;
    background: #c4beb4;
    margin-bottom: 2.4rem;
}

.breath-word {
    font-family: 'Cormorant', serif;
    font-weight: 300;
    font-size: 1.1rem;
    color: #a8a098;
    letter-spacing: 0.1em;
}

/* ========================================
   Fade-in Animation
   ======================================== */

.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .stillness {
        padding-left: 8%;
    }

    .presence {
        padding: 80px 24px;
        margin-left: 8%;
    }

    .branch-line {
        margin-left: calc(8% + 24px);
    }

    .garden-field {
        height: 240px;
    }

    .kanji-watermark {
        font-size: 50vw;
    }
}

@media (max-width: 480px) {
    .stillness {
        padding-left: 6%;
    }

    .presence {
        margin-left: 6%;
        padding: 60px 20px;
    }

    .brand {
        font-size: 2.8rem;
    }

    .branch-line {
        margin-left: calc(6% + 20px);
    }

    .garden-field {
        height: 200px;
        width: 100%;
    }

    .breath {
        padding: 120px 1.5rem 100px;
    }
}