/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: #f5efe6;
    color: #5c4a3a;
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.85;
    overflow-x: hidden;
    position: relative;
}

/* ===== VIGNETTE ===== */
.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(42, 31, 20, 0.12) 100%);
    pointer-events: none;
    z-index: 1000;
}

/* ===== GRID UNDERLAYER ===== */
.grid-underlayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ===== AMBIENT PARTICLES ===== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: #c49a6c;
    filter: blur(1px);
    animation: particleDrift linear infinite;
}

@keyframes particleDrift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: var(--p-opacity);
    }
    25% {
        transform: translate(calc(var(--drift-x) * 0.5), calc(var(--drift-y) * 0.25)) scale(1.1);
    }
    50% {
        transform: translate(var(--drift-x), calc(var(--drift-y) * 0.5)) scale(0.9);
        opacity: calc(var(--p-opacity) * 0.6);
    }
    75% {
        transform: translate(calc(var(--drift-x) * 0.5), calc(var(--drift-y) * 0.75)) scale(1.05);
    }
    100% {
        transform: translate(0, var(--drift-y)) scale(1);
        opacity: var(--p-opacity);
    }
}

/* ===== FILAMENTS SVG ===== */
.filaments {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.filament {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease;
}

.filament.drawn {
    stroke-dashoffset: 0;
}

/* ===== FLOATING NAV ===== */
.blob-nav {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 900;
}

.nav-blob {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%;
    background: #a8845c;
    opacity: 0.4;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.nav-blob:hover,
.nav-blob.active {
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 0 12px rgba(196, 154, 108, 0.5);
}

.nav-label {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8b7355;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

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

/* ===== THRESHOLD ===== */
.threshold {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.threshold-blob {
    width: 70vmin;
    height: 70vmin;
    background: linear-gradient(135deg, #d4b896 0%, #a8845c 100%);
    clip-path: polygon(
        50% 2%, 72% 5%, 88% 15%, 96% 32%,
        98% 52%, 92% 72%, 80% 88%, 62% 96%,
        42% 98%, 24% 92%, 12% 80%, 4% 62%,
        2% 42%, 6% 24%, 16% 12%, 32% 4%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    filter: blur(0px);
    animation: thresholdExpand 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
               blobBreathe1 12s ease-in-out 2.5s infinite;
    transform: scale(0.4);
    position: relative;
}

.threshold-blob::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    clip-path: inherit;
    pointer-events: none;
}

@keyframes thresholdExpand {
    from { transform: scale(0.4); }
    to { transform: scale(1); }
}

@keyframes blobBreathe1 {
    0%, 100% {
        clip-path: polygon(
            50% 2%, 72% 5%, 88% 15%, 96% 32%,
            98% 52%, 92% 72%, 80% 88%, 62% 96%,
            42% 98%, 24% 92%, 12% 80%, 4% 62%,
            2% 42%, 6% 24%, 16% 12%, 32% 4%
        );
    }
    50% {
        clip-path: polygon(
            48% 4%, 70% 3%, 86% 17%, 94% 34%,
            96% 50%, 94% 70%, 82% 86%, 64% 94%,
            44% 96%, 26% 90%, 14% 78%, 6% 60%,
            4% 40%, 4% 26%, 14% 14%, 30% 6%
        );
    }
}

.threshold-content {
    text-align: center;
    padding: 2rem;
}

.site-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.03em;
    color: #3d2a1a;
    opacity: 0;
    animation: fadeIn 1.2s ease 0.8s forwards;
}

.site-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: #6b4c2a;
    margin-top: 1rem;
    min-height: 2em;
}

.site-subtitle .cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: #6b4c2a;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink {
    50% { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.scroll-hint {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeIn 1s ease 4s forwards;
}

.scroll-hint-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8b7355;
}

.scroll-arrow {
    animation: bobDown 2s ease-in-out infinite;
}

@keyframes bobDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ===== CHAMBERS ===== */
.chamber {
    position: relative;
    z-index: 3;
    padding: 60px 0;
    margin-top: -40px;
}

.chamber-blob {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem);
    background: linear-gradient(145deg, #d4b896 0%, #e8d5bc 60%, #d4b896 100%);
    position: relative;
    opacity: 0.1;
    transform: scale(0.85);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.chamber-blob::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    clip-path: inherit;
    pointer-events: none;
}

.chamber-blob.visible {
    opacity: 1;
    transform: scale(1);
}

.chamber-blob:hover {
    transform: scale(1.03);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(145deg, #c49a6c 0%, #e8d5bc 60%, #c49a6c 100%);
}

/* Unique blob shapes per chamber */
.chamber-virtue .chamber-blob {
    clip-path: polygon(
        45% 1%, 62% 0%, 78% 4%, 90% 12%,
        96% 26%, 98% 42%, 97% 58%, 94% 74%,
        88% 86%, 76% 94%, 60% 98%, 44% 99%,
        28% 96%, 16% 88%, 8% 76%, 3% 60%,
        1% 44%, 2% 28%, 8% 14%, 22% 5%
    );
    max-width: 700px;
    min-height: 600px;
    animation: blobBreathe2 12s ease-in-out infinite;
}

.chamber-deontology .chamber-blob {
    clip-path: polygon(
        8% 2%, 30% 0%, 52% 1%, 75% 0%,
        92% 5%, 98% 18%, 96% 38%, 99% 56%,
        95% 75%, 88% 90%, 70% 97%, 50% 99%,
        30% 98%, 12% 93%, 3% 80%, 1% 60%,
        2% 40%, 0% 22%, 4% 10%, 8% 2%
    );
    max-width: 850px;
    animation: blobBreathe3 11s ease-in-out infinite;
}

.chamber-consequentialism .chamber-blob {
    clip-path: polygon(
        20% 4%, 40% 1%, 60% 0%, 80% 2%,
        94% 10%, 100% 25%, 98% 45%, 100% 65%,
        96% 82%, 86% 94%, 68% 100%, 50% 98%,
        32% 100%, 14% 94%, 4% 82%, 0% 65%,
        1% 45%, 0% 28%, 6% 14%, 20% 4%
    );
    max-width: 1000px;
    animation: blobBreathe4 13s ease-in-out infinite;
}

.chamber-care .chamber-blob {
    clip-path: polygon(
        50% 0%, 68% 3%, 84% 10%, 94% 22%,
        100% 38%, 100% 55%, 96% 72%, 86% 85%,
        72% 95%, 55% 100%, 38% 100%, 22% 96%,
        10% 86%, 3% 72%, 0% 55%, 0% 38%,
        4% 22%, 12% 10%, 28% 3%, 50% 0%
    );
    max-width: 800px;
    border-radius: 0;
    animation: blobBreathe5 12s ease-in-out infinite;
}

.chamber-existentialism .chamber-blob {
    clip-path: polygon(
        42% 2%, 65% 0%, 82% 6%, 95% 16%,
        100% 32%, 96% 50%, 100% 68%, 92% 84%,
        78% 96%, 58% 100%, 38% 98%, 20% 92%,
        6% 80%, 0% 62%, 2% 44%, 0% 28%,
        6% 14%, 18% 5%, 30% 1%, 42% 2%
    );
    max-width: 880px;
    animation: blobBreathe6 14s ease-in-out infinite;
}

@keyframes blobBreathe2 {
    0%, 100% {
        clip-path: polygon(45% 1%,62% 0%,78% 4%,90% 12%,96% 26%,98% 42%,97% 58%,94% 74%,88% 86%,76% 94%,60% 98%,44% 99%,28% 96%,16% 88%,8% 76%,3% 60%,1% 44%,2% 28%,8% 14%,22% 5%);
    }
    50% {
        clip-path: polygon(47% 3%,64% 2%,76% 6%,88% 14%,94% 28%,96% 44%,95% 60%,92% 72%,86% 84%,74% 92%,58% 96%,42% 97%,26% 94%,14% 86%,6% 74%,5% 58%,3% 42%,4% 26%,10% 12%,24% 3%);
    }
}

@keyframes blobBreathe3 {
    0%, 100% {
        clip-path: polygon(8% 2%,30% 0%,52% 1%,75% 0%,92% 5%,98% 18%,96% 38%,99% 56%,95% 75%,88% 90%,70% 97%,50% 99%,30% 98%,12% 93%,3% 80%,1% 60%,2% 40%,0% 22%,4% 10%,8% 2%);
    }
    50% {
        clip-path: polygon(10% 4%,32% 2%,54% 3%,73% 2%,90% 7%,96% 20%,94% 40%,97% 58%,93% 73%,86% 88%,68% 95%,48% 97%,28% 96%,10% 91%,5% 78%,3% 58%,4% 38%,2% 20%,6% 8%,10% 4%);
    }
}

@keyframes blobBreathe4 {
    0%, 100% {
        clip-path: polygon(20% 4%,40% 1%,60% 0%,80% 2%,94% 10%,100% 25%,98% 45%,100% 65%,96% 82%,86% 94%,68% 100%,50% 98%,32% 100%,14% 94%,4% 82%,0% 65%,1% 45%,0% 28%,6% 14%,20% 4%);
    }
    50% {
        clip-path: polygon(22% 6%,42% 3%,58% 2%,78% 4%,92% 12%,98% 27%,96% 47%,98% 63%,94% 80%,84% 92%,66% 98%,48% 96%,30% 98%,12% 92%,6% 80%,2% 63%,3% 43%,2% 26%,8% 12%,22% 6%);
    }
}

@keyframes blobBreathe5 {
    0%, 100% {
        clip-path: polygon(50% 0%,68% 3%,84% 10%,94% 22%,100% 38%,100% 55%,96% 72%,86% 85%,72% 95%,55% 100%,38% 100%,22% 96%,10% 86%,3% 72%,0% 55%,0% 38%,4% 22%,12% 10%,28% 3%,50% 0%);
    }
    50% {
        clip-path: polygon(48% 2%,66% 5%,82% 12%,92% 24%,98% 40%,98% 57%,94% 70%,84% 83%,70% 93%,53% 98%,36% 98%,20% 94%,8% 84%,5% 70%,2% 53%,2% 36%,6% 20%,14% 8%,30% 1%,48% 2%);
    }
}

@keyframes blobBreathe6 {
    0%, 100% {
        clip-path: polygon(42% 2%,65% 0%,82% 6%,95% 16%,100% 32%,96% 50%,100% 68%,92% 84%,78% 96%,58% 100%,38% 98%,20% 92%,6% 80%,0% 62%,2% 44%,0% 28%,6% 14%,18% 5%,30% 1%,42% 2%);
    }
    50% {
        clip-path: polygon(44% 4%,63% 2%,80% 8%,93% 18%,98% 34%,94% 52%,98% 66%,90% 82%,76% 94%,56% 98%,36% 96%,18% 90%,8% 78%,2% 60%,4% 42%,2% 26%,8% 12%,20% 3%,32% 3%,44% 4%);
    }
}

/* Chamber content typography */
.chamber-question {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: #6b4c2a;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.chamber-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0.03em;
    color: #3d2a1a;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.chamber-insight {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.75;
    color: #3d2a1a;
    margin-bottom: 1.5rem;
    max-width: 38em;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
}

.chamber-body {
    max-width: 38em;
    opacity: 0;
    transition: opacity 0.8s ease 0.55s;
}

.chamber-body p {
    margin-bottom: 1.5em;
    color: #5c4a3a;
}

.chamber-body p + p {
    text-indent: 1.5em;
}

.chamber-dilemma {
    margin-top: 2rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: linear-gradient(145deg, #e8d5bc 0%, #d4b896 100%);
    clip-path: polygon(
        5% 3%, 25% 0%, 50% 2%, 75% 0%, 95% 3%,
        100% 25%, 98% 50%, 100% 75%, 97% 95%,
        75% 100%, 50% 98%, 25% 100%, 5% 97%,
        0% 75%, 2% 50%, 0% 25%
    );
    opacity: 0;
    transition: opacity 0.8s ease 0.75s;
}

.dilemma-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8b7355;
    margin-bottom: 0.75rem;
}

.chamber-dilemma p:last-child {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.75;
    color: #3d2a1a;
}

/* Visible state for chamber content */
.chamber-blob.visible .chamber-question,
.chamber-blob.visible .chamber-heading,
.chamber-blob.visible .chamber-insight,
.chamber-blob.visible .chamber-body,
.chamber-blob.visible .chamber-dilemma {
    opacity: 1;
    transform: translateY(0);
}

/* ===== CONVERGENCE ===== */
.convergence {
    position: relative;
    z-index: 3;
    padding: 120px 0 80px;
    margin-top: -40px;
}

.convergence-blob {
    max-width: 750px;
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 5rem);
    background: linear-gradient(135deg, #c49a6c 0%, #d4b896 40%, #a8845c 100%);
    clip-path: polygon(
        50% 0%, 66% 3%, 80% 10%, 92% 22%,
        98% 38%, 100% 52%, 98% 68%, 90% 82%,
        78% 92%, 62% 98%, 48% 100%, 34% 98%,
        20% 92%, 10% 80%, 4% 66%, 0% 50%,
        2% 34%, 8% 20%, 18% 10%, 34% 3%
    );
    opacity: 0.1;
    transform: scale(0.85);
    transition: opacity 1.2s ease, transform 1.2s ease;
    animation: blobBreathe7 15s ease-in-out infinite;
    position: relative;
}

.convergence-blob::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
    clip-path: inherit;
    pointer-events: none;
}

.convergence-blob.visible {
    opacity: 1;
    transform: scale(1);
}

@keyframes blobBreathe7 {
    0%, 100% {
        clip-path: polygon(50% 0%,66% 3%,80% 10%,92% 22%,98% 38%,100% 52%,98% 68%,90% 82%,78% 92%,62% 98%,48% 100%,34% 98%,20% 92%,10% 80%,4% 66%,0% 50%,2% 34%,8% 20%,18% 10%,34% 3%);
    }
    50% {
        clip-path: polygon(48% 2%,64% 5%,78% 12%,90% 24%,96% 40%,98% 54%,96% 66%,88% 80%,76% 90%,60% 96%,46% 98%,32% 96%,18% 90%,8% 78%,2% 64%,2% 48%,4% 32%,10% 18%,20% 8%,36% 1%);
    }
}

.convergence-content {
    text-align: center;
}

.convergence-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0.03em;
    color: #3d2a1a;
    margin-bottom: 0.5rem;
}

.convergence-question {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: #f5efe6;
    margin-bottom: 2rem;
}

.convergence-body {
    text-align: left;
    max-width: 34em;
    margin: 0 auto;
}

.convergence-body p {
    margin-bottom: 1.5em;
    color: #3d2a1a;
}

.convergence-body p + p {
    text-indent: 1.5em;
}

.convergence-closing {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #2a1f14;
    margin-top: 2rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .blob-nav {
        right: 10px;
        gap: 12px;
    }
    .nav-blob {
        width: 10px;
        height: 10px;
    }
    .nav-label {
        display: none;
    }
    .chamber-blob,
    .convergence-blob {
        margin: 0 20px;
    }
    .threshold-blob {
        width: 85vmin;
        height: 85vmin;
    }
}