/* ============================================================
   chloe.cx — a place where things grow slowly
   Muji-inspired split-screen narrative
   `{ once: true }` elements re-animate IntersectionObserver` `threshold: 0.15`. achieved `cubic-bezier(0.34 This truly centered horizontally vertically. bullet (Google
   ============================================================ */

:root {
    /* Palette — muted vintage, no pure whites or blacks */
    --c-bg-primary: #F4EDE4;    /* Warm Linen */
    --c-bg-secondary: #E8DFD3;  /* Pale Clay */
    --c-text-primary: #3B3632;  /* Charred Bark */
    --c-text-secondary: #5A5550;/* Warm Stone */
    --c-accent-green: #8B9A82;  /* Faded Sage */
    --c-accent-warm: #C4A699;   /* Dusty Rose */
    --c-overlay: #D6CFC5;       /* Spring Mist */
    --c-deep: #6B5E53;          /* Soft Umber */

    /* Rhythm — 4rem baseline */
    --beat: 4rem;
    --section-gap: 8rem;

    /* Easing */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-weight: 400;
    color: var(--c-text-secondary);
    background: var(--c-bg-primary);
    line-height: 1.85;
    letter-spacing: 0.01em;
    font-size: 1.0625rem;
    overflow-x: hidden;
    /* handmade paper grain */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.21  0 0 0 0 0.20  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>");
}

main {
    display: block;
    width: 100%;
}

/* ---------- Typography ---------- */

.site-title,
.section-heading {
    font-family: "Barlow Condensed", "Archivo Narrow", "Arial Narrow", sans-serif;
    font-weight: 600;
    color: var(--c-text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.05;
}

.site-title {
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.06em;
    text-transform: lowercase;
}

.section-heading {
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    margin-bottom: 1.5rem;
}

.eyebrow,
.garden-wordmark {
    font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-accent-green);
    display: inline-block;
    margin-bottom: 2.25rem;
}

.body-text,
.fold-subtitle,
.bridge-text,
.garden-greeting {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    color: var(--c-text-secondary);
}

.fold-subtitle {
    font-size: 0.875rem;
    margin-top: 1.5rem;
    letter-spacing: 0.02em;
    font-style: italic;
    opacity: 0;
    animation: fadeIn 1.5s var(--ease-calm) 1.2s both;
}

.body-text {
    font-size: 1.0625rem;
    line-height: 1.85;
    max-width: 32ch;
}

/* ---------- Fixed two-line mark (Muji minimalism) ---------- */

.menu-toggle {
    position: fixed;
    top: 1.8rem;
    right: 2rem;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: default;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    padding: 0;
}

.menu-line {
    display: block;
    width: 28px;
    height: 1px;
    background: var(--c-text-primary);
    transition: transform 400ms var(--ease-spring),
                width 400ms var(--ease-spring),
                opacity 400ms var(--ease-spring);
}

/* ---------- THE FOLD (hero) ---------- */

.fold {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    background: var(--c-bg-primary);
}

.fold-image {
    flex: 0 0 55%;
    position: relative;
    overflow: hidden;
}

.fold-text {
    flex: 0 0 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

.fold-inner {
    max-width: 480px;
    text-align: center;
    padding: 0 2rem;
    position: relative;
}

.fold-inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -6rem;
    width: 1px;
    height: 5rem;
    background: var(--c-accent-green);
    opacity: 0.2;
    transform: translateX(-50%);
}

/* ---------- Shared photo treatment ---------- */

.photo {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    filter: saturate(0.7) contrast(0.95) brightness(1.05);
    box-shadow: 0 0 0 1px var(--c-bg-secondary);
}

.photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-overlay);
    opacity: 0.18;
    pointer-events: none;
    mix-blend-mode: normal;
}

.photo-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Split sections ---------- */

.split {
    display: flex;
    width: 100vw;
    min-height: 92vh;
    position: relative;
}

.section-morning {
    background: var(--c-bg-primary);
}
.section-noon {
    background: var(--c-bg-primary);
}
.section-afternoon {
    background: var(--c-bg-secondary);
}
.section-dusk {
    background: var(--c-bg-secondary);
}

/* Living proportions */
.split-left-photo .split-image { flex: 0 0 55%; }
.split-left-photo .split-text  { flex: 0 0 45%; }
.split-right-photo .split-image { flex: 0 0 40%; order: 2; }
.split-right-photo .split-text  { flex: 0 0 60%; order: 1; }

.split-image {
    position: relative;
    min-height: 92vh;
    overflow: hidden;
}

.split-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    position: relative;
}

.split-inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

/* Growth-line decoration from the top of text panels */
.split-inner::before {
    content: "";
    position: absolute;
    top: -6rem;
    left: 1.5rem;
    width: 1px;
    height: 5rem;
    background: var(--c-accent-green);
    opacity: 0.2;
}

/* ---------- Reveal animation (IntersectionObserver) ---------- */

[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1200ms var(--ease-calm),
                transform 1200ms var(--ease-spring);
}

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

/* ---------- Pressed-flower dividers ---------- */

.divider {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.divider-svg {
    width: 100%;
    max-width: 800px;
    height: 120px;
    animation: pulse 6s var(--ease-calm) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.3; }
}

/* ---------- THE BRIDGE (full-bleed) ---------- */

.bridge {
    position: relative;
    width: 100vw;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--c-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bridge-image {
    position: absolute;
    inset: 0;
    filter: saturate(0.7) contrast(0.95) brightness(1.05);
}

.bridge-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c-bg-primary);
    opacity: 0.2;
}

.bridge-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bridge-overlay {
    position: relative;
    z-index: 2;
    max-width: 600px;
    width: calc(100% - 4rem);
    padding: 3rem 2.5rem;
    background: rgba(244, 237, 228, 0.85);
    backdrop-filter: blur(1px);
    text-align: center;
}

.bridge-text {
    font-size: 1.125rem;
    line-height: 1.9;
    color: var(--c-text-primary);
    letter-spacing: 0.015em;
    font-style: italic;
}

/* ---------- THE GARDEN (footer, 20/80) ---------- */

.garden {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    background: var(--c-bg-secondary);
}

.garden-strip {
    flex: 0 0 20%;
    background: var(--c-deep);
    position: relative;
}

.garden-strip::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.5px;
    width: 1px;
    height: 40%;
    background: var(--c-accent-green);
    opacity: 0.3;
    transform: translateY(-50%);
}

.garden-field {
    flex: 0 0 80%;
    background: linear-gradient(180deg, var(--c-bg-secondary) 0%, var(--c-bg-primary) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 4rem 5rem 3rem;
    position: relative;
}

.garden-inner {
    max-width: 520px;
    text-align: right;
    position: relative;
}

.garden-branch {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 3rem;
    display: block;
    margin-left: auto;
}

.garden-greeting {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--c-text-primary);
    font-style: italic;
    margin-bottom: 2.5rem;
    letter-spacing: 0.02em;
}

.garden-links {
    list-style: none;
    margin-bottom: 4rem;
}

.garden-links li {
    margin: 0.6rem 0;
}

.text-link {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--c-text-primary);
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding: 0.15rem 0;
}

.text-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--c-accent-warm);
    transition: width 500ms var(--ease-spring);
}

.text-link:hover::after {
    width: 100%;
}

.garden-wordmark {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--c-text-secondary);
    margin-bottom: 0;
    margin-top: 1rem;
}

/* ---------- Background transition — morning to dusk ---------- */

#hero { background: var(--c-bg-primary); }
#section-morning { background: var(--c-bg-primary); }
#section-noon { background: var(--c-bg-secondary); }
#bridge { background: var(--c-bg-secondary); }
#section-afternoon { background: var(--c-bg-secondary); }
#section-dusk { background: var(--c-bg-secondary); }
#garden { background: var(--c-deep); }

/* ---------- Keyframes ---------- */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive: stack on small screens, preserve rhythm ---------- */

@media (max-width: 860px) {
    .fold,
    .split,
    .garden {
        flex-direction: column;
        min-height: auto;
    }

    .fold-image,
    .fold-text,
    .split-image,
    .split-text,
    .split-left-photo .split-image,
    .split-left-photo .split-text,
    .split-right-photo .split-image,
    .split-right-photo .split-text,
    .garden-strip,
    .garden-field {
        flex: 0 0 auto;
        width: 100%;
    }

    .split-right-photo .split-image { order: 1; }
    .split-right-photo .split-text  { order: 2; }

    .fold-image,
    .split-image {
        min-height: 60vh;
        height: 60vh;
    }

    .fold-text,
    .split-text {
        min-height: 50vh;
        padding: 5rem 1.5rem;
    }

    .garden-strip {
        min-height: 6vh;
        height: 6vh;
    }

    .garden-field {
        padding: 4rem 2rem 3rem;
        align-items: center;
        justify-content: center;
    }

    .garden-inner {
        text-align: center;
    }

    .garden-branch {
        margin: 0 auto 2.5rem;
    }

    .menu-toggle {
        top: 1.25rem;
        right: 1.25rem;
    }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .fold-subtitle {
        opacity: 1;
    }
}