/* ==========================================
   archetype.boo - Spectral Taxonomy
   A haunted library of Jungian archetypes
   ========================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --obsidian-void: #0b0a12;
    --seance-plum: #1a1528;
    --ectoplasm-white: #e8e0f0;
    --faded-foxing: #9a8fb0;
    --grimoire-gold: #c4a265;
    --spirit-bloom: #7b68ae;
    --phantom-blush: #a8607a;
    --abyss-crimson: #6b2038;
    --apparition: #2a2440;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

body {
    background-color: var(--obsidian-void);
    color: var(--ectoplasm-white);
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Background Plane --- */
#background-plane {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

#bg-noise {
    width: 100%;
    height: 100%;
}

/* --- Spirit Plane (floating silhouettes) --- */
#spirit-plane {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
}

.floating-spirit {
    position: absolute;
    opacity: 0.05;
    width: 180px;
    height: auto;
    filter: url(#spirit-shimmer);
}

.spirit-hero {
    top: 10%;
    left: 15%;
    animation: spirit-drift-1 25s ease-in-out infinite;
}

.spirit-shadow {
    top: 40%;
    right: 10%;
    animation: spirit-drift-2 30s ease-in-out infinite;
}

.spirit-trickster {
    top: 65%;
    left: 50%;
    animation: spirit-drift-3 22s ease-in-out infinite;
}

.spirit-anima {
    top: 20%;
    right: 25%;
    animation: spirit-drift-4 28s ease-in-out infinite;
}

@keyframes spirit-drift-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, 20px) rotate(2deg); }
    50% { transform: translate(-20px, 40px) rotate(-1deg); }
    75% { transform: translate(15px, -10px) rotate(1.5deg); }
}

@keyframes spirit-drift-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-25px, 15px) rotate(-2deg); }
    50% { transform: translate(35px, -20px) rotate(1deg); }
    75% { transform: translate(-10px, 30px) rotate(-0.5deg); }
}

@keyframes spirit-drift-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -30px) rotate(1.5deg); }
    50% { transform: translate(-30px, 10px) rotate(-2deg); }
    75% { transform: translate(25px, 25px) rotate(0.5deg); }
}

@keyframes spirit-drift-4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-15px, -25px) rotate(-1deg); }
    50% { transform: translate(25px, 30px) rotate(2deg); }
    75% { transform: translate(-20px, -15px) rotate(-1.5deg); }
}

/* --- Intro Overlay --- */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: var(--obsidian-void);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1.5s ease-out;
}

#intro-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

#intro-overlay.hidden {
    display: none;
}

#intro-text {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--grimoire-gold);
    opacity: 0;
    animation: intro-fade 2s ease-in-out 0.5s forwards;
}

@keyframes intro-fade {
    0% { opacity: 0; }
    30% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- Vertical Navigation --- */
#vertical-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 40px;
    height: 100%;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#vertical-nav.visible {
    opacity: 1;
}

#nav-progress-line {
    position: absolute;
    left: 18px;
    top: 15%;
    bottom: 15%;
    width: 4px;
    background: rgba(123, 104, 174, 0.15);
    border-radius: 2px;
}

#nav-progress-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--progress, 0%);
    background: var(--spirit-bloom);
    border-radius: 2px;
    transition: height 0.3s ease;
    opacity: 0.6;
}

.nav-node {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(123, 104, 174, 0.4);
    background: var(--obsidian-void);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.nav-node:hover {
    border-color: var(--spirit-bloom);
    background: rgba(123, 104, 174, 0.2);
}

.nav-node.active {
    border-color: var(--spirit-bloom);
    background: var(--spirit-bloom);
    animation: node-pulse 2s ease-in-out infinite;
}

@keyframes node-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(123, 104, 174, 0.4); }
    50% { box-shadow: 0 0 8px 3px rgba(123, 104, 174, 0.3); }
}

.nav-label {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faded-foxing);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nav-node:hover .nav-label {
    opacity: 1;
}

/* --- Ectoplasm Trail --- */
#ectoplasm-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
}

.ecto-particle {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 104, 174, 0.06) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

/* --- Main Content --- */
#main-content {
    position: relative;
    z-index: 10;
    padding-left: 50px;
    opacity: 0;
    transition: opacity 1s ease;
}

#main-content.visible {
    opacity: 1;
}

/* --- Interstitials (Chapter Dividers) --- */
.interstitial {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--obsidian-void);
    scroll-snap-align: start;
    overflow: hidden;
    padding: 2rem;
}

.interstitial-silhouette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: auto;
    opacity: 0.12;
}

.interstitial-name {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(3.5rem, 9vw, 10rem);
    color: var(--ectoplasm-white);
    position: relative;
    z-index: 2;
    text-align: center;
    line-height: 1.1;
}

.interstitial-epithet {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--grimoire-gold);
    position: relative;
    z-index: 2;
    margin-top: 0.8rem;
    font-style: italic;
}

.closing-text {
    font-family: 'Caveat', cursive;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--faded-foxing);
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

/* --- Mandalas --- */
.mandala {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 50vw, 600px);
    height: clamp(300px, 50vw, 600px);
    opacity: 0.08;
    animation: mandala-rotate 720s linear infinite;
    z-index: 1;
}

@keyframes mandala-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Hero mandala: concentric circles variant */
.mandala-hero {
    border: 2px solid var(--grimoire-gold);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 20px transparent,
        inset 0 0 0 22px var(--grimoire-gold),
        inset 0 0 0 50px transparent,
        inset 0 0 0 52px var(--grimoire-gold),
        inset 0 0 0 80px transparent,
        inset 0 0 0 82px var(--grimoire-gold),
        inset 0 0 0 110px transparent,
        inset 0 0 0 112px var(--grimoire-gold);
}

/* Shadow mandala: overlapping triangles */
.mandala-shadow {
    background:
        conic-gradient(from 0deg at 50% 35%, transparent 0deg, transparent 150deg, var(--grimoire-gold) 150deg, var(--grimoire-gold) 152deg, transparent 152deg, transparent 210deg, var(--grimoire-gold) 210deg, var(--grimoire-gold) 212deg, transparent 212deg, transparent 330deg, var(--grimoire-gold) 330deg, var(--grimoire-gold) 332deg, transparent 332deg),
        conic-gradient(from 60deg at 50% 65%, transparent 0deg, transparent 150deg, var(--grimoire-gold) 150deg, var(--grimoire-gold) 152deg, transparent 152deg, transparent 210deg, var(--grimoire-gold) 210deg, var(--grimoire-gold) 212deg, transparent 212deg, transparent 330deg, var(--grimoire-gold) 330deg, var(--grimoire-gold) 332deg, transparent 332deg);
}

/* Trickster mandala: spiral */
.mandala-trickster {
    border: 2px dashed var(--grimoire-gold);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 30px transparent,
        inset 0 0 0 32px var(--grimoire-gold);
}

.mandala-trickster::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border: 1.5px solid var(--grimoire-gold);
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
}

.mandala-trickster::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border: 1.5px dashed var(--grimoire-gold);
    border-radius: 50%;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

/* Sage mandala: nested squares */
.mandala-sage {
    border: 2px solid var(--grimoire-gold);
}

.mandala-sage::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    border: 1.5px solid var(--grimoire-gold);
    transform: rotate(15deg);
}

.mandala-sage::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 30%;
    width: 40%;
    height: 40%;
    border: 1.5px solid var(--grimoire-gold);
    transform: rotate(30deg);
}

/* Mother mandala: concentric circles */
.mandala-mother {
    border: 2px solid var(--grimoire-gold);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 25px transparent,
        inset 0 0 0 27px var(--grimoire-gold),
        inset 0 0 0 55px transparent,
        inset 0 0 0 57px var(--grimoire-gold),
        inset 0 0 0 85px transparent,
        inset 0 0 0 87px var(--grimoire-gold);
}

.mandala-mother::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 35%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: var(--grimoire-gold);
    opacity: 0.3;
}

/* Anima mandala: flowing circles */
.mandala-anima {
    border-radius: 50%;
    border: 2px solid var(--phantom-blush);
    box-shadow:
        inset 0 0 0 15px transparent,
        inset 0 0 0 17px var(--phantom-blush);
}

.mandala-anima::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    border: 1.5px solid var(--grimoire-gold);
    border-radius: 50%;
}

.mandala-anima::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 35%;
    width: 30%;
    height: 30%;
    border: 1.5px solid var(--phantom-blush);
    border-radius: 50%;
}

/* Self mandala: concentric circles (completeness) */
.mandala-self {
    border: 2px solid var(--grimoire-gold);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 15px transparent,
        inset 0 0 0 17px var(--spirit-bloom),
        inset 0 0 0 35px transparent,
        inset 0 0 0 37px var(--grimoire-gold),
        inset 0 0 0 55px transparent,
        inset 0 0 0 57px var(--spirit-bloom),
        inset 0 0 0 75px transparent,
        inset 0 0 0 77px var(--grimoire-gold),
        inset 0 0 0 95px transparent,
        inset 0 0 0 97px var(--spirit-bloom);
}

/* --- Masonry Sections --- */
.masonry-section {
    column-count: 3;
    column-gap: 24px;
    padding: 60px 40px 100px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Masonry Tiles --- */
.masonry-tile {
    break-inside: avoid;
    background: var(--seance-plum);
    margin-bottom: 24px;
    padding: 28px 24px;
    position: relative;
    box-shadow: inset 0 0 40px rgba(180, 160, 210, 0.06);
    transform: rotate(var(--rotation, 0deg));
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.masonry-tile.materialized {
    opacity: 1;
}

/* Foxing (aging) effect */
.masonry-tile::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 25%, rgba(160, 130, 80, 0.06) 0%, transparent 3%),
        radial-gradient(circle at 72% 18%, rgba(160, 130, 80, 0.05) 0%, transparent 2.5%),
        radial-gradient(circle at 40% 70%, rgba(160, 130, 80, 0.04) 0%, transparent 3.5%),
        radial-gradient(circle at 85% 55%, rgba(160, 130, 80, 0.06) 0%, transparent 2%),
        radial-gradient(circle at 25% 85%, rgba(160, 130, 80, 0.05) 0%, transparent 3%);
    pointer-events: none;
    opacity: 0.8;
}

.masonry-tile:nth-child(2n)::after {
    background:
        radial-gradient(circle at 55% 15%, rgba(160, 130, 80, 0.05) 0%, transparent 3%),
        radial-gradient(circle at 20% 60%, rgba(160, 130, 80, 0.06) 0%, transparent 2%),
        radial-gradient(circle at 80% 80%, rgba(160, 130, 80, 0.04) 0%, transparent 3.5%),
        radial-gradient(circle at 35% 40%, rgba(160, 130, 80, 0.05) 0%, transparent 2.5%);
}

.masonry-tile:nth-child(3n)::after {
    background:
        radial-gradient(circle at 65% 30%, rgba(160, 130, 80, 0.06) 0%, transparent 2.5%),
        radial-gradient(circle at 10% 70%, rgba(160, 130, 80, 0.05) 0%, transparent 3%),
        radial-gradient(circle at 50% 90%, rgba(160, 130, 80, 0.04) 0%, transparent 2%),
        radial-gradient(circle at 90% 15%, rgba(160, 130, 80, 0.06) 0%, transparent 3.5%);
}

/* Tile size variants */
.tile-tall {
    min-height: 320px;
}

.tile-wide {
    column-span: none;
}

.tile-square {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tile-narrow {
    padding: 20px 18px;
}

/* --- Tile Typography --- */
.tile-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    color: var(--ectoplasm-white);
    margin-bottom: 16px;
    line-height: 1.2;
}

.tile-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--ectoplasm-white);
    margin-bottom: 12px;
    line-height: 1.3;
}

.tile-body {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.8;
    color: var(--ectoplasm-white);
    margin-bottom: 12px;
}

.tile-body strong {
    font-weight: 600;
}

.tile-quote {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--ectoplasm-white);
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 16px;
    border-left: 2px solid rgba(123, 104, 174, 0.3);
}

.tile-marginalia {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 14px;
    color: var(--grimoire-gold);
    display: block;
    margin-top: 8px;
}

.tile-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faded-foxing);
    display: block;
    margin-bottom: 12px;
}

.tile-silhouette {
    width: 80%;
    max-width: 160px;
    height: auto;
    opacity: 0.35;
}

/* --- Shadow archetype accent --- */
.shadow-accent {
    box-shadow: inset 0 0 40px rgba(107, 32, 56, 0.08);
}

/* --- Anima archetype accent --- */
.anima-accent {
    box-shadow: inset 0 0 40px rgba(168, 96, 122, 0.08);
}

/* --- Hover states --- */
.masonry-tile:hover {
    box-shadow: inset 0 0 60px rgba(180, 160, 210, 0.1);
}

.masonry-tile:hover .tile-marginalia {
    color: var(--spirit-bloom);
    transition: color 0.4s ease;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .masonry-section {
        column-count: 2;
        padding: 40px 24px 80px 24px;
    }

    #main-content {
        padding-left: 40px;
    }

    .interstitial-silhouette {
        width: 220px;
    }
}

@media (max-width: 640px) {
    .masonry-section {
        column-count: 1;
        padding: 30px 16px 60px 16px;
    }

    #main-content {
        padding-left: 32px;
    }

    #vertical-nav {
        width: 28px;
    }

    .nav-label {
        display: none;
    }

    .interstitial-silhouette {
        width: 160px;
    }

    .masonry-tile {
        transform: rotate(0deg) !important;
    }

    .floating-spirit {
        width: 100px;
    }
}

/* --- Selection --- */
::selection {
    background: rgba(123, 104, 174, 0.3);
    color: var(--ectoplasm-white);
}