/* ==========================================================================
   paraligm.com -- shifted-perception architectural drafting
   Palette: graphite + warm ivory, single violet fissure accent.
   ========================================================================== */

:root {
    --bg-primary: #F4F1EC;
    --bg-secondary: #E8E3DA;
    --bg-pure-white: #FFFFFF;
    --text-primary: #1C1C1E;
    --text-secondary: #5A5A5F;
    --text-tertiary: #7A7A7A;
    --line-arch: #2C2C2C;
    --accent-fissure: #4A0E78;
    --accent-glow: #7B3FA0;
    --shadow-tone: #C8C3B8;

    --diag-angle: 8deg;
    --diag-tan: 0.1405;     /* tan(8deg) approx */
    --diag-tan-9: 0.1584;   /* tan(9deg) */
    --diag-tan-10: 0.1763;  /* tan(10deg) */
    --diag-tan-7: 0.1228;   /* tan(7deg) */
    --diag-tan-2: 0.0349;   /* tan(2deg) */

    --gutter: 24px;
    --col-count: 6;

    --ease-mech: cubic-bezier(0.25, 0.1, 0.25, 1.0);

    --font-display: 'Josefin Sans', 'Inter', sans-serif;
    --font-body: 'Libre Baskerville', Georgia, serif;
    --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
}

/* ---------- reset / base -------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

html,
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul,
ol {
    list-style: none;
}

em {
    font-style: italic;
    color: var(--text-primary);
}

/* ---------- noise overlay ------------------------------------------------- */
.noise-defs {
    width: 0;
    height: 0;
    overflow: hidden;
}

.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.05;
    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.65' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0 0.1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}

/* ---------- top mark ------------------------------------------------------ */
.site-mark {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 36px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    pointer-events: none;
    mix-blend-mode: multiply;
}

.mark-left,
.mark-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mark-glyph {
    color: var(--accent-fissure);
    font-weight: 400;
}

.mark-name {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.18em;
    font-size: 14px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.mark-meta {
    display: inline-block;
}

/* ---------- impossible window -------------------------------------------- */
.impossible-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62vw;
    height: 38vh;
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    transition: opacity 800ms var(--ease-mech);
}

.impossible-window.is-visible {
    opacity: 1;
}

.iw-frame {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line-arch);
}

.iw-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line-arch);
    background: var(--bg-primary);
}

.iw-tl { top: -9px; left: -9px; }
.iw-tr { top: -9px; right: -9px; }
.iw-bl { bottom: -9px; left: -9px; }
.iw-br { bottom: -9px; right: -9px; }

.iw-label {
    position: absolute;
    top: -22px;
    left: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.iw-dim {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.iw-dim-w {
    bottom: -22px;
    left: 0;
}

.iw-dim-h {
    top: 50%;
    right: -8px;
    transform: translate(100%, -50%) rotate(-90deg);
    transform-origin: left center;
}

.iw-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(74, 14, 120, 0.04);
    mix-blend-mode: multiply;
    transition: background 600ms var(--ease-mech);
}

.impossible-window.is-active .iw-overlay {
    background: rgba(74, 14, 120, 0.10);
}

/* ---------- violet thread (vertical SVG) --------------------------------- */
.violet-thread {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(72vw, 1100px);
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.85;
}

.violet-thread #violetPath {
    stroke: var(--accent-fissure);
    stroke-width: 1.5;
    fill: none;
    /* dasharray / offset are set by JS via pathLength */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    pathLength: 1;
}

/* ---------- page stack --------------------------------------------------- */
.page-stack {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* ---------- diagonal sections -------------------------------------------- */
.diag-section {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.diag-section .sec-bg {
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    z-index: 0;
}

.diag-section.alt-bg .sec-bg {
    background: var(--bg-secondary);
}

/* Section heights */
.sec-1 { min-height: 100vh; }
.sec-2 { min-height: 120vh; }
.sec-3 { min-height: 100vh; }
.sec-4 { min-height: 130vh; }
.sec-5 { min-height: 100vh; }

/* Diagonal clip-path: tilted top + bottom edges. */
/* tilt-left  : top edge slopes upward to the right, bottom edge mirrors. */
/* tilt-right : top edge slopes upward to the left.                        */
.tilt-left .sec-bg {
    clip-path: polygon(0% 8%, 100% 0%, 100% 92%, 0% 100%);
}

.tilt-right .sec-bg {
    clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 92%);
}

.tilt-flatten .sec-bg {
    clip-path: polygon(0% 2%, 100% 0%, 100% 100%, 0% 100%);
}

.sec-1 .sec-bg {
    clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 0% 100%);
}

/* Cast-shadow seam between sections (diagonal hairline) */
.diag-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12vh;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(200, 195, 184, 0.18) 100%);
    pointer-events: none;
    z-index: 1;
    clip-path: polygon(0% 100%, 100% 88%, 100% 100%, 0% 100%);
}

.tilt-right::after {
    clip-path: polygon(0% 88%, 100% 100%, 100% 100%, 0% 100%);
}

.tilt-flatten::after {
    clip-path: polygon(0% 96%, 100% 100%, 100% 100%, 0% 100%);
}

/* Section content */
.sec-content {
    position: relative;
    z-index: 2;
    width: min(1280px, 92vw);
    margin: 0 auto;
    padding: 18vh 0 18vh;
    transform-origin: center center;
}

/* Tilt content to follow section diagonal */
.tilt-content-left {
    transform: rotate(-1.6deg);
}

.tilt-content-right {
    transform: rotate(1.6deg);
}

.tilt-content-flatten {
    transform: rotate(-0.4deg);
}

/* ---------- section edge labels ------------------------------------------ */
.sec-edge {
    position: absolute;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    pointer-events: none;
}

.sec-edge.edge-top {
    top: 9vh;
    left: 4vw;
}

.sec-edge.edge-bottom {
    bottom: 9vh;
    right: 4vw;
}

.sec-edge span::before {
    content: "// ";
    color: var(--text-secondary);
}

/* ---------- typography --------------------------------------------------- */
.text-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 28px;
}

.eyebrow-right {
    align-self: flex-end;
}

.sec-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 36px;
    max-width: 18ch;
}

.sec-title-right {
    text-align: right;
    align-self: flex-end;
    max-width: 22ch;
}

.sec-title-small {
    font-size: clamp(36px, 4.6vw, 56px);
    letter-spacing: 0.08em;
    max-width: 26ch;
}

.sec-title-light {
    font-weight: 300;
    font-size: clamp(36px, 4.4vw, 56px);
    letter-spacing: 0.12em;
    max-width: 28ch;
}

.body-text {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    max-width: 56ch;
    margin-bottom: 22px;
}

.body-text:last-child {
    margin-bottom: 0;
}

.body-narrow {
    max-width: 48ch;
    margin: 24px auto 24px;
}

/* ---------- section 1 -- hero -------------------------------------------- */
.sec-1 .sec-content {
    padding-top: 16vh;
    padding-bottom: 12vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.hero-illu {
    width: min(960px, 86vw);
    margin-bottom: 18px;
    transform: rotate(-2deg);
}

.illu-corridor {
    width: 100%;
    height: auto;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(64px, 11vw, 132px);
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-primary);
    transform: rotate(-1deg);
    position: relative;
}

.hero-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--accent-fissure);
    opacity: 0;
    transform: translate(2px, -1px);
    transition: opacity 600ms var(--ease-mech);
    pointer-events: none;
}

.hero-title.is-fissure::after {
    opacity: 0.18;
}

.hero-sub {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 19px;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 44ch;
}

.hero-annotation {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.anno-line {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: var(--line-arch);
}

.scroll-cue {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.scroll-tick {
    width: 1px;
    height: 36px;
    background: var(--line-arch);
    animation: scrollTick 2200ms var(--ease-mech) infinite;
    transform-origin: top center;
}

@keyframes scrollTick {
    0%   { transform: scaleY(0); }
    50%  { transform: scaleY(1); }
    100% { transform: scaleY(0); transform-origin: bottom center; }
}

/* ---------- section 2 grid (2col) ---------------------------------------- */
.grid-2col {
    display: grid;
    grid-template-columns: 4fr 2fr;
    gap: calc(var(--gutter) * 2);
    align-items: start;
}

.col-illu {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.col-illu .illu-stairs {
    width: 100%;
    height: auto;
    max-width: 720px;
}

.col-text {
    display: flex;
    flex-direction: column;
}

.illu-caption {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* ---------- annotation list ---------------------------------------------- */
.annotation-list {
    margin-top: 28px;
    border-top: 1px solid var(--line-arch);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.anno-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(44, 44, 44, 0.25);
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 500ms var(--ease-mech), transform 500ms var(--ease-mech);
}

.anno-item.is-revealed {
    opacity: 1;
    transform: translateX(0);
}

.anno-key {
    color: var(--text-tertiary);
}

.anno-val {
    color: var(--text-primary);
}

.anno-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    border-top: 1px solid var(--line-arch);
    border-bottom: 1px solid var(--line-arch);
    padding: 14px 0;
    justify-content: space-between;
    margin-top: 36px;
}

.anno-row .anno-item {
    flex: 1 1 200px;
    border-bottom: none;
    padding-bottom: 0;
    justify-content: flex-start;
    gap: 14px;
}

/* ---------- section 3 ---------------------------------------------------- */
.sec-3 .sec-content {
    display: flex;
    flex-direction: column;
}

.dual-illu {
    margin: 24px auto;
    width: min(1000px, 88%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.illu-room {
    width: 100%;
    height: auto;
}

/* ---------- section 4 grid (3col) ---------------------------------------- */
.grid-3col {
    display: grid;
    grid-template-columns: 1.05fr 1.05fr 1.4fr;
    gap: calc(var(--gutter) * 1.5);
    align-items: start;
    margin-top: 28px;
}

.col-prose {
    display: flex;
    flex-direction: column;
}

.col-illu-small {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.illu-section {
    width: 100%;
    height: auto;
}

.proof-rail {
    margin-top: 60px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.rail-tick {
    flex: 1;
    height: 1px;
    background: var(--line-arch);
}

.rail-text {
    white-space: nowrap;
}

/* ---------- section 5 ---------------------------------------------------- */
.sec-5 {
    background: var(--bg-primary);
    transition: background 1000ms var(--ease-mech);
}

.sec-5.is-near-end {
    background: var(--bg-pure-white);
}

.sec-5 .sec-bg {
    background: inherit;
    transition: background 1000ms var(--ease-mech);
}

.sec-5.is-near-end .sec-bg {
    background: var(--bg-pure-white);
}

.sec-5 .sec-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.thread-converge {
    margin-top: 36px;
    width: 1px;
    height: 80px;
    background: linear-gradient(180deg, rgba(74, 14, 120, 0) 0%, var(--accent-fissure) 100%);
    position: relative;
}

.thread-dot {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--accent-fissure);
    box-shadow: 0 0 18px var(--accent-glow);
}

.site-foot {
    margin-top: 80px;
    width: 100%;
    border-top: 1px solid var(--line-arch);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.foot-row {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    text-align: left;
}

.foot-meta {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* ---------- progress rail ------------------------------------------------ */
.progress-rail {
    position: fixed;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    z-index: 40;
    pointer-events: none;
}

.rail-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    transition: color 400ms var(--ease-mech);
}

.rail-bar {
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--text-tertiary);
    transition: width 500ms var(--ease-mech), background 400ms var(--ease-mech);
}

.rail-item.is-active {
    color: var(--text-primary);
}

.rail-item.is-active .rail-bar {
    width: 56px;
    background: var(--accent-fissure);
}

/* ---------- SVG path-draw animation -------------------------------------- */
.illu-paths .p-draw {
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    transition: stroke-dashoffset 1800ms var(--ease-mech);
}

.illu.is-drawn .illu-paths .p-draw {
    stroke-dashoffset: 0;
}

/* Stagger draw order: structural -> walls -> details -> hatching */
.illu.is-drawn .illu-paths .p-draw:nth-child(1)  { transition-delay: 0ms;    }
.illu.is-drawn .illu-paths .p-draw:nth-child(2)  { transition-delay: 60ms;   }
.illu.is-drawn .illu-paths .p-draw:nth-child(3)  { transition-delay: 120ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(4)  { transition-delay: 180ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(5)  { transition-delay: 240ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(6)  { transition-delay: 300ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(7)  { transition-delay: 360ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(8)  { transition-delay: 420ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(9)  { transition-delay: 480ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(10) { transition-delay: 540ms;  }
.illu.is-drawn .illu-paths .p-draw:nth-child(n+11) { transition-delay: 640ms; }
.illu.is-drawn .illu-paths .p-draw:nth-child(n+18) { transition-delay: 760ms; }
.illu.is-drawn .illu-paths .p-draw:nth-child(n+26) { transition-delay: 900ms; }

/* Vanishing point dots stay solid (filled circles) */
.illu-paths circle.vanish,
.illu-paths circle[fill="#4A0E78"] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: opacity 800ms var(--ease-mech);
    opacity: 0;
}

.illu.is-drawn .illu-paths circle.vanish,
.illu.is-drawn .illu-paths circle[fill="#4A0E78"] {
    opacity: 1;
    transition-delay: 1200ms;
}

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 880px) {
    .grid-2col,
    .grid-3col {
        grid-template-columns: 1fr;
        gap: calc(var(--gutter) * 1.5);
    }

    .sec-title-right {
        text-align: left;
        align-self: flex-start;
    }

    .impossible-window {
        width: 84vw;
        height: 30vh;
    }

    .progress-rail {
        right: 12px;
    }

    .rail-item .rail-bar { width: 14px; }
    .rail-item.is-active .rail-bar { width: 28px; }

    .hero-title {
        font-size: clamp(54px, 18vw, 96px);
    }

    .sec-content {
        padding: 14vh 0;
    }

    .proof-rail {
        flex-wrap: wrap;
    }

    .rail-text {
        white-space: normal;
    }
}

@media (max-width: 540px) {
    body { font-size: 16px; }

    .site-mark {
        padding: 14px 18px;
        font-size: 10px;
    }

    .mark-name { font-size: 12px; }

    .anno-row {
        flex-direction: column;
    }

    .foot-meta {
        flex-direction: column;
        gap: 6px;
    }
}