/* =========================================================
   sim-ai.xyz — A Renaissance Codex on Simulation & Intelligence
   ========================================================= */

:root {
    /* Palette ------------------------------------------------ */
    --c-bg-deep: #0A1F14;          /* Deep Forest */
    --c-bg-moss: #1B4332;          /* Moss Canopy */
    --c-bg-fern: #2D6A4F;          /* Fern Shadow */
    --c-bg-fern-alt: #2D5F3A;      /* Forest mid */
    --c-text-parchment: #E8DCC8;
    --c-text-vellum: #D4C9B5;
    --c-accent-gold: #C9A96E;      /* Candlelight */
    --c-accent-amber: #D4944A;     /* Amber flame */
    --c-accent-sage: #8FA98B;      /* Scholar's sage */
    --c-accent-copper: #5E8C6A;    /* Copper patina */
    --c-shadow-ink: #061A0E;
    --c-flame-core: #FFFBE6;

    /* Type --------------------------------------------------- */
    --f-display: 'Playfair Display', 'Lora', Georgia, serif;
    --f-body: 'Lora', Georgia, serif;
    --f-ui: 'Cormorant Garamond', 'Lora', Georgia, serif;

    /* Scroll-driven custom properties ------------------------ */
    --scroll-offset: 0;
    --scroll-folio-3: 0;
    --scroll-folio-5: 0;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--c-bg-deep);
}

body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(ellipse 120% 70% at 50% 0%, #102B1C 0%, var(--c-bg-deep) 60%),
        var(--c-bg-deep);
    color: var(--c-text-vellum);
    font-family: var(--f-body);
    font-weight: 400;
    line-height: 1.75;
    overflow-x: hidden;
    min-height: 100vh;
}

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

/* =========================================================
   Paper grain overlay (full viewport, fixed)
   ========================================================= */
.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    background-image:
        radial-gradient(circle at 13% 17%, rgba(212,201,181,0.05) 0 0.5px, transparent 1px),
        radial-gradient(circle at 41% 63%, rgba(212,201,181,0.04) 0 0.5px, transparent 1px),
        radial-gradient(circle at 78% 29%, rgba(212,201,181,0.05) 0 0.5px, transparent 1px),
        radial-gradient(circle at 22% 81%, rgba(212,201,181,0.04) 0 0.5px, transparent 1px),
        radial-gradient(circle at 67% 89%, rgba(212,201,181,0.04) 0 0.5px, transparent 1px),
        radial-gradient(circle at 91% 51%, rgba(212,201,181,0.04) 0 0.5px, transparent 1px);
    background-size: 7px 7px, 11px 11px, 13px 13px, 9px 9px, 17px 17px, 19px 19px;
    mix-blend-mode: overlay;
    opacity: 0.65;
}

.paper-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(6,26,14,0.45) 100%);
    pointer-events: none;
}

/* =========================================================
   Codex spine: persistent vertical rule (the book spine)
   ========================================================= */
.codex {
    position: relative;
    z-index: 1;
}

.codex::before {
    content: '';
    position: fixed;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(45,95,58,0.32) 8%,
        rgba(45,95,58,0.30) 92%,
        transparent 100%
    );
    transform: translateX(-0.5px);
    z-index: 2;
    pointer-events: none;
}

/* =========================================================
   Spine progress nav (right edge)
   ========================================================= */
.codex-spine {
    position: fixed;
    right: clamp(18px, 3vw, 42px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 150;
}

.spine-progress {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
    position: relative;
}

.spine-progress::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(143,169,139,0.25) 0%,
        rgba(143,169,139,0.5) 50%,
        rgba(143,169,139,0.25) 100%);
}

.spine-dot {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spine-dot .dot-circle {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--c-accent-sage);
    background: transparent;
    transition: background 0.7s ease, box-shadow 0.7s ease, border-color 0.7s ease;
    flex: 0 0 auto;
}

.spine-dot .folio-label {
    font-family: var(--f-ui);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: rgba(143,169,139,0.6);
    transform: translateX(6px);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease;
}

.spine-dot:hover .folio-label,
.spine-dot.active .folio-label {
    opacity: 1;
    transform: translateX(0);
    color: var(--c-accent-gold);
}

.spine-dot.active .dot-circle {
    background: var(--c-accent-gold);
    border-color: var(--c-accent-gold);
    box-shadow:
        0 0 0 3px rgba(201,169,110,0.18),
        0 0 14px rgba(201,169,110,0.55);
}

.spine-dot.passed .dot-circle {
    background: rgba(201,169,110,0.55);
    border-color: rgba(201,169,110,0.75);
}

/* =========================================================
   Left margin marginalia (accumulating icons)
   ========================================================= */
.margin-accumulator {
    position: fixed;
    left: clamp(14px, 2.6vw, 36px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 140;
    pointer-events: none;
}

.margin-icon {
    width: 28px;
    height: 28px;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.margin-icon.revealed {
    opacity: 0.55;
    transform: translateY(0);
}

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

/* =========================================================
   Folio shell (each is 100vh)
   ========================================================= */
.folio {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(48px, 7vh, 90px) clamp(60px, 10vw, 140px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.folio-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/* Watercolor wash backgrounds ------------------------------ */
.wash-bg {
    position: absolute;
    inset: -4%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.wash-bg::before,
.wash-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Folio I wash: deep forest, top-left to bottom-right */
.wash-i {
    background:
        radial-gradient(ellipse 80% 60% at 18% 22%, rgba(45,106,79,0.55) 0%, transparent 60%),
        radial-gradient(ellipse 70% 55% at 82% 78%, rgba(27,67,50,0.7) 0%, transparent 65%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(45,106,79,0.18) 0%, rgba(10,31,20,0.95) 80%),
        var(--c-bg-deep);
}
.wash-i::before {
    background:
        radial-gradient(ellipse 50% 40% at 35% 50%, rgba(143,169,139,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 70% 35%, rgba(94,140,106,0.22) 0%, transparent 70%);
    mix-blend-mode: soft-light;
    filter: contrast(1.05) brightness(0.95);
}
.wash-i::after {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(232,220,200,0.06) 0%, transparent 70%);
    mix-blend-mode: overlay;
}

/* Folio II wash: study-page, slightly lighter, vellum-ish center */
.wash-ii {
    background:
        radial-gradient(ellipse 70% 55% at 28% 38%, rgba(27,67,50,0.7) 0%, transparent 65%),
        radial-gradient(ellipse 60% 60% at 78% 64%, rgba(45,106,79,0.5) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(27,67,50,0.3) 0%, rgba(10,31,20,0.95) 85%),
        #0E2418;
}
.wash-ii::before {
    background:
        radial-gradient(ellipse 35% 30% at 25% 50%, rgba(212,201,181,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 30% 25% at 75% 50%, rgba(94,140,106,0.18) 0%, transparent 70%);
    mix-blend-mode: soft-light;
}
.wash-ii::after {
    background: radial-gradient(ellipse 50% 40% at 50% 60%, rgba(94,140,106,0.12) 0%, transparent 75%);
    mix-blend-mode: multiply;
}

/* Folio III wash: dark with three candle-glow centers */
.wash-iii {
    background:
        radial-gradient(circle 38% at 18% 64%, rgba(212,148,74,0.30) 0%, transparent 50%),
        radial-gradient(circle 32% at 50% 56%, rgba(212,148,74,0.32) 0%, transparent 50%),
        radial-gradient(circle 36% at 82% 64%, rgba(212,148,74,0.28) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10,31,20,0.6) 0%, var(--c-bg-deep) 85%),
        var(--c-bg-deep);
}
.wash-iii::before {
    background:
        radial-gradient(circle 22% at 18% 64%, rgba(255,251,230,0.10) 0%, transparent 60%),
        radial-gradient(circle 22% at 50% 56%, rgba(255,251,230,0.12) 0%, transparent 60%),
        radial-gradient(circle 22% at 82% 64%, rgba(255,251,230,0.10) 0%, transparent 60%);
    mix-blend-mode: overlay;
    opacity: calc(0.4 + var(--scroll-folio-3, 0) * 0.6);
    transition: opacity 0.6s ease;
}
.wash-iii::after {
    background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(6,26,14,0.7) 0%, transparent 65%);
    mix-blend-mode: multiply;
}

/* Folio IV wash: forest-left meets amber-right, mixing in center */
.wash-iv {
    background:
        radial-gradient(ellipse 60% 80% at 0% 50%, rgba(45,106,79,0.5) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 100% 50%, rgba(212,148,74,0.30) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 50% 50%, rgba(143,169,139,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10,31,20,0.6) 0%, var(--c-bg-deep) 90%),
        var(--c-bg-deep);
}
.wash-iv::before {
    background:
        radial-gradient(ellipse 30% 40% at 50% 50%, rgba(201,169,110,0.18) 0%, transparent 70%);
    mix-blend-mode: soft-light;
}
.wash-iv::after {
    background:
        radial-gradient(ellipse 100% 50% at 50% 0%, rgba(6,26,14,0.6) 0%, transparent 60%),
        radial-gradient(ellipse 100% 50% at 50% 100%, rgba(6,26,14,0.6) 0%, transparent 60%);
    mix-blend-mode: multiply;
}

/* Folio V wash: closes to near-black at edges */
.wash-v {
    background:
        radial-gradient(circle 30% at 50% 56%, rgba(212,148,74,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 50% 56%, rgba(27,67,50,0.4) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(10,31,20,0.85) 30%, #050F0A 100%);
}
.wash-v::before {
    background: radial-gradient(circle 16% at 50% 56%, rgba(255,251,230,0.06) 0%, transparent 60%);
    mix-blend-mode: overlay;
}
.wash-v::after {
    background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0,0,0,0.65) 100%);
    mix-blend-mode: multiply;
}

/* Parallax midground layer ---------------------------------- */
.parallax-mid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

/* =========================================================
   Typography: hero / inflated 3D
   ========================================================= */
.folio-eyebrow {
    display: block;
    font-family: var(--f-ui);
    font-weight: 300;
    font-size: clamp(0.72rem, 0.95vw, 0.88rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--c-accent-sage);
    margin-bottom: clamp(28px, 4vh, 56px);
}

.hero-word {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: 0.95;
    letter-spacing: 0.005em;
    color: var(--c-text-parchment);
    text-align: center;
    margin: 0 0 clamp(36px, 5vh, 60px);
    width: 100%;
    user-select: none;
}

.hero-word .letter {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translateY(40px) scale(0.85);
    transition:
        opacity 1s ease,
        transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
}

.hero-word .letter:nth-child(1) { --i: 1; }
.hero-word .letter:nth-child(2) { --i: 2; }
.hero-word .letter:nth-child(3) { --i: 3; }
.hero-word .letter:nth-child(4) { --i: 4; }
.hero-word .letter:nth-child(5) { --i: 5; }
.hero-word .letter:nth-child(6) { --i: 6; }
.hero-word .letter:nth-child(7) { --i: 7; }
.hero-word .letter:nth-child(8) { --i: 8; }

.hero-word.inflated .letter {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.inflated-3d {
    text-shadow:
        0 1px 0 #2D5F3A,
        0 2px 0 #275539,
        0 4px 0 #214B38,
        0 8px 0 #1B4132,
        0 12px 24px rgba(10,31,20,0.35),
        0 16px 40px rgba(10,31,20,0.20);
    background:
        linear-gradient(135deg, rgba(255,251,230,0.12) 0%, rgba(255,251,230,0) 50%),
        linear-gradient(180deg, #F2E5CF 0%, #E8DCC8 60%, #D4C9B5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Note: when text-fill-color is transparent, text-shadow still renders. */
}

/* Soft inflated for headings smaller than hero */
.inflated-3d-soft {
    color: var(--c-text-parchment);
    text-shadow:
        0 1px 0 #2D5F3A,
        0 2px 0 #275539,
        0 3px 0 #214B38,
        0 5px 0 #1B4132,
        0 8px 16px rgba(10,31,20,0.32),
        0 10px 26px rgba(10,31,20,0.18);
}

.hero-subtitle {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.6vw, 1.45rem);
    text-align: center;
    color: var(--c-text-vellum);
    line-height: 1.6;
    max-width: 38ch;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1.2s ease 1.8s, transform 1.2s ease 1.8s;
}

.folio.inflated .hero-subtitle {
    opacity: 0.92;
    transform: translateY(0);
}

.folio-i-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-folio-number {
    position: absolute;
    bottom: clamp(20px, 4vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-ui);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.24em;
    color: var(--c-accent-sage);
    opacity: 0.7;
}

/* =========================================================
   Folio II: left page text + right page diagram
   ========================================================= */
.folio-ii-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 100px);
    align-items: center;
    width: 100%;
    max-width: 1200px;
}

.folio-ii-content .folio-eyebrow {
    grid-column: 1;
}

.page-left {
    grid-column: 1;
    max-width: 38ch;
    padding-right: clamp(20px, 3vw, 50px);
}

.page-right {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: clamp(20px, 3vw, 50px);
}

.folio-heading {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    line-height: 1.05;
    margin: 0 0 clamp(20px, 3vh, 32px);
    letter-spacing: 0.005em;
}

.body-text {
    font-family: var(--f-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.05vw, 1.12rem);
    line-height: 1.78;
    color: var(--c-text-vellum);
    margin: 0 0 clamp(16px, 2.4vh, 24px);
    max-width: 38ch;
}

.body-text strong {
    font-weight: 600;
    color: var(--c-accent-gold);
    font-style: normal;
}

.annotation {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    line-height: 1.6;
    color: var(--c-accent-sage);
    border-left: 1px solid rgba(143,169,139,0.4);
    padding-left: 18px;
    margin: clamp(24px, 3vh, 36px) 0 0;
    max-width: 36ch;
    opacity: 0.95;
}

.annotation em {
    font-style: normal;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--c-accent-gold);
    text-transform: lowercase;
    display: block;
    margin-bottom: 6px;
    opacity: 0.75;
}

/* Flow diagram (Folio II) */
.flow-diagram {
    width: 100%;
    max-width: 360px;
    height: auto;
    overflow: visible;
}

.flow-node {
    opacity: 0;
    transform-origin: center;
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.folio-ii.in-view .flow-node.node-1 { opacity: 1; transition-delay: 0.1s; }
.folio-ii.in-view .flow-node.node-2 { opacity: 1; transition-delay: 0.5s; }
.folio-ii.in-view .flow-node.node-3 { opacity: 1; transition-delay: 0.9s; }
.folio-ii.in-view .flow-node.node-4 { opacity: 1; transition-delay: 1.3s; }

.flow-connector {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.2s ease;
}

.folio-ii.in-view .flow-connector { stroke-dashoffset: 0; }
.folio-ii.in-view .flow-connector:nth-of-type(2) { transition-delay: 0.3s; }
.folio-ii.in-view .flow-connector:nth-of-type(3) { transition-delay: 0.7s; }
.folio-ii.in-view .flow-connector:nth-of-type(4) { transition-delay: 1.1s; }

/* Botanical marginalia ------------------------------------- */
.botanical {
    position: absolute;
    pointer-events: none;
    opacity: 0.32;
}

.botanical-fern-tl {
    top: 4%;
    left: 4%;
    width: clamp(140px, 18vw, 240px);
    height: auto;
}

.botanical-ivy-br {
    bottom: 4%;
    right: 4%;
    width: clamp(140px, 18vw, 240px);
    height: auto;
}

.botanical-seedpod {
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    width: clamp(80px, 10vw, 130px);
    height: auto;
    opacity: 0.22;
}

.botanical-tendril {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(60px, 6vw, 90px);
    height: clamp(360px, 60vh, 540px);
    opacity: 0.5;
}

.draw-path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 1.6s ease-in-out;
}

.folio.in-view .draw-path {
    stroke-dashoffset: 0;
}

.folio.in-view .botanical-ivy-br .draw-path { transition-delay: 0.2s; }
.folio.in-view .botanical-seedpod .draw-path { transition-delay: 0.1s; }

/* =========================================================
   Folio III: Candles, hidden marginalia
   ========================================================= */
.folio-iii-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 1200px;
    padding-top: 4vh;
}

.folio-iii-content .page-right {
    grid-column: unset;
    flex: 0 0 auto;
    max-width: 44ch;
    padding-left: 0;
    padding-right: clamp(20px, 4vw, 60px);
    display: block;
    margin-left: auto;
    margin-right: clamp(20px, 6vw, 100px);
}

.folio-iii-content .folio-eyebrow {
    color: var(--c-accent-gold);
}

.folio-iii .folio-heading {
    color: var(--c-text-parchment);
}

.marginalia-text {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(1.0rem, 1.15vw, 1.18rem);
    line-height: 1.65;
    color: var(--c-text-vellum);
    margin: 0 0 clamp(16px, 2.2vh, 22px);
    max-width: 38ch;
    transition: opacity 1.2s ease, color 1.2s ease, text-shadow 1.2s ease;
}

.hidden-by-shadow {
    opacity: 0.06;
    color: var(--c-accent-sage);
}

/* Scroll-driven progressive reveal of hidden lines.
   --scroll-folio-3 ranges 0..1 across the folio. */
.folio-iii .hidden-by-shadow.shadow-tier-1 {
    opacity: calc(0.06 + max(0, (var(--scroll-folio-3, 0) - 0.20)) * 3);
}
.folio-iii .hidden-by-shadow.shadow-tier-2 {
    opacity: calc(0.06 + max(0, (var(--scroll-folio-3, 0) - 0.45)) * 3);
}
.folio-iii .hidden-by-shadow.shadow-tier-3 {
    opacity: calc(0.06 + max(0, (var(--scroll-folio-3, 0) - 0.70)) * 3);
}

/* Candles ---------------------------------------------------- */
.candle {
    position: absolute;
    bottom: 18%;
    width: 38px;
    pointer-events: none;
    z-index: 3;
}

.candle-1 { left: 14%; }
.candle-2 { left: 50%; transform: translateX(-50%); bottom: 22%; }
.candle-3 { right: 14%; }

.candle-body {
    width: 18px;
    height: 110px;
    margin: 0 auto;
    background:
        linear-gradient(180deg, #E8DCC8 0%, #D4C9B5 30%, #B8A98D 100%);
    border-radius: 3px 3px 4px 4px;
    box-shadow:
        inset -3px 0 6px rgba(6,26,14,0.4),
        inset 3px 0 4px rgba(255,251,230,0.2),
        0 6px 12px rgba(6,26,14,0.5);
    position: relative;
}

.candle-body::after {
    /* dripping wax */
    content: '';
    position: absolute;
    top: 8px;
    left: -2px;
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, #E8DCC8 0%, #B8A98D 100%);
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    opacity: 0.85;
}

.flame {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 36px;
    transform-origin: bottom center;
    animation: flame-flicker-1 2.7s infinite;
}

.candle-2 .flame { animation-name: flame-flicker-2; animation-duration: 3.1s; }
.candle-3 .flame { animation-name: flame-flicker-3; animation-duration: 2.4s; }

.flame-outer,
.flame-inner,
.flame-core {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.flame-outer {
    width: 22px;
    height: 36px;
    background: radial-gradient(ellipse at 50% 70%,
        rgba(212,148,74,0.7) 0%,
        rgba(201,169,110,0.5) 35%,
        rgba(212,148,74,0.2) 70%,
        transparent 100%);
    filter: blur(1.5px);
}

.flame-inner {
    width: 14px;
    height: 26px;
    background: radial-gradient(ellipse at 50% 70%,
        rgba(255,251,230,0.95) 0%,
        rgba(212,148,74,0.85) 50%,
        rgba(201,169,110,0.4) 100%);
    filter: blur(0.4px);
}

.flame-core {
    width: 6px;
    height: 14px;
    bottom: 2px;
    background: radial-gradient(ellipse at 50% 60%,
        #FFFBE6 0%,
        rgba(255,251,230,0.85) 60%,
        rgba(212,148,74,0.4) 100%);
}

.candle-glow {
    position: absolute;
    bottom: 110px;
    left: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255,251,230,0.18) 0%,
        rgba(212,148,74,0.14) 25%,
        rgba(201,169,110,0.08) 50%,
        transparent 75%);
    filter: blur(20px);
    /* opacity & scale tied to scroll position in folio III */
    opacity: calc(0.35 + var(--scroll-folio-3, 0) * 0.65);
    transform: translate(-50%, 50%) scale(calc(0.7 + var(--scroll-folio-3, 0) * 0.6));
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: glow-pulse 4s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { filter: blur(20px) brightness(1); }
    50% { filter: blur(22px) brightness(1.1); }
}

@keyframes flame-flicker-1 {
    0%   { transform: translateX(-50%) scaleY(1) scaleX(1) translateX(0); }
    8%   { transform: translateX(-50%) scaleY(1.06) scaleX(0.97) translate(-0.5px, -1px); }
    19%  { transform: translateX(-50%) scaleY(0.95) scaleX(1.03) translate(0.7px, 0); }
    34%  { transform: translateX(-50%) scaleY(1.03) scaleX(0.99) translate(-0.3px, -0.5px); }
    47%  { transform: translateX(-50%) scaleY(1.08) scaleX(0.94) translate(0.6px, -1.2px); }
    63%  { transform: translateX(-50%) scaleY(0.97) scaleX(1.04) translate(0.2px, 0); }
    79%  { transform: translateX(-50%) scaleY(1.02) scaleX(0.98) translate(-0.7px, -0.4px); }
    91%  { transform: translateX(-50%) scaleY(1.05) scaleX(0.96) translate(0.4px, -0.8px); }
    100% { transform: translateX(-50%) scaleY(1) scaleX(1) translateX(0); }
}

@keyframes flame-flicker-2 {
    0%   { transform: translateX(-50%) scaleY(1) scaleX(1) translateX(0); }
    11%  { transform: translateX(-50%) scaleY(1.04) scaleX(0.98) translate(0.4px, -0.6px); }
    23%  { transform: translateX(-50%) scaleY(0.94) scaleX(1.05) translate(-0.6px, 0); }
    37%  { transform: translateX(-50%) scaleY(1.07) scaleX(0.95) translate(0.5px, -1.1px); }
    52%  { transform: translateX(-50%) scaleY(1.01) scaleX(1) translate(-0.2px, -0.3px); }
    68%  { transform: translateX(-50%) scaleY(1.09) scaleX(0.93) translate(0.7px, -1.3px); }
    81%  { transform: translateX(-50%) scaleY(0.96) scaleX(1.04) translate(-0.5px, 0); }
    93%  { transform: translateX(-50%) scaleY(1.03) scaleX(0.98) translate(0.3px, -0.6px); }
    100% { transform: translateX(-50%) scaleY(1) scaleX(1) translateX(0); }
}

@keyframes flame-flicker-3 {
    0%   { transform: translateX(-50%) scaleY(1) scaleX(1) translateX(0); }
    9%   { transform: translateX(-50%) scaleY(1.05) scaleX(0.97) translate(-0.6px, -0.7px); }
    21%  { transform: translateX(-50%) scaleY(0.93) scaleX(1.06) translate(0.5px, 0); }
    35%  { transform: translateX(-50%) scaleY(1.06) scaleX(0.95) translate(-0.4px, -1px); }
    49%  { transform: translateX(-50%) scaleY(1.02) scaleX(0.99) translate(0.6px, -0.4px); }
    62%  { transform: translateX(-50%) scaleY(0.96) scaleX(1.03) translate(-0.7px, 0); }
    77%  { transform: translateX(-50%) scaleY(1.08) scaleX(0.94) translate(0.4px, -1.2px); }
    89%  { transform: translateX(-50%) scaleY(1.01) scaleX(0.99) translate(-0.3px, -0.5px); }
    100% { transform: translateX(-50%) scaleY(1) scaleX(1) translateX(0); }
}

/* =========================================================
   Folio IV: Convergence — golden frame
   ========================================================= */
.folio-iv-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.folio-iv-content .folio-eyebrow {
    color: var(--c-accent-gold);
    text-align: center;
}

.golden-frame {
    position: relative;
    width: min(640px, 80vw);
    /* Golden ratio: ~1 : 1.618 */
    aspect-ratio: 1.618 / 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px) scale(0.96);
    transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.folio-iv.in-view .golden-frame {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.golden-frame-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--c-accent-gold);
    padding: clamp(28px, 5%, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        inset 0 0 80px rgba(201,169,110,0.08),
        0 0 60px rgba(201,169,110,0.12),
        0 0 120px rgba(212,148,74,0.06);
    background:
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(45,106,79,0.12) 0%, transparent 70%),
        rgba(10,31,20,0.45);
}

.frame-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid var(--c-accent-gold);
}

.frame-corner-tl { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.frame-corner-tr { top: -8px; right: -8px; border-left: none; border-bottom: none; }
.frame-corner-bl { bottom: -8px; left: -8px; border-right: none; border-top: none; }
.frame-corner-br { bottom: -8px; right: -8px; border-left: none; border-top: none; }

.convergence-passage {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.45vw, 1.4rem);
    line-height: 1.62;
    color: var(--c-text-parchment);
    margin: 0 0 1.2em;
    text-align: center;
}

.convergence-passage em {
    color: var(--c-accent-gold);
    font-style: italic;
}

.convergence-secondary {
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
    color: var(--c-text-vellum);
    line-height: 1.7;
    opacity: 0.88;
    margin: 0;
}

/* Floating binary numerals (margins of folio IV) */
.binary-numeral {
    position: absolute;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    color: var(--c-accent-gold);
    text-shadow:
        0 1px 0 #B6976A,
        0 2px 0 #A6885F,
        0 3px 0 #8C7250,
        0 5px 0 #715D40,
        0 8px 16px rgba(10,31,20,0.45),
        0 10px 26px rgba(10,31,20,0.25);
    letter-spacing: 0.04em;
    opacity: 0.9;
    user-select: none;
}

.binary-01 {
    top: 14%;
    left: 6%;
    transform: rotate(-6deg);
}

.binary-10 {
    bottom: 18%;
    right: 8%;
    transform: rotate(4deg);
}

.binary-11 {
    top: 22%;
    right: 10%;
    transform: rotate(-3deg);
    color: var(--c-accent-amber);
}

/* =========================================================
   Folio V: Continuation — final candle + closing line
   ========================================================= */
.folio-v-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.folio-v-content .folio-eyebrow {
    color: var(--c-accent-sage);
    opacity: 0.75;
}

.candle-final {
    position: absolute;
    left: 50%;
    bottom: 38%;
    transform: translateX(-50%);
    width: 38px;
}

.candle-glow-final {
    width: 380px;
    height: 380px;
    opacity: calc(0.4 + var(--scroll-folio-5, 0) * 0.4);
    background: radial-gradient(circle at center,
        rgba(255,251,230,0.20) 0%,
        rgba(212,148,74,0.18) 25%,
        rgba(201,169,110,0.10) 50%,
        transparent 75%);
}

.closing-line {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    line-height: 1.4;
    color: var(--c-text-parchment);
    margin: 30vh 0 1.2em;
    max-width: 30ch;
    letter-spacing: 0.01em;
    min-height: 1.4em;
}

.closing-line .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: pre;
}

.closing-line .ch.show {
    opacity: 1;
    transform: translateY(0);
}

.closing-colophon {
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    color: var(--c-accent-sage);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1s ease, transform 1s ease;
    margin: 0 0 14vh;
    max-width: 32ch;
}

.folio-v.closing-revealed .closing-colophon {
    opacity: 0.85;
    transform: translateY(0);
}

.colophon-mark {
    position: absolute;
    bottom: 6vh;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-ui);
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.32em;
    text-transform: lowercase;
    color: var(--c-accent-gold);
    opacity: 0.6;
}

/* =========================================================
   In-view fade-in for body text
   ========================================================= */
.body-text,
.annotation,
.folio-heading,
.convergence-passage,
.marginalia-text,
.folio-eyebrow {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.folio.in-view .body-text,
.folio.in-view .annotation,
.folio.in-view .folio-heading,
.folio.in-view .convergence-passage,
.folio.in-view .marginalia-text,
.folio.in-view .folio-eyebrow {
    opacity: 1;
    transform: translateY(0);
}

/* Folio I content: hero word & subtitle keep their own choreography */
.folio-i .folio-eyebrow,
.folio-i .hero-word,
.folio-i .hero-subtitle {
    /* override the default in-view fade pattern for folio I */
}

.folio-i.in-view .folio-eyebrow {
    transition-delay: 0.2s;
}

/* Stagger body text inside Folio II */
.folio-ii.in-view .body-text:nth-of-type(1) { transition-delay: 0.20s; }
.folio-ii.in-view .body-text:nth-of-type(2) { transition-delay: 0.40s; }
.folio-ii.in-view .annotation { transition-delay: 0.65s; }

/* Folio III stagger */
.folio-iii.in-view .marginalia-text:nth-of-type(1) { transition-delay: 0.20s; }
.folio-iii.in-view .marginalia-text.hidden-by-shadow { transition-delay: 0.30s; }

/* Folio IV stagger */
.folio-iv.in-view .convergence-passage:nth-of-type(1) { transition-delay: 0.30s; }
.folio-iv.in-view .convergence-passage:nth-of-type(2) { transition-delay: 0.55s; }

/* Folio V */
.folio-v.in-view .folio-eyebrow { transition-delay: 0.10s; }

/* =========================================================
   Responsive: collapse to single column, simplify
   ========================================================= */
@media (max-width: 768px) {
    .folio {
        padding: clamp(48px, 7vh, 80px) clamp(24px, 6vw, 40px);
    }

    .codex::before {
        opacity: 0.5;
    }

    .codex-spine {
        right: 14px;
        gap: 22px;
    }

    .spine-progress {
        gap: 22px;
    }

    .spine-dot .folio-label {
        display: none;
    }

    .margin-accumulator {
        left: 10px;
        gap: 18px;
    }

    .margin-icon {
        width: 22px;
        height: 22px;
    }

    .hero-word {
        font-size: clamp(3rem, 18vw, 5rem);
    }

    .folio-ii-content {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .page-left,
    .page-right,
    .folio-iii-content .page-right {
        grid-column: 1;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        text-align: left;
    }

    .folio-iii-content {
        justify-content: center;
    }

    .folio-iii-content .page-right {
        margin: 0 auto;
    }

    /* Reduce candle count on mobile to one (center) */
    .candle-1,
    .candle-3 {
        display: none;
    }

    .candle-2 {
        bottom: 14%;
    }

    .botanical-fern-tl,
    .botanical-ivy-br,
    .botanical-tendril,
    .botanical-seedpod {
        opacity: 0.18;
    }

    .binary-01,
    .binary-10,
    .binary-11 {
        font-size: clamp(1.4rem, 6vw, 2rem);
        opacity: 0.7;
    }

    .golden-frame {
        width: 90vw;
        aspect-ratio: 1 / 1.1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flame,
    .candle-glow {
        animation: none;
    }
    .draw-path {
        stroke-dashoffset: 0;
        transition: none;
    }
}