/* ================================================================
   archetype.works — Surrealist formalism, navy-metallic palette
   Font sources use (Google Fonts; section animations use IntersectionObserver for triggering reveals.
   ================================================================ */

:root {
    /* Palette */
    --abyss: #0b1628;
    --bedrock: #162034;
    --bedrock-deep: #1a2845;
    --steel-deep: #2a3f5f;
    --steel: #8a9bb0;
    --titanium: #b8c6d4;
    --platinum: #dce4ec;
    --patina: #4a7c6b;
    --ember: #8b4a3a;

    /* Spacing — Fibonacci scale */
    --space-unit: clamp(0.5rem, 1vw, 1rem);
    --sp-1: calc(var(--space-unit) * 1);
    --sp-2: calc(var(--space-unit) * 2);
    --sp-3: calc(var(--space-unit) * 3);
    --sp-5: calc(var(--space-unit) * 5);
    --sp-8: calc(var(--space-unit) * 8);
    --sp-13: calc(var(--space-unit) * 13);

    /* Motion */
    --ease-tectonic: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-slow: 1200ms;
    --dur-mid: 800ms;
    --dur-quick: 400ms;

    /* Fonts */
    --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
    --font-label: "Space Grotesk", "Inter", sans-serif;
    --font-body: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

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

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--steel);
    background: linear-gradient(170deg, #0b1628 0%, #162034 40%, #1a2845 100%);
    background-attachment: fixed;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* ================================================================
   Fixed overlays — scan lines + noise grain
   ================================================================ */

.scan-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 7px,
        rgba(220, 228, 236, 0.03) 7px,
        rgba(220, 228, 236, 0.03) 8px
    );
    mix-blend-mode: screen;
}

.noise-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 201;
    opacity: 0.02;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
}

/* ================================================================
   Pip navigator
   ================================================================ */

.pip-nav {
    position: fixed;
    top: 50%;
    right: clamp(1rem, 2.5vw, 2.5rem);
    transform: translateY(-50%);
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
}

.pip {
    appearance: none;
    border: none;
    cursor: pointer;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--steel);
    opacity: 0.35;
    padding: 0;
    position: relative;
    transition:
        width var(--dur-mid) var(--ease-tectonic),
        height var(--dur-mid) var(--ease-tectonic),
        border-radius var(--dur-mid) var(--ease-tectonic),
        opacity var(--dur-quick) var(--ease-tectonic),
        background var(--dur-quick) var(--ease-tectonic);
}

.pip:hover {
    opacity: 0.75;
}

.pip.active {
    width: 8px;
    height: 24px;
    border-radius: 4px;
    opacity: 1;
    background: linear-gradient(180deg, var(--platinum) 0%, var(--steel) 100%);
}

.pip::after {
    content: attr(data-label);
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    font-family: var(--font-label);
    font-weight: 500;
    font-variant: all-small-caps;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.25em;
    color: var(--steel);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-quick) var(--ease-tectonic), transform var(--dur-quick) var(--ease-tectonic);
}

.pip:hover::after,
.pip.active::after {
    opacity: 0.85;
    transform: translateY(-50%) translateX(0);
}

/* ================================================================
   Scroll container + strata sections
   ================================================================ */

.scroll-container {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    perspective: 1px;
    perspective-origin: 50% 50%;
}

.scroll-container::-webkit-scrollbar {
    width: 0;
    display: none;
}

.strata {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-5) clamp(1.5rem, 5vw, 6rem);
}

/* Parallax planes */

.bg-plane {
    position: absolute;
    inset: -10% -10%;
    z-index: 1;
    will-change: transform;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.wireframe {
    width: 120%;
    height: 120%;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-tectonic);
}

.strata.in-view .wireframe {
    opacity: 0.16;
}

.content-plane {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    will-change: transform;
}

.fg-plane {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    will-change: transform;
}

/* ================================================================
   Floating foreground primitives
   ================================================================ */

.floating-primitive {
    position: absolute;
    left: var(--fx);
    top: var(--fy);
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
    transition:
        opacity 1500ms var(--ease-tectonic),
        transform 1500ms var(--ease-tectonic);
}

.strata.in-view .floating-primitive {
    opacity: 0.35;
    transform: translate3d(0, 0, 0);
}

.fp-circle {
    width: 14px;
    height: 14px;
    border: 1px solid var(--titanium);
    border-radius: 50%;
}

.fp-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid transparent;
    position: relative;
}

.fp-triangle::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid var(--titanium);
    opacity: 0;
}

.fp-triangle {
    width: 22px;
    height: 22px;
    border: none;
    background:
        linear-gradient(45deg, transparent 49%, var(--titanium) 49%, var(--titanium) 51%, transparent 51%);
    background-size: 100% 100%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: transparent;
    border-left: 1px solid var(--titanium);
    border-bottom: 1px solid var(--titanium);
    transform-origin: 0 100%;
    transform: rotate(-45deg);
}

.fp-line {
    width: 60px;
    height: 1px;
    background: var(--titanium);
}

.fp-ring {
    width: 28px;
    height: 28px;
    border: 1px solid var(--patina);
    border-radius: 50%;
    background: transparent;
}

.fp-square {
    width: 18px;
    height: 18px;
    border: 1px solid var(--steel);
    transform: rotate(45deg);
}

/* ================================================================
   Section head — sigil + label
   ================================================================ */

.section-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}

.sigil {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
}

.sigil g {
    transition: stroke 600ms var(--ease-tectonic);
}

.sigil path, .sigil circle, .sigil rect, .sigil polygon, .sigil line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset var(--dur-mid) var(--ease-tectonic);
}

.strata.in-view .sigil path,
.strata.in-view .sigil circle,
.strata.in-view .sigil rect,
.strata.in-view .sigil polygon,
.strata.in-view .sigil line {
    stroke-dashoffset: 0;
    transition-delay: 200ms;
}

.sigil:hover g {
    stroke: var(--patina);
}

.sigil:hover path,
.sigil:hover circle,
.sigil:hover rect,
.sigil:hover polygon,
.sigil:hover line {
    stroke-dashoffset: 300;
    animation: redraw 900ms var(--ease-tectonic) forwards;
}

@keyframes redraw {
    from { stroke-dashoffset: 300; }
    to { stroke-dashoffset: 0; }
}

.section-label {
    font-family: var(--font-label);
    font-weight: 500;
    font-variant: all-small-caps;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    letter-spacing: 0.25em;
    color: var(--steel);
}

/* ================================================================
   SECTION 1 — The Threshold
   ================================================================ */

#section-threshold .content-plane {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#section-threshold .section-head {
    margin-bottom: var(--sp-8);
}

.monument-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3.5rem, 9vw, 11rem);
    letter-spacing: 0.08em;
    line-height: 0.92;
    color: var(--platinum);
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 600ms var(--ease-tectonic) 400ms,
        transform 600ms var(--ease-tectonic) 400ms;
}

.strata.in-view .monument-title {
    opacity: 1;
    transform: scale(1);
}

#section-threshold .monument-title {
    font-size: clamp(4rem, 10vw, 12rem);
    max-width: 90%;
}

.horizontal-rule {
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--steel), transparent);
    margin: var(--sp-5) auto;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition:
        opacity 800ms var(--ease-tectonic) 800ms,
        transform 1200ms var(--ease-tectonic) 800ms;
}

.strata.in-view .horizontal-rule {
    opacity: 1;
    transform: scaleX(1);
}

.threshold-subtitle {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    font-style: italic;
    color: var(--titanium);
    max-width: 44ch;
    margin: 0 auto var(--sp-5);
    opacity: 0;
    transition: opacity 500ms var(--ease-tectonic) 900ms;
}

.strata.in-view .threshold-subtitle {
    opacity: 0.9;
}

.coordinates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    color: var(--steel);
    opacity: 0;
    transition: opacity 500ms var(--ease-tectonic) 1100ms;
}

.strata.in-view .coordinates {
    opacity: 0.75;
}

.coordinates span {
    position: relative;
    padding: 0 var(--sp-1);
}

.coordinates span:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--sp-1));
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--steel);
    opacity: 0.4;
}

/* ================================================================
   Archive Mode — two-column asymmetric
   ================================================================ */

.archive-mode {
    display: grid;
    grid-template-columns: 35fr 10fr 55fr;
    gap: 0;
    align-items: start;
}

.archive-left {
    padding-top: 20vh;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.archive-left .section-head {
    margin-bottom: var(--sp-3);
}

.vertical-rule {
    width: 1px;
    height: var(--sp-13);
    background: linear-gradient(180deg, var(--steel), transparent);
    margin: var(--sp-2) 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition:
        opacity 800ms var(--ease-tectonic) 400ms,
        transform 1200ms var(--ease-tectonic) 400ms;
}

.strata.in-view .vertical-rule {
    opacity: 1;
    transform: scaleY(1);
}

.archive-meta {
    font-family: var(--font-label);
    font-weight: 500;
    font-variant: all-small-caps;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    letter-spacing: 0.25em;
    color: var(--steel);
    opacity: 0;
    transition: opacity 500ms var(--ease-tectonic) 700ms;
}

.strata.in-view .archive-meta {
    opacity: 0.75;
}

.archive-right {
    grid-column: 3;
    padding-top: 0;
    max-width: 48rem;
}

.archive-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 4.25rem);
    letter-spacing: 0.06em;
    line-height: 1.02;
    color: var(--platinum);
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity 600ms var(--ease-tectonic) 400ms,
        transform 600ms var(--ease-tectonic) 400ms;
}

.strata.in-view .archive-heading {
    opacity: 1;
    transform: scale(1);
}

.archive-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.75;
    color: var(--steel);
    margin-bottom: var(--sp-3);
    max-width: 52ch;
    opacity: 0;
    transition: opacity 500ms var(--ease-tectonic) 700ms;
}

.strata.in-view .archive-body {
    opacity: 1;
}

.archive-body em {
    color: var(--titanium);
    font-style: italic;
}

.archive-pullquote {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    line-height: 1.5;
    color: var(--titanium);
    border-left: 1px solid var(--patina);
    padding-left: var(--sp-2);
    margin-top: var(--sp-5);
    max-width: 44ch;
    opacity: 0;
    transform: translateX(-8px);
    transition:
        opacity 600ms var(--ease-tectonic) 900ms,
        transform 600ms var(--ease-tectonic) 900ms;
}

.strata.in-view .archive-pullquote {
    opacity: 0.92;
    transform: translateX(0);
}

.archive-list {
    list-style: none;
    padding: 0;
    margin-top: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: 52ch;
}

.archive-list li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid rgba(138, 155, 176, 0.15);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 500ms var(--ease-tectonic),
        transform 500ms var(--ease-tectonic);
}

.strata.in-view .archive-list li {
    opacity: 1;
    transform: translateY(0);
}

.strata.in-view .archive-list li:nth-child(1) { transition-delay: 700ms; }
.strata.in-view .archive-list li:nth-child(2) { transition-delay: 820ms; }
.strata.in-view .archive-list li:nth-child(3) { transition-delay: 940ms; }
.strata.in-view .archive-list li:nth-child(4) { transition-delay: 1060ms; }
.strata.in-view .archive-list li:nth-child(5) { transition-delay: 1180ms; }

.list-num {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    color: var(--patina);
    flex-shrink: 0;
    min-width: 2.5em;
}

.list-text {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--titanium);
    line-height: 1.5;
}

/* ================================================================
   Monument Mode — centered monumental typography
   ================================================================ */

.monument-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 60%;
    margin: 0 auto;
}

.monument-mode .section-head {
    margin-bottom: var(--sp-5);
}

.monument-mode .monument-title {
    font-size: clamp(3.5rem, 9vw, 11rem);
    line-height: 0.88;
    margin-bottom: var(--sp-5);
}

.monument-caption {
    font-family: var(--font-body);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--titanium);
    max-width: 40ch;
    line-height: 1.6;
    opacity: 0;
    transition: opacity 500ms var(--ease-tectonic) 900ms;
}

.strata.in-view .monument-caption {
    opacity: 0.85;
}

/* ================================================================
   Resolution meta block + colophon
   ================================================================ */

.resolution-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sp-5);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-5);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(138, 155, 176, 0.2);
    width: 100%;
    opacity: 0;
    transition: opacity 600ms var(--ease-tectonic) 1100ms;
}

.strata.in-view .resolution-meta {
    opacity: 1;
}

.meta-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    text-align: center;
}

.meta-label {
    font-family: var(--font-label);
    font-weight: 500;
    font-variant: all-small-caps;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.25em;
    color: var(--steel);
}

.meta-value {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.95em;
    color: var(--titanium);
}

.patina-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.95em;
    color: var(--steel);
    text-decoration: none;
    background-image: linear-gradient(var(--patina), var(--patina));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 2px;
    transition:
        color 400ms var(--ease-tectonic),
        background-size 600ms var(--ease-tectonic);
}

.patina-link:hover {
    color: var(--patina);
    background-size: 100% 1px;
}

.ext-arrow {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.colophon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-family: var(--font-label);
    font-weight: 500;
    font-variant: all-small-caps;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    letter-spacing: 0.25em;
    color: var(--steel);
    opacity: 0;
    transition: opacity 500ms var(--ease-tectonic) 1300ms;
}

.strata.in-view .colophon {
    opacity: 0.7;
}

.colophon-rule {
    width: 40px;
    height: 1px;
    background: var(--steel);
    opacity: 0.5;
}

/* ================================================================
   Responsive — compact layout on narrow viewports
   ================================================================ */

@media (max-width: 840px) {
    .archive-mode {
        grid-template-columns: 1fr;
        gap: var(--sp-2);
    }

    .archive-left {
        padding-top: 0;
    }

    .archive-right {
        grid-column: 1;
    }

    .monument-mode {
        max-width: 85%;
    }

    .pip-nav {
        right: 1rem;
    }

    .pip::after {
        display: none;
    }

    .resolution-meta {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }

    .coordinates {
        gap: var(--sp-2);
        font-size: 0.75em;
    }
}

@media (max-width: 520px) {
    .strata {
        padding: var(--sp-3) var(--sp-2);
    }

    #section-threshold .monument-title {
        font-size: clamp(2.5rem, 14vw, 4rem);
    }

    .monument-mode .monument-title {
        font-size: clamp(2.25rem, 12vw, 3.5rem);
    }
}