/* ==========================================================================
   logic.quest — translucent-frost palette
   ========================================================================== */

:root {
    --vellum-frost: #F4F8FA;
    --obsidian-vellum: #0E1A22;
    --tin-glass: #3D4F5A;
    --frost-pulse: #9DB6C9;
    --hoarfrost: #C9DCE5;
    --breath: #E8F0F4;
    --pure-white: #FFFFFF;
    --glaze: rgba(255, 255, 255, 0.42);
}

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    background: var(--vellum-frost);
    overflow-x: hidden;
}

body {
    font-family: 'Newsreader', serif;
    background: var(--vellum-frost);
    color: var(--obsidian-vellum);
    overflow-x: hidden;
    min-height: 100vh;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern', 'liga', 'calt', 'ss01';
    text-wrap: pretty;
}

/* ==========================================================================
   Static SVG noise grain — atmospheric layer
   ========================================================================== */

.noise-layer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: multiply;
}

/* ==========================================================================
   Particle canvas — substrate of thought
   ========================================================================== */

.particle-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 2400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.particle-canvas.is-ready {
    opacity: 1;
}

/* ==========================================================================
   Bokeh discs — one per stanza
   ========================================================================== */

.bokeh-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.bokeh {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(201, 220, 229, 0.22) 0%,
        rgba(201, 220, 229, 0.08) 50%,
        transparent 78%);
    filter: blur(48px);
    will-change: transform, opacity;
    opacity: 0;
    transition: opacity 1800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.bokeh.is-active {
    opacity: 1;
}

.bokeh-i {
    width: 720px;
    height: 720px;
    top: -180px;
    left: 8vw;
}

.bokeh-ii {
    width: 820px;
    height: 820px;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
}

.bokeh-iii {
    width: 620px;
    height: 620px;
    top: 28vh;
    right: 6vw;
}

.bokeh-iv {
    width: 480px;
    height: 480px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(201, 220, 229, 0.14) 0%,
        rgba(201, 220, 229, 0.05) 50%,
        transparent 78%);
}

/* ==========================================================================
   Glaze overlay — moving translucent frost
   ========================================================================== */

.glaze {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: var(--glaze);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    opacity: 0;
    transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Footer line + timestamp — Space Mono indices
   ========================================================================== */

.footer-line {
    position: fixed;
    bottom: 18px;
    left: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--frost-pulse);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-line.is-visible {
    opacity: 1;
}

.timestamp {
    position: fixed;
    bottom: 18px;
    right: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--frost-pulse);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timestamp.is-visible {
    opacity: 1;
}

/* ==========================================================================
   Hairline navigation — the only persistent affordance
   ========================================================================== */

.hairline-nav {
    position: fixed;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.hairline-rule {
    width: 88px;
    height: 1px;
    background: var(--frost-pulse);
    transition: width 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                background 1200ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hairline-nav.is-extended .hairline-rule {
    width: 240px;
}

.hairline-nav.is-qed .hairline-rule {
    background: var(--pure-white);
    opacity: 0.6;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.hairline-waypoints {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--frost-pulse);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.hairline-nav:hover .hairline-waypoints,
.hairline-nav.is-active .hairline-waypoints {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.waypoint {
    cursor: pointer;
    color: var(--frost-pulse);
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.waypoint:hover,
.waypoint.is-current {
    color: var(--obsidian-vellum);
}

.waypoint-dot {
    color: var(--frost-pulse);
    opacity: 0.5;
    user-select: none;
}

.hairline-index {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--frost-pulse);
    opacity: 0.7;
}

/* ==========================================================================
   Chambers — four full-viewport stanzas
   ========================================================================== */

.chambers {
    position: relative;
    z-index: 5;
    width: 100vw;
}

.stanza {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    overflow: hidden;
    padding: 0;
}

.stanza-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 6vw;
}

/* Alignment per design spec — each stanza different */
.align-left {
    align-items: flex-start;
    text-align: left;
    padding-left: 8vw;
    padding-top: 38vh;
}

.align-left .proposition {
    width: 38vw;
    min-width: 320px;
}

.align-center {
    align-items: center;
    text-align: center;
    padding-top: 50vh;
    transform: translate(1.6%, -50%);
    margin-top: 0;
}

.align-center .proposition {
    width: min(56vw, 880px);
}

.align-right {
    align-items: flex-end;
    text-align: right;
    padding-right: 8vw;
    padding-top: 62vh;
    transform: translateY(-50%);
}

.align-right .proposition {
    width: 42vw;
    min-width: 340px;
}

.align-dead-center {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0;
    height: 100%;
}

/* ==========================================================================
   Stanza label — small uppercase tag
   ========================================================================== */

.stanza-label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--frost-pulse);
    margin-bottom: 24px;
    opacity: 0;
    animation: stanza-label-in 2400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}

@keyframes stanza-label-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Proposition — Fraunces, the voice of authority
   ========================================================================== */

.proposition {
    font-family: 'Fraunces', serif;
    font-weight: 200;
    font-size: clamp(2.6rem, 5.4vw, 5.6rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--obsidian-vellum);
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
    text-wrap: balance;
    margin-bottom: 36px;
    will-change: transform;
    transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    clip-path: inset(0 100% 0 0);
    animation: proposition-reveal 2400ms cubic-bezier(0.16, 1, 0.3, 1) 400ms forwards;
}

@keyframes proposition-reveal {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; }
}

.prop-prefix {
    display: block;
    color: var(--obsidian-vellum);
    opacity: 0.64;
    font-style: italic;
    font-size: 0.68em;
    letter-spacing: -0.02em;
    margin-bottom: 0.16em;
    font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 0;
}

.prop-body {
    display: block;
    color: var(--obsidian-vellum);
}

/* ==========================================================================
   Marginalia — Cormorant Infant whisper voice
   ========================================================================== */

.marginalia {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
    margin-bottom: 32px;
    opacity: 0.14;
    transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.marginalia:hover {
    opacity: 0.64;
}

.formal {
    font-family: 'STIX Two Math', serif;
    font-size: 0.92em;
    color: var(--tin-glass);
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.margin-note {
    font-family: 'Cormorant Infant', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 0.84rem;
    color: var(--tin-glass);
    line-height: 1.5;
    max-width: 220px;
}

.align-right .marginalia {
    align-items: flex-end;
}

.align-center .marginalia {
    align-items: center;
}

/* ==========================================================================
   Stanza prose — Newsreader, the argument body
   ========================================================================== */

.stanza-prose p {
    font-family: 'Newsreader', serif;
    font-weight: 300;
    font-size: 1.18rem;
    line-height: 1.62;
    letter-spacing: 0.012em;
    color: var(--tin-glass);
    max-width: 38ch;
    text-wrap: pretty;
    opacity: 0;
    animation: prose-fade 2400ms cubic-bezier(0.16, 1, 0.3, 1) 1200ms forwards;
}

.stanza-prose em {
    font-style: italic;
}

@keyframes prose-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.align-right .stanza-prose p {
    margin-left: auto;
    text-align: right;
}

.align-center .stanza-prose p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ==========================================================================
   Q.E.D. — final stanza
   ========================================================================== */

.qed-proposition {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 48px;
    width: auto;
    text-align: center;
}

.qed-mark {
    font-family: 'Fraunces', serif;
    font-weight: 200;
    font-size: clamp(4rem, 9vw, 9rem);
    letter-spacing: 0.02em;
    color: var(--obsidian-vellum);
    font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 1;
    line-height: 1;
}

.qed-square {
    font-family: 'STIX Two Math', serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    color: var(--obsidian-vellum);
    line-height: 1;
}

.qed-conclusion {
    font-family: 'Newsreader', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.32rem;
    color: var(--tin-glass);
    letter-spacing: 0.012em;
    line-height: 1.5;
    margin-bottom: 56px;
    max-width: 38ch;
    text-align: center;
}

.reread-link {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--frost-pulse);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-block;
}

.reread-link:hover {
    color: var(--obsidian-vellum);
    border-bottom-color: var(--obsidian-vellum);
}

/* ==========================================================================
   Initial state of stanzas other than first
   ========================================================================== */

.stanza:not(.is-active) .stanza-label,
.stanza:not(.is-active) .proposition,
.stanza:not(.is-active) .stanza-prose p,
.stanza:not(.is-active) .qed-conclusion,
.stanza:not(.is-active) .reread-link {
    animation-play-state: paused;
}

.stanza.is-active .stanza-label,
.stanza.is-active .proposition,
.stanza.is-active .stanza-prose p {
    animation-play-state: running;
}

/* Cross-fade transition for chamber content */
.stanza-content {
    opacity: 1;
    transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 880px) {
    .align-left .proposition,
    .align-right .proposition,
    .align-center .proposition {
        width: 84vw;
        min-width: 0;
    }

    .align-left {
        padding-left: 6vw;
        padding-top: 32vh;
    }

    .align-right {
        padding-right: 6vw;
        padding-top: 58vh;
    }

    .stanza-prose p {
        max-width: 28ch;
    }

    .marginalia {
        max-width: 70vw;
    }

    .footer-line {
        font-size: 9px;
        letter-spacing: 0.14em;
        bottom: 14px;
        left: 16px;
    }

    .timestamp {
        font-size: 9px;
        letter-spacing: 0.14em;
        bottom: 14px;
        right: 16px;
    }
}

/* ==========================================================================
   Reduced motion preferences
   ========================================================================== */

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

    .proposition {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    .stanza-label,
    .stanza-prose p {
        opacity: 1;
        transform: none;
    }

    .particle-canvas {
        opacity: 0.5;
    }
}