/* ========================================
   archetype.works v2
   Jungian Psychological Observatory
   ======================================== */

/* ---------- Tokens ---------- */
:root {
    --void-white: #FAFAFA;
    --obsidian: #0A0A0A;
    --phantom-gray: #B0B0B0;
    --light-gray: #E8E8E8;
    --creator: #D4380D;
    --shadow: #1E1B4B;
    --sage: #065F46;
    --trickster: #B45309;
    --anima: #6B21A8;

    --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --font-tech: 'Space Grotesk', 'Helvetica Neue', sans-serif;

    --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-precise: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; overflow-x: hidden; background: var(--void-white); color: var(--obsidian); }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-serif);
    font-weight: 300;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

/* ---------- Scroll indicator (right edge) ---------- */
.scroll-indicator {
    position: fixed;
    top: 0;
    right: 14px;
    width: 1px;
    height: 100vh;
    z-index: 50;
    pointer-events: none;
}
.scroll-line {
    position: absolute;
    top: 8vh;
    bottom: 8vh;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, var(--phantom-gray) 12%, var(--phantom-gray) 88%, transparent 100%);
}
.glyph-marker {
    position: absolute;
    left: -9px;
    width: 19px;
    height: 19px;
    color: var(--phantom-gray);
    transition: color 600ms var(--ease-precise), transform 600ms var(--ease-precise);
}
.glyph-marker svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.glyph-marker[data-pos="0"] { top: 8vh; }
.glyph-marker[data-pos="1"] { top: calc(8vh + (84vh / 5) * 1); }
.glyph-marker[data-pos="2"] { top: calc(8vh + (84vh / 5) * 2); }
.glyph-marker[data-pos="3"] { top: calc(8vh + (84vh / 5) * 3); }
.glyph-marker[data-pos="4"] { top: calc(8vh + (84vh / 5) * 4); }
.glyph-marker[data-pos="5"] { top: calc(8vh + 84vh); }
.glyph-marker.active { color: var(--obsidian); transform: scale(1.4); }

/* ---------- Vertical margin annotations ---------- */
.margin-annotations {
    position: fixed;
    top: 0;
    width: 5vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    z-index: 40;
    pointer-events: none;
    will-change: transform;
}
.margin-annotations span {
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--phantom-gray);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    transition: color 600ms var(--ease-precise);
}
.margin-left { left: 0; }
.margin-right { right: 28px; }
.margin-right span { transform: rotate(0deg); writing-mode: vertical-rl; }

/* ---------- Opening viewport ---------- */
.opening {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--void-white);
}
.opening-stage { position: relative; width: 100%; text-align: center; padding: 0 5vw; }
.opening-word {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(64px, 25vw, 35vw);
    letter-spacing: 0.05em;
    line-height: 0.9;
    color: var(--light-gray);
    text-transform: uppercase;
    transition: color 1200ms var(--ease-cinematic);
    will-change: color;
    opacity: 0;
    animation: opening-fade-in 1400ms 1000ms var(--ease-precise) forwards;
}
@keyframes opening-fade-in {
    0% { opacity: 0; color: var(--void-white); }
    100% { opacity: 1; color: var(--light-gray); }
}
.opening.dark .opening-word { color: var(--obsidian); }

.opening-rule {
    width: 0;
    height: 1px;
    margin: clamp(16px, 3vh, 32px) auto;
    background: var(--obsidian);
    animation: rule-extend 3000ms 200ms var(--ease-precise) forwards;
}
@keyframes rule-extend {
    0% { width: 0; }
    100% { width: 80%; }
}

.opening-subtitle {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(14px, 1.4vw, 22px);
    letter-spacing: 0.5em;
    text-transform: lowercase;
    color: var(--obsidian);
    opacity: 0;
    transform: translateY(10px);
    animation: subtitle-rise 600ms 2500ms var(--ease-precise) forwards;
}
@keyframes subtitle-rise {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Interstitial corridors ---------- */
.interstitial {
    width: 100%;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--void-white);
}
.rotating-glyph {
    width: 40px;
    height: 40px;
    color: var(--phantom-gray);
    fill: none;
    stroke: currentColor;
    animation: glyph-rotate 60s linear infinite;
    transition: color 600ms var(--ease-precise);
}
.rotating-glyph:hover { color: var(--obsidian); }
@keyframes glyph-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------- Archetype sections ---------- */
.archetype-section {
    position: relative;
    width: 100%;
    height: 150vh;
    display: grid;
    grid-template-columns: 60% 40%;
    background: var(--void-white);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    transition: border-color 400ms var(--ease-precise);
    overflow: hidden;
}
.archetype-section[data-accent="creator"] { --accent: var(--creator); }
.archetype-section[data-accent="shadow"] { --accent: var(--shadow); }
.archetype-section[data-accent="sage"] { --accent: var(--sage); }
.archetype-section[data-accent="trickster"] { --accent: var(--trickster); }
.archetype-section[data-accent="anima"] { --accent: var(--anima); }
.archetype-section.is-active { border-color: var(--accent); }

/* ---------- Silhouette stage (left 60%) ---------- */
.silhouette-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    color: var(--accent);
}
.silhouette {
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(280px, 38vw, 560px);
    height: 90vh;
    clip-path: var(--clip);
    -webkit-clip-path: var(--clip);
    transition: transform 1200ms var(--ease-cinematic), opacity 800ms var(--ease-precise);
    will-change: transform, opacity;
    opacity: 0;
}
.silhouette-primary {
    background: var(--accent);
    opacity: 0;
    z-index: 2;
}
.silhouette-shadow {
    background: var(--obsidian);
    opacity: 0;
    z-index: 1;
}
.archetype-section.is-active .silhouette-primary { opacity: 0.08; }
.archetype-section.is-active .silhouette-shadow { opacity: 0.04; transform: translate(calc(-50% + var(--shadow-x, 12px)), var(--shadow-y, 8px)); }

.watermark-glyph {
    position: absolute;
    top: 50%;
    right: 8%;
    width: clamp(120px, 15vw, 300px);
    height: clamp(120px, 15vw, 300px);
    transform: translateY(-50%);
    opacity: 0.03;
    color: var(--accent);
    pointer-events: none;
}

/* ---------- Archetype text (right 40%) ---------- */
.archetype-text {
    position: relative;
    padding: 18vh 8% 10vh 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    position: sticky;
    top: 0;
    color: var(--obsidian);
}

.section-label {
    font-family: var(--font-tech);
    font-weight: 400;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--phantom-gray);
    margin-bottom: 1.5em;
}
.archetype-section.is-active .section-label { color: var(--accent); }

.archetype-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 8vw, 130px);
    letter-spacing: 0.02em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--obsidian);
    margin-bottom: 0.4em;
    transform: translateX(40px);
    opacity: 0;
    transition: transform 600ms var(--ease-cinematic), opacity 600ms var(--ease-precise);
}
.archetype-section.is-active .archetype-name { transform: translateX(0); opacity: 1; }

.line-network {
    display: block;
    width: 100%;
    height: 14vh;
    margin: 1.6em 0;
    color: var(--phantom-gray);
    overflow: visible;
}
.line-network .net-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 0.5;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: d 1200ms var(--ease-precise), stroke-dashoffset 1500ms ease-in-out, stroke 600ms var(--ease-precise);
}
.archetype-section.is-active .line-network .net-line { stroke-dashoffset: 0; stroke: var(--phantom-gray); }
.archetype-section.is-engaged .line-network .net-line { stroke: var(--accent); opacity: 0.7; }

.archetype-definition {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(18px, 1.6vw, 26px);
    line-height: 1.7;
    color: var(--obsidian);
    margin-bottom: 1.5em;
    max-width: 32em;
}
.archetype-definition em {
    display: inline;
    opacity: 0;
    transform: translateY(8px);
    animation: none;
    transition: opacity 800ms var(--ease-precise), transform 800ms var(--ease-precise);
}
.archetype-section.is-active .archetype-definition em { opacity: 1; transform: translateY(0); }

.archetype-attributes {
    font-family: var(--font-tech);
    font-weight: 400;
    font-size: clamp(10px, 0.95vw, 13px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--phantom-gray);
}
.archetype-section.is-active .archetype-attributes { color: var(--accent); }

/* ---------- Closing viewport ---------- */
.closing {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--void-white);
    overflow: hidden;
}
.closing-stage {
    width: 100%;
    text-align: center;
    padding: 0 6vw;
}
.closing-word {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 18vw, 280px);
    letter-spacing: 0.3em;
    line-height: 1;
    color: var(--obsidian);
    text-transform: uppercase;
    margin-bottom: clamp(12px, 2vh, 24px);
    user-select: none;
}
.closing-word span {
    display: inline-block;
    transition: transform 500ms var(--ease-cinematic), color 400ms var(--ease-precise);
    will-change: transform;
    transform: translateY(0);
}
.closing-word:hover span {
    transform: translateY(var(--offset, 0px));
}
.closing-word span:hover { color: var(--shadow); }

.closing-rule {
    width: 60%;
    height: 1px;
    margin: clamp(16px, 3vh, 32px) auto;
    background: var(--obsidian);
}
.closing-subtitle {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(14px, 1.4vw, 22px);
    letter-spacing: 0.5em;
    color: var(--obsidian);
    margin-bottom: 2em;
}
.closing-prompt {
    font-family: var(--font-tech);
    font-weight: 400;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--phantom-gray);
}

/* ---------- Meta footer ---------- */
.meta-footer {
    width: 100%;
    padding: 24px 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--void-white);
    border-top: 1px solid var(--light-gray);
}
.meta-line {
    font-family: var(--font-tech);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--phantom-gray);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .archetype-section {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 130vh;
    }
    .silhouette-stage {
        position: relative;
        height: 70vh;
    }
    .archetype-text {
        position: relative;
        height: auto;
        padding: 8vh 8%;
    }
    .archetype-name { font-size: clamp(48px, 14vw, 110px); }
    .margin-annotations { display: none; }
    .scroll-indicator { right: 6px; }
    .meta-footer { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 600px) {
    .opening-word { font-size: clamp(64px, 30vw, 180px); }
    .closing-word { font-size: clamp(36px, 14vw, 120px); letter-spacing: 0.18em; }
    .opening-rule { width: 70%; }
    .interstitial { height: 35vh; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .rotating-glyph { animation: none; }
}