/* ==========================================================================
   simulai.xyz -- Zen Garden Aesthetic
   Colors: #e8e2da, #3a3632, #8a8880, #4a4640, #f4f0ea, #7a8a74, #8a6a52, #d4cec6
   Fonts: Instrument Serif, Newsreader, Noto Sans JP
   ========================================================================== */

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: #e8e2da;
    color: #3a3632;
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.9;
    overflow-x: hidden;
}

/* ==========================================================================
   Hero Section -- 100vh stillness
   ========================================================================== */

.hero {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #e8e2da;
    position: relative;
    overflow: hidden;
}

.hero-character {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: clamp(60px, 12vw, 160px);
    color: #3a3632;
    opacity: 0;
    transition: opacity 1.5s ease;
    line-height: 1;
    letter-spacing: 0.02em;
    user-select: none;
}

.hero-character.visible {
    opacity: 1;
}

.hero-domain {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 14px;
    color: #8a8880;
    letter-spacing: 0.15em;
    margin-top: 40px;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-domain.visible {
    opacity: 1;
}

/* ==========================================================================
   Shape Markers -- geometric philosophical markers
   ========================================================================== */

.shape-marker {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.shape-marker svg {
    opacity: 0.7;
}

/* ==========================================================================
   Content Blocks -- organic flow with asymmetric placement
   ========================================================================== */

.content-block {
    padding: 80px 20px;
    position: relative;
}

.block-inner {
    position: relative;
}

/* Block 1: max-width 55%, margin-left 15% */
.block-1 .block-inner {
    max-width: 55%;
    margin-left: 15%;
}

/* Block 2: max-width 45%, margin-left 30% */
.block-2 .block-inner {
    max-width: 45%;
    margin-left: 30%;
}

/* Block 3: max-width 65%, margin-left 8% */
.block-3 .block-inner {
    max-width: 65%;
    margin-left: 8%;
}

/* Block 4: max-width 50%, margin-left 25% */
.block-4 .block-inner {
    max-width: 50%;
    margin-left: 25%;
}

/* Block 5: max-width 55%, margin-left 12% */
.block-5 .block-inner {
    max-width: 55%;
    margin-left: 12%;
}

/* Block 6: centered closing */
.block-6 .block-inner {
    max-width: 60%;
    margin-left: 20%;
    text-align: center;
}

/* Section Titles */
.section-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 48px);
    color: #3a3632;
    margin-bottom: 32px;
    line-height: 1.2;
}

/* Body paragraphs */
.content-block p {
    color: #4a4640;
    margin-bottom: 24px;
}

.content-block p:last-child {
    margin-bottom: 0;
}

.content-block em {
    font-weight: 500;
    font-style: italic;
    color: #3a3632;
}

/* Annotations -- Japanese terms */
.annotation {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: #8a8880;
    margin-top: 32px;
    letter-spacing: 0.05em;
}

.annotation-gloss {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 400;
    font-size: 14px;
    color: #8a8880;
    font-style: italic;
}

/* Closing text */
.closing-text {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1.6;
    color: #3a3632;
    font-weight: 400;
}

.closing-annotation {
    margin-top: 48px;
    font-size: 20px;
}

/* ==========================================================================
   Marble texture backgrounds
   ========================================================================== */

.marble-bg {
    background-color: #f4f0ea;
    position: relative;
    overflow: hidden;
}

.marble-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 45%,
            rgba(138, 136, 128, 0.05) 45.5%,
            rgba(138, 136, 128, 0.05) 46%,
            transparent 46.5%,
            transparent 100%
        ),
        linear-gradient(
            155deg,
            transparent 0%,
            transparent 60%,
            rgba(138, 136, 128, 0.04) 60.5%,
            rgba(138, 136, 128, 0.04) 61%,
            transparent 61.5%,
            transparent 100%
        ),
        linear-gradient(
            125deg,
            transparent 0%,
            transparent 30%,
            rgba(138, 136, 128, 0.03) 30.3%,
            rgba(138, 136, 128, 0.03) 30.8%,
            transparent 31.1%,
            transparent 100%
        );
    pointer-events: none;
}

/* ==========================================================================
   Raked sand pattern sections
   ========================================================================== */

.raked-sand-section {
    padding: 40px 0;
    overflow: hidden;
}

.raked-sand-pattern {
    width: 100%;
    height: 60px;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 6px,
        rgba(212, 206, 198, 0.3) 6px,
        rgba(212, 206, 198, 0.3) 8px
    );
    opacity: 0.6;
}

/* ==========================================================================
   Fade elements -- scroll-triggered emergence
   ========================================================================== */

.fade-element {
    opacity: 0;
    filter: blur(1px);
    transition: opacity 800ms ease, filter 800ms ease;
}

.fade-element.revealed {
    opacity: 1;
    filter: blur(0);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    padding: 80px 20px 60px;
    text-align: center;
}

.footer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.footer-domain {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 13px;
    color: #8a8880;
    letter-spacing: 0.12em;
}

.footer-year {
    font-family: 'Newsreader', Georgia, serif;
    font-size: 13px;
    color: #d4cec6;
}

/* ==========================================================================
   Accent colors for rare usage
   ========================================================================== */

/* Subtle sage accent: #7a8a74 */
/* Earth rust accent: #8a6a52 */

.shape-marker:nth-of-type(3n+1) svg circle,
.shape-marker:nth-of-type(3n+1) svg rect,
.shape-marker:nth-of-type(3n+1) svg polygon {
    stroke: #7a8a74;
}

.shape-marker:nth-of-type(3n) svg circle,
.shape-marker:nth-of-type(3n) svg rect,
.shape-marker:nth-of-type(3n) svg polygon {
    stroke: #8a6a52;
}

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

@media (max-width: 768px) {
    .block-1 .block-inner,
    .block-2 .block-inner,
    .block-3 .block-inner,
    .block-4 .block-inner,
    .block-5 .block-inner,
    .block-6 .block-inner {
        max-width: 85%;
        margin-left: 7.5%;
    }

    .content-block {
        padding: 60px 20px;
    }

    .shape-marker {
        padding: 40px 0;
    }

    .hero-character {
        font-size: clamp(50px, 20vw, 120px);
    }
}

@media (max-width: 480px) {
    .block-1 .block-inner,
    .block-2 .block-inner,
    .block-3 .block-inner,
    .block-4 .block-inner,
    .block-5 .block-inner,
    .block-6 .block-inner {
        max-width: 90%;
        margin-left: 5%;
    }

    .content-block {
        padding: 40px 16px;
    }

    .shape-marker {
        padding: 30px 0;
    }
}