/* mosoon.org — Forest Earth, asymmetric organic field journal */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

:root {
    --forest-cream: #F0E8D8;
    --moss-green: #4A7050;
    --earth-brown: #6A4830;
    --bark-dark: #2A1810;
    --leaf-light: #A0C080;
    --soil-warm: #8A6840;
    --fern-soft: #7AA068;

    --font-hand: "Caveat", "Inter", cursive;
    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

    --pad-block: clamp(48px, 9vh, 110px);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--bark-dark);
    background-color: var(--forest-cream);
    line-height: 1.75;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Subtle paper grain on body via repeating layered radial gradients */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(106, 72, 48, 0.04), transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(74, 112, 80, 0.035), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(138, 104, 64, 0.025), transparent 70%);
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------------- Hero ---------------- */
.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: var(--forest-cream);
    z-index: 1;
}

.hero-wash {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    pointer-events: none;
    z-index: 0;
}

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

.botanical {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.4s ease 0.4s, transform 1.4s ease 0.4s;
    z-index: 1;
}

.hero.is-ready .botanical {
    opacity: 0.7;
    transform: translateY(0);
}

.botanical-fern-left {
    left: clamp(-10px, 2vw, 30px);
    bottom: 0;
    width: clamp(120px, 14vw, 220px);
    height: auto;
    transition-delay: 0.5s;
}

.botanical-leaves-right {
    right: clamp(-20px, 3vw, 40px);
    top: 8vh;
    width: clamp(120px, 13vw, 200px);
    height: auto;
    transition-delay: 0.9s;
}

.botanical-mushroom {
    left: clamp(8%, 22vw, 32%);
    bottom: clamp(14vh, 18vh, 22vh);
    width: clamp(60px, 8vw, 110px);
    height: auto;
    transition-delay: 1.3s;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: clamp(80px, 14vh, 160px) clamp(24px, 8vw, 120px) 0;
    max-width: 880px;
    margin-left: clamp(8%, 12vw, 22%);
}

.kicker {
    font-family: var(--font-hand);
    font-weight: 400;
    color: var(--soil-warm);
    font-size: clamp(18px, 1.6vw, 24px);
    letter-spacing: 0.5px;
    transform: rotate(-2deg);
    transform-origin: left center;
    margin-bottom: 6px;
    opacity: 0;
    transform-origin: left top;
    animation: fadeRise 1000ms ease 200ms forwards;
}

.logotype {
    font-family: var(--font-hand);
    font-weight: 700;
    color: var(--bark-dark);
    font-size: clamp(56px, 11vw, 148px);
    line-height: 0.95;
    letter-spacing: -1px;
    margin-bottom: clamp(12px, 2vh, 28px);
    display: inline-block;
    transform: rotate(-1.5deg);
    transform-origin: left center;
}

.logotype-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    animation: fadeRise 1000ms ease forwards;
}

.logotype-line:nth-child(1) { animation-delay: 250ms; }
.logotype-line:nth-child(2) { animation-delay: 500ms; }
.logotype-line:nth-child(3) { animation-delay: 700ms; color: var(--moss-green); }

.logotype-dot {
    color: var(--moss-green);
}

.tagline {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--earth-brown);
    font-size: clamp(15px, 1.3vw, 19px);
    max-width: 560px;
    margin-bottom: 18px;
    opacity: 0;
    animation: fadeRise 1100ms ease 950ms forwards;
}

.hero-annotation {
    transform: rotate(-3deg) translateX(8%);
    opacity: 0;
    animation: fadeRise 1000ms ease 1300ms forwards;
}

.annotation {
    font-family: var(--font-hand);
    font-weight: 400;
    color: var(--soil-warm);
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.4;
    display: inline-block;
}

.annotation-arrow {
    color: var(--moss-green);
    margin-right: 4px;
    font-size: 1.1em;
}

.annotation-tilt-left {
    transform: rotate(-3deg) translateX(2%);
}

.annotation-tilt-right {
    transform: rotate(2deg) translateX(-2%);
}

.hero-scroll {
    position: absolute;
    bottom: clamp(20px, 4vh, 44px);
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    z-index: 3;
    text-align: center;
    opacity: 0;
    animation: fadeRise 1000ms ease 1700ms forwards;
}

.scroll-text {
    display: block;
    font-family: var(--font-hand);
    font-size: 18px;
    color: var(--earth-brown);
    margin-bottom: 4px;
}

.scroll-arrow {
    width: 26px;
    height: 50px;
    animation: drift 3.6s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

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

/* ---------------- Journal flow ---------------- */
.journal {
    position: relative;
    z-index: 1;
    padding: clamp(40px, 8vh, 100px) 0 0;
}

.section {
    position: relative;
    padding: var(--pad-block) 0;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    z-index: 1;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-left {
    margin-left: clamp(5%, 8vw, 15%);
    margin-right: clamp(20%, 30vw, 42%);
    max-width: 780px;
}

.section-right {
    margin-left: clamp(22%, 32vw, 44%);
    margin-right: clamp(5%, 12vw, 20%);
    max-width: 780px;
}

/* asymmetric per-section variance */
.section-manifesto { margin-left: clamp(6%, 10vw, 17%); }
.section-principles { margin-left: clamp(28%, 36vw, 46%); margin-right: clamp(4%, 8vw, 14%); }
.section-seasons { margin-left: clamp(8%, 12vw, 19%); }
.section-plots { margin-left: clamp(24%, 30vw, 42%); }
.section-letter { margin-left: clamp(7%, 11vw, 18%); }

.section-wash {
    position: absolute;
    inset: 6% -8% 6% -8%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.85;
}

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

/* ---------------- Panels (with organic clip) ---------------- */
.panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(240, 232, 216, 0.95) 0%, rgba(240, 232, 216, 0.80) 100%);
    padding: clamp(32px, 5vw, 64px) clamp(28px, 4vw, 56px);
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(106, 72, 48, 0.10),
        0 18px 38px -22px rgba(42, 24, 16, 0.18);
}

.panel::before {
    content: "";
    position: absolute;
    inset: -8px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(74, 112, 80, 0.10), transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(138, 104, 64, 0.10), transparent 60%);
    z-index: -1;
    filter: blur(6px);
}

.panel-clip-1 { clip-path: url(#organic-edge-1); }
.panel-clip-2 { clip-path: url(#organic-edge-2); }
.panel-clip-3 { clip-path: url(#organic-edge-3); }

.panel-stamp {
    font-family: var(--font-hand);
    font-weight: 700;
    color: var(--moss-green);
    font-size: clamp(22px, 2.4vw, 36px);
    transform: rotate(-4deg);
    display: inline-block;
    margin-bottom: 4px;
    opacity: 0.9;
}

.section-heading {
    font-family: var(--font-hand);
    font-weight: 700;
    color: var(--bark-dark);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    margin-bottom: clamp(14px, 2vw, 22px);
    transform: rotate(-1deg);
    transform-origin: left bottom;
}

.section-body {
    font-family: var(--font-body);
    color: var(--earth-brown);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.85;
    max-width: 60ch;
    margin-bottom: 18px;
}

/* margin sprigs (small botanical near a panel) */
.margin-sprig {
    position: absolute;
    width: clamp(60px, 8vw, 110px);
    height: auto;
    opacity: 0.55;
    pointer-events: none;
}

.margin-sprig-right {
    right: clamp(-30px, -2vw, -10px);
    top: 18%;
    transform: rotate(8deg);
}

.margin-sprig-left {
    left: clamp(-30px, -3vw, -10px);
    bottom: 12%;
    transform: rotate(-12deg);
}

/* ---------------- Principles list ---------------- */
.principles {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    display: grid;
    gap: clamp(10px, 1.4vw, 18px);
}

.principles li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    color: var(--bark-dark);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.7;
}

.principle-bullet {
    color: var(--moss-green);
    font-size: 1.2em;
    flex-shrink: 0;
    transform: translateY(2px);
}

.principle-text em {
    color: var(--moss-green);
    font-style: italic;
    font-weight: 600;
}

/* ---------------- Seasons wheel ---------------- */
.seasons-wheel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 22px 0 16px;
}

.season {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    background: rgba(240, 232, 216, 0.6);
    border: 1px dashed rgba(106, 72, 48, 0.35);
    border-radius: 6px;
    color: var(--bark-dark);
    font-family: var(--font-body);
    cursor: pointer;
    text-align: left;
    transition: background 400ms ease, border-color 400ms ease, transform 400ms ease;
    transform: rotate(-0.5deg);
}

.season:nth-child(2) { transform: rotate(0.6deg); }
.season:nth-child(3) { transform: rotate(-0.7deg); }
.season:nth-child(4) { transform: rotate(0.5deg); }

.season:hover {
    background: rgba(160, 192, 128, 0.25);
    border-color: rgba(74, 112, 80, 0.6);
}

.season[aria-selected="true"] {
    background: rgba(74, 112, 80, 0.18);
    border-color: var(--moss-green);
    border-style: solid;
}

.season-glyph {
    font-size: 22px;
    color: var(--moss-green);
}

.season-name {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--bark-dark);
    line-height: 1;
}

.season-note {
    font-size: clamp(12px, 0.9vw, 14px);
    color: var(--soil-warm);
}

.season-readout {
    font-family: var(--font-hand);
    color: var(--earth-brown);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.4;
    transform: rotate(-1deg);
    transform-origin: left;
    transition: opacity 600ms ease, transform 600ms ease;
}

.season-readout em {
    color: var(--moss-green);
    font-style: italic;
}

.season-readout.is-changing {
    opacity: 0;
    transform: rotate(-1deg) translateY(6px);
}

/* ---------------- Plots ---------------- */
.plots {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 2.5vw, 28px);
    margin-top: 18px;
}

.plot {
    position: relative;
    padding: 10px 0 10px 18px;
    border-left: 2px dashed rgba(106, 72, 48, 0.4);
}

.plot:nth-child(2) { border-left-color: rgba(74, 112, 80, 0.5); margin-left: 6%; }
.plot:nth-child(3) { border-left-color: rgba(138, 104, 64, 0.5); margin-left: 12%; }

.plot-title {
    font-family: var(--font-hand);
    font-weight: 700;
    color: var(--bark-dark);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.1;
    margin-bottom: 4px;
}

.plot-body {
    font-size: clamp(14px, 1vw, 16px);
    color: var(--earth-brown);
    margin-bottom: 4px;
}

/* ---------------- Letter form ---------------- */
.letter-form {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.field {
    display: grid;
    gap: 6px;
}

.field-label {
    font-family: var(--font-hand);
    font-size: clamp(18px, 1.4vw, 22px);
    color: var(--moss-green);
    line-height: 1.2;
}

.field-hint {
    color: var(--soil-warm);
    font-size: 0.85em;
}

.field input,
.field textarea {
    font-family: var(--font-body);
    font-size: clamp(15px, 1vw, 17px);
    color: var(--bark-dark);
    background: transparent;
    border: 0;
    border-bottom: 1.5px dashed rgba(106, 72, 48, 0.45);
    padding: 6px 4px;
    outline: none;
    resize: vertical;
    transition: border-color 300ms ease, background 300ms ease;
}

.field input:focus,
.field textarea:focus {
    border-bottom-color: var(--moss-green);
    background: rgba(160, 192, 128, 0.10);
}

.letter-submit {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: var(--moss-green);
    color: var(--forest-cream);
    border: 0;
    border-radius: 999px;
    font-family: var(--font-hand);
    font-size: clamp(18px, 1.4vw, 22px);
    cursor: pointer;
    transform: rotate(-1deg);
    transition: background 400ms ease, transform 400ms ease;
}

.letter-submit:hover {
    background: var(--earth-brown);
    transform: rotate(-1deg) translateY(-2px);
}

.letter-submit-arrow {
    width: 32px;
    height: 16px;
}

.form-status {
    font-family: var(--font-hand);
    color: var(--moss-green);
    font-size: clamp(16px, 1.2vw, 20px);
    min-height: 1.4em;
    transform: rotate(-2deg);
    transform-origin: left;
}

/* ---------------- Closing ---------------- */
.closing {
    position: relative;
    padding: clamp(80px, 14vh, 160px) clamp(20px, 6vw, 100px) clamp(60px, 10vh, 120px);
    text-align: center;
    overflow: hidden;
    z-index: 1;
}

.closing-wash {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
}

.closing-line {
    font-family: var(--font-hand);
    font-weight: 700;
    color: var(--bark-dark);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.2;
    transform: rotate(-1deg);
    margin-bottom: 16px;
}

.closing-mark {
    font-family: var(--font-hand);
    color: var(--soil-warm);
    font-size: clamp(16px, 1.2vw, 20px);
    transform: rotate(-1deg);
}

/* ---------------- Cursor leaf follower ---------------- */
.cursor-leaf {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 600ms ease, transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.cursor-leaf.is-active {
    opacity: 0.85;
}

/* Pre-fade utility */
[data-fade] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

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

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
    .section-left,
    .section-right,
    .section-manifesto,
    .section-principles,
    .section-seasons,
    .section-plots,
    .section-letter {
        margin-left: clamp(5%, 8vw, 12%);
        margin-right: clamp(5%, 8vw, 12%);
        max-width: none;
    }

    .seasons-wheel {
        grid-template-columns: 1fr;
    }

    .botanical-fern-left,
    .botanical-leaves-right {
        opacity: 0.45;
        width: clamp(90px, 22vw, 140px);
    }

    .botanical-mushroom { display: none; }

    .hero-content {
        margin-left: clamp(6%, 8vw, 12%);
        padding-top: clamp(60px, 12vh, 110px);
    }

    .plot:nth-child(2),
    .plot:nth-child(3) {
        margin-left: 0;
    }

    .panel-clip-1,
    .panel-clip-2,
    .panel-clip-3 {
        clip-path: none;
    }

    .panel {
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cursor-leaf { display: none; }
}