:root {
    /* Design vocabulary: Interaction:** Interaction* Interaction:::: IntersectionObserver` `threshold: 0.15` (Google */
    --paper: #F5F0E8;
    --paper-bright: #FAFAF5;
    --ink: #1B3A4B;
    --soft-ink: #2C3E50;
    --deep-water: #0F2027;
    --sage: #6B8F71;
    --sand: #C4A97D;
    --blue: #7BA7BC;
    --blue-deep: #4A7C8F;
    --display: "Cormorant Garamond", serif;
    --body: "Source Serif 4", serif;
    --ui: "Inter", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 82% 8%, rgba(123, 167, 188, 0.20), transparent 34rem),
        radial-gradient(circle at 8% 42%, rgba(196, 169, 125, 0.13), transparent 30rem),
        linear-gradient(180deg, #FAFAF5 0%, #F5F0E8 42%, #FAFAF5 100%);
    color: var(--soft-ink);
    font-family: var(--body);
    line-height: 1.72;
    letter-spacing: 0.005em;
}

.paper-grain {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0.38;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

.svg-defs { position: absolute; }
.design-token { display: none; }
.quest-page { position: relative; isolation: isolate; }

.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 7rem);
}

.threshold {
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.32fr);
    background: linear-gradient(180deg, rgba(250, 250, 245, 0.96), rgba(245, 240, 232, 0.9));
}

.horizon-thread {
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(123, 167, 188, 0.52), rgba(196, 169, 125, 0.30), transparent);
    transform-origin: left;
    animation: horizonArrive 1.8s ease both .25s;
}

.threshold-copy {
    position: relative;
    z-index: 2;
    width: min(62vw, 58rem);
    margin-left: 7vw;
}

.eyebrow, .section-kicker {
    font-family: var(--ui);
    color: var(--blue-deep);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin-bottom: 1.35rem;
}

h1, h2 {
    font-family: var(--display);
    color: var(--ink);
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

h1 { font-style: italic; max-width: 13ch; }
h2 { max-width: 12.8ch; margin-bottom: 1.55rem; }

.opening-note {
    max-width: 43ch;
    margin-top: 2rem;
    color: rgba(44, 62, 80, 0.76);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}

.threshold-mark {
    position: relative;
    z-index: 2;
    width: min(18vw, 13rem);
    justify-self: center;
    opacity: 0.7;
}

.line-wave, .current-line path {
    fill: none;
    stroke: var(--blue-deep);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.45;
}

.thin-orbit, .logic-diamond {
    fill: none;
    stroke: var(--sand);
    stroke-width: 1.4;
    opacity: 0.52;
}

.loader-tide {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: min(28rem, 72vw);
    transform: translate(-50%, -50%);
    transition: opacity .7s ease, filter .7s ease;
}

.loader-tide span {
    display: block;
    height: 1.1rem;
    margin: 1.05rem auto;
    border-radius: 99rem;
    background: linear-gradient(90deg, transparent, rgba(123, 167, 188, .22), rgba(196, 169, 125, .16), transparent);
    background-size: 220% 100%;
    animation: shimmer 1.35s linear infinite;
}
.loader-tide span:nth-child(1) { width: 54%; }
.loader-tide span:nth-child(2) { width: 78%; animation-delay: .12s; }
.loader-tide span:nth-child(3) { width: 100%; animation-delay: .24s; }
.loader-tide.is-gone { opacity: 0; filter: blur(8px); pointer-events: none; }

.wash {
    position: absolute;
    z-index: -1;
    filter: url(#watercolorEdge);
    border-radius: 50%;
    opacity: .9;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.wash::before, .wash::after {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: inherit;
    filter: blur(22px);
}

.wash-a { width: 54rem; height: 38rem; right: -15rem; top: 5vh; background: radial-gradient(circle at 42% 48%, rgba(123, 167, 188, .28), transparent 64%); }
.wash-a::before { background: radial-gradient(circle, rgba(196, 169, 125, .15), transparent 68%); }
.wash-b { width: 34rem; height: 28rem; left: -13rem; bottom: 4vh; background: radial-gradient(circle, rgba(107, 143, 113, .14), transparent 68%); }
.wash-c { width: 42rem; height: 32rem; right: -8rem; top: 14%; background: radial-gradient(circle, rgba(123, 167, 188, .20), transparent 67%); }
.wash-d { width: 39rem; height: 34rem; left: -13rem; top: 18%; background: radial-gradient(circle, rgba(196, 169, 125, .18), transparent 66%); }
.wash-e { width: 48rem; height: 28rem; right: -16rem; bottom: 6%; background: radial-gradient(circle, rgba(74, 124, 143, .14), transparent 67%); }
.wash-f { width: 38rem; height: 38rem; left: 2rem; bottom: -8rem; background: radial-gradient(circle, rgba(107, 143, 113, .16), transparent 70%); }
.wash-g { width: 45rem; height: 31rem; right: 6rem; top: 18%; background: radial-gradient(circle, rgba(123, 167, 188, .18), transparent 68%); }
.wash-h { width: 42rem; height: 35rem; left: -10rem; top: 9%; background: radial-gradient(circle, rgba(196, 169, 125, .17), transparent 70%); }
.wash-i { width: 56rem; height: 40rem; left: 50%; top: 50%; background: radial-gradient(circle, rgba(123, 167, 188, .18), rgba(107, 143, 113, .08), transparent 70%); transform: translate(-50%, -50%); }

.logic-section, .syllogism-section {
    grid-template-columns: minmax(12rem, 0.24fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 7vw, 8rem);
}

.left-bank .content-panel { grid-column: 1 / span 2; width: min(62%, 58rem); justify-self: start; margin-left: 8vw; }
.left-bank .breathing-space { grid-column: 2; justify-self: end; }
.right-bank .breathing-space { grid-column: 1; justify-self: center; }
.right-bank .content-panel { grid-column: 2; width: min(70%, 58rem); justify-self: end; margin-right: 4vw; }

.content-panel {
    position: relative;
    z-index: 2;
    padding: clamp(1rem, 2.5vw, 2rem) 0;
}

.content-panel p:not(.section-kicker), blockquote {
    max-width: 58ch;
    margin-bottom: 1.25rem;
    font-size: clamp(1.05rem, 1.55vw, 1.24rem);
    color: rgba(44, 62, 80, .86);
}

blockquote {
    position: relative;
    margin: 2rem 0;
    padding: 1.3rem 1.6rem 1.4rem 2rem;
    border-left: 1px solid rgba(123, 167, 188, .55);
    background: linear-gradient(90deg, rgba(250, 250, 245, .58), transparent);
    color: var(--ink);
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    line-height: 1.35;
}

.breathing-space {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18vw;
    display: grid;
    place-items: center;
    opacity: .72;
}
.left-bank .breathing-space { right: 1vw; }
.right-bank .breathing-space { left: 1vw; }

.pebbles { width: 7rem; fill: var(--blue); filter: url(#inkFeather); }
.pebbles ellipse:nth-child(2) { fill: var(--sage); }
.pebbles ellipse:nth-child(3) { fill: var(--sand); }
.pebbles ellipse:nth-child(4) { fill: var(--blue-deep); }
.ink-pool { width: 8rem; fill: var(--sage); filter: url(#inkFeather); opacity: .58; }
.ink-pool circle:nth-child(2) { fill: var(--blue); }
.ink-pool circle:nth-child(3) { fill: var(--sand); }
.current-line { width: 10rem; }
.current-line path:nth-child(2) { stroke: var(--sand); opacity: .35; }
.stacked-premises { display: grid; gap: 1.15rem; width: 10rem; }
.stacked-premises span { height: 1px; background: linear-gradient(90deg, transparent, var(--blue-deep), var(--sand), transparent); opacity: .55; }
.stacked-premises span:nth-child(2) { width: 72%; justify-self: center; }
.stacked-premises span:nth-child(3) { width: 45%; justify-self: center; }
.truth-table { width: min(19rem, 24vw); overflow: visible; }
.truth-table path { fill: none; stroke: var(--blue-deep); stroke-width: 1.2; opacity: .36; }
.truth-table text { font-family: var(--ui); font-size: 17px; fill: var(--soft-ink); opacity: .68; }
.paradox-loop { width: 9rem; }
.paradox-loop path { fill: none; stroke: var(--blue-deep); stroke-width: 1.5; opacity: .42; filter: url(#inkFeather); }

.closing {
    place-items: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(245, 240, 232, .95), rgba(250, 250, 245, .98));
}

.closing-funnel {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: clamp(2rem, 5vh, 4rem);
    width: min(82rem, 88vw);
}

.closing-funnel p {
    font-family: var(--display);
    color: var(--ink);
    font-size: clamp(2rem, 5vw, 4.4rem);
    line-height: 1.1;
}
.closing-funnel p:nth-child(2) { width: 72%; font-size: clamp(1.65rem, 4vw, 3.3rem); color: rgba(27, 58, 75, .82); }
.closing-funnel .therefore { width: 40%; color: var(--sand); font-size: clamp(3rem, 8vw, 7rem); }

.reveal-on-load, .reveal-block {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
}
.reveal-on-load.is-visible, .reveal-block.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition: opacity 1s ease, transform 1s ease, filter 1s ease;
}

.water-bloom {
    position: fixed;
    width: 1rem;
    height: 1rem;
    z-index: 20;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 124, 143, .18), rgba(123, 167, 188, .10) 38%, transparent 72%);
    filter: blur(3px);
    animation: bloom .75s ease-out forwards;
}

@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes horizonArrive { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes bloom { to { width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; opacity: 0; } }

@media (max-width: 860px) {
    .scene { min-height: auto; padding: 6rem 1.35rem; }
    .threshold { min-height: 100vh; grid-template-columns: 1fr; }
    .threshold-copy, .left-bank .content-panel, .right-bank .content-panel { width: 100%; margin: 0; grid-column: 1; }
    .threshold-mark { width: 9rem; margin-top: 3rem; justify-self: start; }
    .logic-section, .syllogism-section { display: block; }
    .breathing-space { position: relative; width: 100%; min-height: 8rem; inset: auto; margin-top: 2.5rem; }
    h1, h2 { max-width: 100%; }
    .truth-table { width: min(19rem, 82vw); }
    .closing-funnel p:nth-child(2), .closing-funnel .therefore { width: 100%; }
}