/* ===========================================================
   MMIDDL.com - The Middle of the Forest
   Fairycore reverie, layered-depth diorama, oversized display
   =========================================================== */

:root {
    --pressed-vellum: #f8efdc;
    --aged-honey: #f0d9a8;
    --caramel-mist: #d8a868;
    --inkwell-sepia: #3a2918;
    --mossbark: #5d4a2b;
    --peach-petal: #ffb585;
    --pollen-gold: #f7c948;
    --lichen-sage: #a3b18a;

    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

    --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --body: "Cormorant Garamond", Georgia, serif;
    --hand: "Caveat", "Brush Script MT", cursive;
    --accent: "Della Respira", "Fraunces", Georgia, serif;
}

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

html, body {
    background: var(--pressed-vellum);
    color: var(--inkwell-sepia);
    font-family: var(--body);
    font-size: 19px;
    line-height: 1.7;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    position: relative;
    perspective: 1000px;
    perspective-origin: 50% 30%;
}

/* Vellum noise texture overlay */
.vellum-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    opacity: 0.55;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.227  0 0 0 0 0.161  0 0 0 0 0.094  0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ===========================================================
   The Scene - Five-plane diorama
   =========================================================== */
.scene {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
}

.plane {
    position: absolute;
    inset: 0;
    width: 100%;
    pointer-events: none;
    will-change: transform;
}

/* Plane 1: Sky-Vellum */
.sky-vellum {
    z-index: 1;
    height: 100%;
    min-height: 100vh;
}
.sky-wash {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 80% 18%, var(--aged-honey) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 20% 30%, var(--peach-petal) 0%, transparent 55%),
        linear-gradient(180deg, var(--aged-honey) 0%, var(--pressed-vellum) 50%, var(--pressed-vellum) 100%);
    opacity: 0.45;
}
.sun-disc {
    position: fixed;
    top: 8vh;
    right: 12vw;
    width: 220px;
    height: 220px;
    opacity: 0.4;
    animation: slow-rotate 240s linear infinite;
    will-change: transform;
}
@keyframes slow-rotate {
    to { transform: rotate(360deg); }
}
.cloud {
    position: absolute;
    width: 320px;
    height: auto;
    opacity: 0.35;
}
.cloud-1 { top: 12vh; left: 4vw; }
.cloud-2 { top: 60vh; left: 60vw; width: 260px; opacity: 0.28; }
.cloud-3 { top: 140vh; left: 14vw; width: 380px; opacity: 0.32; }

/* Plane 2: Distant-Canopy */
.distant-canopy {
    z-index: 2;
    height: 100%;
}
.canopy-line {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 38vh;
    opacity: 0.35;
    transform: translateX(-12%);
}

/* Plane 4: Foliage-Frame */
.foliage-frame {
    z-index: 6;
    height: 100%;
    min-height: 100%;
    pointer-events: none;
}
.frame-fern {
    position: absolute;
    width: 240px;
    height: 640px;
    opacity: 0.7;
}
.frame-fern-left {
    top: 80vh;
    left: -40px;
}
.frame-ivy {
    position: absolute;
    width: 220px;
    height: 700px;
    right: -30px;
    top: 30vh;
    opacity: 0.78;
}
.frame-mushrooms {
    position: absolute;
    bottom: 8vh;
    right: 18vw;
    width: 280px;
    height: 140px;
    opacity: 0.78;
}

/* Plane 5: Pollen-Air (canvas) */
.pollen-air {
    position: fixed !important;
    inset: 0;
    z-index: 8;
    pointer-events: none;
}

/* Plane 3: Mid-Glade - actual content */
.mid-glade {
    position: relative;
    z-index: 5;
    width: 100%;
    pointer-events: auto;
}

/* ===========================================================
   Chapter Navigation - vertical glyph column
   =========================================================== */
.chapter-nav {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 26px;
    z-index: 30;
}
.chap-glyph {
    background: transparent;
    border: none;
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: transform 0.6s var(--bounce);
}
.chap-glyph svg {
    width: 100%;
    height: 100%;
    transition: transform 0.5s var(--bounce);
}
.chap-glyph:hover svg {
    transform: scale(1.18) rotate(-4deg);
}
.chap-glyph::after {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--inkwell-sepia);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0.4s var(--bounce);
}
.chap-glyph.is-current::after {
    transform: translateY(-50%) scale(1);
}
.chap-title {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%) scale(0.5);
    transform-origin: right center;
    opacity: 0;
    font-family: var(--display);
    font-size: 38px;
    font-weight: 400;
    font-style: italic;
    color: var(--inkwell-sepia);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.5s var(--ease-soft), transform 0.7s var(--bounce);
    letter-spacing: -0.02em;
    text-shadow: 0 0 30px var(--pressed-vellum);
}
.chap-glyph:hover .chap-title {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Lantern toggle special state */
#lanternToggle.is-on .lantern-flame {
    fill: var(--pollen-gold);
    stroke: var(--peach-petal);
    animation: flame-flicker 1.2s ease-in-out infinite;
}
@keyframes flame-flicker {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.18); }
}

/* ===========================================================
   Chapters / Sections
   =========================================================== */
.chapter {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 14vh 9vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.chapter-hero {
    min-height: 110vh;
    text-align: center;
    align-items: center;
    padding-top: 18vh;
}
.chapter-left {
    align-items: flex-start;
    padding-left: 9vw;
    padding-right: 22vw;
}
.chapter-right {
    align-items: flex-end;
    padding-right: 9vw;
    padding-left: 22vw;
    text-align: right;
}
.chapter-center {
    align-items: center;
    text-align: center;
}

/* Chapter numeral */
.chap-numeral {
    font-family: var(--accent);
    font-size: 22px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--mossbark);
    margin-bottom: 28px;
    opacity: 0.8;
}

/* ===========================================================
   Display Headlines - Oversized Fraunces
   =========================================================== */
.display-headline {
    font-family: var(--display);
    font-size: clamp(4.5rem, 12vw, 11rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.025em;
    color: var(--inkwell-sepia);
    margin: 0 0 0.5em;
    font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.hero-headline {
    font-size: clamp(5.5rem, 14vw, 13rem);
    margin-bottom: 0.4em;
}
.display-headline .word {
    display: inline-block;
    margin: 0 0.18em;
}
.display-headline .letter {
    display: inline-block;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
}
.display-headline .letter.ital {
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
    color: var(--mossbark);
}
.display-headline .space {
    display: inline-block;
    width: 0.4em;
}

.hero-sub {
    font-family: var(--hand);
    font-size: 38px;
    color: var(--mossbark);
    margin-bottom: 1.6em;
    transform: rotate(-1.5deg);
    letter-spacing: 0.01em;
}

.hero-lede {
    max-width: 720px;
    font-size: 22px;
    line-height: 1.6;
    color: var(--inkwell-sepia);
    margin: 0 auto;
    font-style: italic;
}

/* ===========================================================
   Body prose & drop cap
   =========================================================== */
.text-column {
    max-width: 560px;
    position: relative;
}
.text-column-wide { max-width: 720px; }

.body-prose {
    font-family: var(--body);
    font-size: 19px;
    line-height: 1.75;
    color: var(--inkwell-sepia);
    margin-bottom: 1.4em;
}
.dropcap {
    font-family: var(--accent);
    font-size: 5.5em;
    line-height: 0.85;
    float: left;
    padding: 0.06em 0.12em 0 0;
    color: var(--mossbark);
    background-image:
        radial-gradient(circle at 14% 80%, var(--lichen-sage) 0%, transparent 22%),
        radial-gradient(circle at 88% 20%, var(--peach-petal) 0%, transparent 18%);
    background-clip: padding-box;
}

/* ===========================================================
   Marginalia (Caveat handwriting)
   =========================================================== */
.caveat-margin {
    font-family: var(--hand);
    font-size: 32px;
    color: var(--mossbark);
    line-height: 1.1;
    --rot: -2deg;
    transform: rotate(var(--rot));
    margin: 0.5em 0;
    display: inline-block;
}
.margin-right {
    align-self: flex-end;
    text-align: right;
    --rot: 2deg;
}
.margin-left {
    align-self: flex-start;
    --rot: -3deg;
}
.margin-center {
    align-self: center;
    text-align: center;
    --rot: -1deg;
}

/* Pull quote */
.pull-quote {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-style: italic;
    line-height: 1.25;
    color: var(--mossbark);
    border-left: 2px solid var(--caramel-mist);
    padding: 0.4em 0 0.4em 1em;
    margin: 1.6em 0;
    max-width: 540px;
    font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.chapter-right .pull-quote {
    border-left: none;
    border-right: 2px solid var(--caramel-mist);
    padding: 0.4em 1em 0.4em 0;
    text-align: right;
    margin-left: auto;
}

/* ===========================================================
   Wreath - hand-drawn ivy frame around hero
   =========================================================== */
.wreath {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(82vw, 680px);
    height: min(82vw, 680px);
    pointer-events: none;
    z-index: -1;
    opacity: 0.9;
}
.wreath svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.wreath-paths path,
.wreath-paths circle {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    opacity: 0;
}
.wreath.is-revealed .wreath-paths path,
.wreath.is-revealed .wreath-paths circle {
    animation: stroke-grow 1.4s var(--ease-soft) forwards;
}
.wreath.is-revealed .wreath-paths > path:nth-child(1) { animation-delay: 0ms; }
.wreath.is-revealed .wreath-paths > path:nth-child(2) { animation-delay: 80ms; }
.wreath.is-revealed .wreath-paths > path:nth-child(3) { animation-delay: 160ms; }
.wreath.is-revealed .wreath-paths > path:nth-child(4) { animation-delay: 240ms; }
.wreath.is-revealed .wreath-paths .leaf path {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: stroke-grow-short 0.7s var(--ease-soft) forwards;
}
.wreath.is-revealed .wreath-paths .leaf:nth-child(5) path { animation-delay: 320ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(6) path { animation-delay: 380ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(7) path { animation-delay: 440ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(8) path { animation-delay: 500ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(9) path { animation-delay: 560ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(10) path { animation-delay: 620ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(11) path { animation-delay: 680ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(12) path { animation-delay: 740ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(13) path { animation-delay: 800ms; }
.wreath.is-revealed .wreath-paths .leaf:nth-child(14) path { animation-delay: 860ms; }
.wreath.is-revealed .wreath-paths .bloom circle {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    fill: var(--pollen-gold);
    animation: bloom-pop 0.5s var(--bounce) forwards;
}
.wreath.is-revealed .wreath-paths .bloom:nth-child(15) circle { animation-delay: 920ms; }
.wreath.is-revealed .wreath-paths .bloom:nth-child(16) circle { animation-delay: 980ms; }
.wreath.is-revealed .wreath-paths .bloom:nth-child(17) circle { animation-delay: 1040ms; }
.wreath.is-revealed .wreath-paths .bloom:nth-child(18) circle { animation-delay: 1100ms; }
.wreath.is-revealed .wreath-paths .bloom:nth-child(19) circle { animation-delay: 1160ms; }
.wreath.is-revealed .wreath-paths .bloom:nth-child(20) circle { animation-delay: 1220ms; }

@keyframes stroke-grow {
    to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes stroke-grow-short {
    to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes bloom-pop {
    0% { stroke-dashoffset: 30; opacity: 0; transform: scale(0); }
    100% { stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
}

/* ===========================================================
   Creatures (line illustrations)
   =========================================================== */
.creature {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}
.creature-snail {
    width: 110px;
    height: 70px;
    bottom: 18%;
    right: 14vw;
    transform: translateY(40px) rotate(8deg) scale(0.8);
    opacity: 0;
}
.creature-wren {
    width: 130px;
    height: 130px;
    top: 12%;
    right: 8%;
}
.creature-mushroom {
    width: 110px;
    height: 140px;
    bottom: 8%;
    right: 12%;
}
.creature-acorn {
    width: 90px;
    height: 110px;
    top: 18%;
    left: 10%;
}
.creature-beetle {
    width: 110px;
    height: 80px;
    bottom: 14%;
    left: 14%;
}
.creature-moth {
    width: 160px;
    height: 120px;
    top: 18%;
    right: 10%;
}
.creature-dandelion {
    width: 110px;
    height: 110px;
    bottom: 12%;
    left: 12%;
}
.creature-bell {
    width: 100px;
    height: 130px;
    top: 50%;
    right: 14%;
    transform: translateY(-50%);
}

/* Moth wing-beat */
.moth-wing {
    transform-origin: center center;
    animation: wing-beat 600ms ease-in-out infinite;
}
.moth-wing-l { animation-name: wing-beat-left; }
.moth-wing-r { animation-name: wing-beat-right; }
@keyframes wing-beat-left {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.62); }
}
@keyframes wing-beat-right {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.62); }
}

/* Wren head tilt */
.creature-wren {
    animation: head-tilt 4s ease-in-out infinite;
    transform-origin: 50% 60%;
}
@keyframes head-tilt {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-4deg); }
    65% { transform: rotate(3deg); }
}

/* Snail crawls along */
.creature-snail.is-crawling {
    animation: snail-crawl 8s linear infinite;
}
@keyframes snail-crawl {
    0% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-30px) translateY(0); }
    100% { transform: translateX(0) translateY(0); }
}

/* ===========================================================
   Forest footer
   =========================================================== */
.forest-foot {
    margin-top: 4em;
    text-align: right;
    width: 100%;
}
.caveat-foot {
    font-family: var(--hand);
    font-size: 24px;
    color: var(--mossbark);
    transform: rotate(-1deg);
    display: inline-block;
    letter-spacing: 0.02em;
}

/* ===========================================================
   Reveal / bounce-enter base states
   =========================================================== */
.reveal {
    opacity: 0;
    transform: translateY(80px) rotate(2deg);
    transition: opacity 0.72s var(--bounce), transform 0.72s var(--bounce);
    will-change: transform, opacity;
}
.reveal.is-in {
    opacity: 1;
    transform: translateY(0) rotate(0);
}
.reveal-creature {
    opacity: 0;
    transform: translateY(60px) scale(0) rotate(12deg);
    transition: opacity 0.7s var(--bounce), transform 0.9s var(--bounce);
    will-change: transform, opacity;
}
.reveal-creature.is-in {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
}

/* Letter-by-letter reveal */
.reveal-letters .letter {
    opacity: 0;
    transform: translateY(-80px) rotate(8deg);
    transition: opacity 0.6s var(--bounce), transform 0.72s var(--bounce);
}
.reveal-letters.is-in .letter {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* ===========================================================
   Lantern glows
   =========================================================== */
.lantern-glow {
    position: fixed;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--peach-petal) 0%, transparent 65%);
    mix-blend-mode: multiply;
    opacity: 0.18;
    pointer-events: none;
    z-index: 7;
    filter: blur(20px);
}
.lantern-glow-1 { top: 40vh; left: 8vw; }
.lantern-glow-2 { top: 140vh; right: 12vw; width: 280px; height: 280px; }
.lantern-glow-3 { top: 240vh; left: 28vw; width: 320px; height: 320px; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 760px) {
    body { font-size: 17px; }
    .chapter-nav {
        right: 12px;
        gap: 18px;
    }
    .chap-glyph {
        width: 32px;
        height: 32px;
    }
    .chap-title {
        font-size: 24px;
        right: 42px;
    }
    .chapter {
        padding: 12vh 6vw;
    }
    .chapter-left,
    .chapter-right {
        padding-left: 6vw;
        padding-right: 6vw;
        text-align: left;
        align-items: flex-start;
    }
    .chapter-right { text-align: left; }
    .text-column { max-width: 100%; }
    .display-headline {
        font-size: clamp(3.2rem, 14vw, 6rem);
    }
    .hero-headline {
        font-size: clamp(3.5rem, 16vw, 7rem);
    }
    .creature {
        transform: scale(0.7);
        opacity: 0.5;
    }
    .frame-fern, .frame-ivy, .frame-mushrooms { opacity: 0.4; }
    .pull-quote { font-size: 1.4rem; }
    .caveat-margin { font-size: 24px; }
    .hero-sub { font-size: 28px; }
    .dropcap { font-size: 4em; }
}

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