/* monopole.systems — one pole, many lines, no opposite
   Palette: drafting paper #e7e0cf · paper shadow #cfc6ad · faded ink #2c2a24
            pencil grey #7a7363 · lamp amber #b8742f · oxidized teal #3f5a52 */

:root {
    --paper:        #e7e0cf;
    --paper-shadow: #cfc6ad;
    --ink:          #2c2a24;
    --pencil:       #7a7363;
    --amber:        #b8742f;
    --teal:         #3f5a52;

    /* The pole — recomputed in JS per viewport; defaults here. */
    --node-x: 42vw;
    --node-y: 44vh;

    --font-display: 'Rye', 'Bricolage Grotesque', serif;
    --font-title:   'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
    --font-body:    'Newsreader', 'Iowan Old Style', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    overflow-x: hidden;
    position: relative;
}

/* faint horizontal banding where states meet — fold creases */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(100vh - 1px),
        rgba(124, 115, 99, 0.10) calc(100vh - 1px),
        rgba(124, 115, 99, 0.10) 100vh
    );
}

/* ---- the live generative field ---- */
#field-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
}

/* ---- paper grain ---- */
.grain {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: multiply;
}

/* ---- the node: the single fixed pole ---- */
#node {
    position: fixed;
    left: var(--node-x);
    top: var(--node-y);
    width: 0; height: 0;
    z-index: 3;
    pointer-events: none;
}
.node-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px 2px rgba(184, 116, 47, 0.55),
                0 0 26px 6px rgba(184, 116, 47, 0.28);
    animation: node-breathe 7s ease-in-out infinite;
}
.node-bloom {
    position: absolute;
    left: 50%; top: 50%;
    width: 130px; height: 130px;
    margin: -65px 0 0 -65px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(184, 116, 47, 0.30) 0%,
        rgba(184, 116, 47, 0.12) 32%,
        rgba(184, 116, 47, 0) 70%);
    animation: bloom-breathe 7s ease-in-out infinite;
}
body.warm-node .node-core {
    box-shadow: 0 0 14px 3px rgba(184, 116, 47, 0.7),
                0 0 36px 9px rgba(184, 116, 47, 0.38);
}
body.warm-node .node-bloom { transform: scale(1.18); }
.node-bloom { transition: transform 1.4s ease; }

@keyframes node-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@keyframes bloom-breathe {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

/* invisible perturbation surface — catches mouse moves */
#perturb-surface {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none; /* canvas listens on window; this is just a marker */
}

/* ---- progress arc: a single open streamline, never closing ---- */
#progress-arc {
    position: fixed;
    top: 26px; left: 26px;
    width: 56px; height: 56px;
    z-index: 4;
}
#progress-arc svg { width: 100%; height: 100%; overflow: visible; }
#arc-track {
    stroke: var(--paper-shadow);
    stroke-width: 2;
    stroke-linecap: round;
}
#arc-fill {
    stroke: var(--teal);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 1 1;       /* set in JS to path length */
    stroke-dashoffset: 1;        /* set in JS */
    transition: stroke-dashoffset 0.18s linear;
}
#arc-numeral {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: var(--pencil);
}

/* ---- scroll root & states ---- */
#scroll-root {
    position: relative;
    z-index: 1;
}
.state {
    position: relative;
    min-height: 145vh;
    padding: 12vh 0;
}
#state-1 { min-height: 130vh; }
#state-2 { min-height: 175vh; }
#state-3 { min-height: 200vh; }
#state-4 { min-height: 210vh; }
#state-5 { min-height: 175vh; }
#state-6 { min-height: 135vh; }

/* polar-positioned items: JS writes --tx / --ty (px offsets from node) */
.polar {
    position: fixed;
    left: var(--node-x);
    top: var(--node-y);
    transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.9s ease;
    will-change: transform, opacity;
    max-width: 30ch;
}
.polar.in-view { opacity: 1; }
.polar.dimmed  { opacity: 0.22; transition: opacity 0.8s ease; }

/* connectors: thin curved SVG strokes drawn between node and the item above */
.connector {
    position: fixed;
    left: 0; top: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}
.connector path {
    stroke: var(--pencil);
    stroke-width: 1.1;
    fill: none;
    opacity: 0;
    stroke-dasharray: 1 1;       /* set per-path in JS */
    stroke-dashoffset: 1;        /* animates to 0 when active */
    transition: stroke-dashoffset 1.1s ease, opacity 0.6s ease;
}
.connector.active path { opacity: 0.5; stroke-dashoffset: 0; }

/* ---- typography of the states ---- */
.claim-line, .closing-line {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: var(--ink);
    max-width: 16ch;
}
.kicker, .intro-line, .signoff {
    color: var(--pencil);
    max-width: 34ch;
}
.kicker { font-size: 1rem; line-height: 1.6; }
.intro-line {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.05rem;
}
.signoff { line-height: 1.6; }

.state-title {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.01em;
    max-width: 14ch;
}

.prose p,
.log-entry p {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ink);
}
.prose, .log-entry { max-width: 33ch; }

.log-entry .date,
.signoff,
.mono {
    font-family: var(--font-mono);
}
.mono { font-size: 0.78rem; letter-spacing: 0.06em; }
.log-entry .date {
    display: block;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--amber);
    text-transform: lowercase;
    margin-bottom: 0.5em;
}

/* instruments — glyph + caption */
.instrument {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55em;
    max-width: 26ch;
}
.instrument .glyph svg,
.glyph svg {
    width: 44px; height: 44px;
}
.glyph svg path, .glyph svg circle, .glyph svg rect,
.glyph svg line, .glyph svg ellipse {
    stroke: var(--pencil);
    stroke-width: 1.25;
}
.instrument .caption,
.glyph-inline .caption {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    color: var(--pencil);
    line-height: 1.55;
}
.instrument.dimmed .caption { color: var(--paper-shadow); }

/* inline glyphs inside prose / log */
.glyph-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 0.9em;
}
.glyph-inline svg {
    width: 40px; height: 40px;
    flex-shrink: 0;
}
.glyph-inline.small svg { width: 32px; height: 32px; }
.glyph-inline svg path, .glyph-inline svg circle,
.glyph-inline svg rect, .glyph-inline svg line, .glyph-inline svg ellipse {
    stroke: var(--pencil);
    stroke-width: 1.25;
}
.glyph-inline.small svg path, .glyph-inline.small svg circle,
.glyph-inline.small svg rect, .glyph-inline.small svg line {
    stroke: var(--pencil);
    stroke-width: 1.4;
}

/* links — oxidized teal, underline on hover */
a {
    color: var(--teal);
    text-decoration: none;
    background-image: linear-gradient(var(--teal), var(--teal));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.4s ease;
}
a:hover { background-size: 100% 1px; }

/* ---- narrow screens: polar collapses to an offset single column ---- */
@media (max-width: 760px) {
    :root {
        --node-x: 50vw;
        --node-y: 30vh;
    }
    .polar { max-width: 78vw; }
    .claim-line, .closing-line { font-size: clamp(1.5rem, 7vw, 2.2rem); max-width: 14ch; }
    .state-title { font-size: clamp(1.3rem, 6vw, 1.8rem); }
    .prose p, .log-entry p, .prose, .log-entry { max-width: 78vw; }
    .instrument { max-width: 78vw; }
    #progress-arc { top: 16px; left: 16px; width: 44px; height: 44px; }
    .state { min-height: 160vh; }
}

/* ---- reduced motion: still the field, just settled ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .node-core, .node-bloom { animation: none; }
    .polar { transition: opacity 0.4s linear; }
    .connector path { transition: opacity 0.4s linear; }
}