/* martialaw.quest - Street-style protest documentation aesthetic */
/* Palette: #f5e6d3 parchment, #b85c38 terracotta, #2c1810 burnt umber, #6b4423 leather, #d4a853 ochre, #1a0f07 charred, #e8cbb0 margin tint, #5c7a6b oxidized copper */

:root {
    --parchment: #f5e6d3;
    --terracotta: #b85c38;
    --burnt-umber: #2c1810;
    --leather: #6b4423;
    --ochre: #d4a853;
    --charred: #1a0f07;
    --margin-tint: #e8cbb0;
    --copper: #5c7a6b;
    --body-bg: #f0d9c0;
    --scroll-width: 100;
    --column-width: 680px;
}

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

html {
    scroll-behavior: smooth;
}
/* Body - Leather texture background */
body {
    background-color: var(--margin-tint);
    background-image:
        radial-gradient(ellipse at 20% 50%, #d4b896 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(240,217,192,0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(44,24,16,0.03) 0%, transparent 30%),
        linear-gradient(3deg, rgba(44,24,16,0.03) 0%, transparent 100%),
        linear-gradient(175deg, rgba(44,24,16,0.02) 0%, transparent 100%),
        repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 2px, rgba(44,24,16,0.015) 2px, rgba(44,24,16,0.015) 3px);
    font-family: "Source Serif 4", "Georgia", serif;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.72;
    color: var(--burnt-umber);
    overflow-x: hidden;
}

/* Progress Bar Navigation */
#progress-bar {
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 24px;
}

#progress-track {
    position: relative;
    width: 4px;
    height: 300px;
    background: rgba(184,92,56,0.2);
    margin: 0 auto;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

#progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--terracotta);
    border-radius: 2px;
    transition: height 0.3s ease;
}

.section-stamp {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--terracotta);
    background: var(--parchment);
    color: var(--leather);
    font-family: "Azeret Mono", monospace;
    font-size: 7px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.2s;
    filter: url(#rough-edges);
}

.section-stamp:hover {
    background: var(--terracotta);
    color: var(--parchment);
    transform: scale(1.2);
}
/* ACT 1 - Preamble */
.preamble {
    width: 100vw;
    height: 100vh;
    background: var(--charred);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.preamble-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.martial-text {
    font-family: "Anybody", sans-serif;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 800;
    color: var(--terracotta);
    font-variation-settings: "wdth" 150;
    text-shadow: 2px 2px 0px rgba(44,24,16,0.5);
    letter-spacing: 0.05em;
    animation: compress-martial 3s ease-in-out forwards;
}

.law-text {
    font-family: "Anybody", sans-serif;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 800;
    color: var(--terracotta);
    font-variation-settings: "wdth" 50;
    text-shadow: 2px 2px 0px rgba(44,24,16,0.5);
    letter-spacing: 0.05em;
    animation: expand-law 3s ease-in-out forwards;
}

@keyframes compress-martial {
    0% { font-variation-settings: "wdth" 150; }
    100% { font-variation-settings: "wdth" 60; }
}

@keyframes expand-law {
    0% { font-variation-settings: "wdth" 50; }
    100% { font-variation-settings: "wdth" 140; }
}

.preamble-line {
    width: 200px;
    height: 1px;
    background: var(--ochre);
    margin: 1.5rem auto;
    transform: scaleX(0);
    transform-origin: left;
    animation: draw-line 2s ease-out 3s forwards;
}

@keyframes draw-line {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.preamble-quest {
    font-family: "Azeret Mono", monospace;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--parchment);
    opacity: 0;
    animation: fade-in 1.5s ease 4.5s forwards;
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
/* Proclamation Column - Single column layout */
.proclamation-column {
    max-width: var(--column-width);
    margin: 0 auto;
    padding: 4rem 2rem;
    position: relative;
    background: var(--parchment);
    box-shadow: 0 0 60px rgba(26,15,7,0.1);
}

.column-content {
    position: relative;
}

/* Article blocks */
.article-block {
    margin-bottom: 48px;
    position: relative;
}

.step-label {
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--leather);
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--terracotta);
    margin-bottom: 1rem;
}

.article-headline {
    font-family: "Anybody", sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 800;
    font-variation-settings: "wdth" var(--scroll-width, 100);
    color: var(--burnt-umber);
    text-shadow: 1px 1px 0px rgba(184,92,56,0.3);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.body-text {
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 400;
    color: #3d2b1f;
    margin-bottom: 1.25rem;
}

/* Margin annotations */
.margin-annotation {
    position: absolute;
    left: -80px;
    width: 70px;
    font-family: "Caveat", cursive;
    font-size: 14px;
    color: rgba(184,92,56,0.7);
    transform: rotate(-2deg);
    line-height: 1.3;
    pointer-events: none;
}

.margin-annotation.annotation-right {
    left: auto;
    right: -80px;
    transform: rotate(1deg);
}
/* Stamp marks */
.stamp-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem auto;
    filter: url(#rough-edges);
}

.stamp-circular {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--terracotta);
    box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px var(--terracotta);
}

.stamp-rectangular {
    width: 120px;
    height: 40px;
    border: 1.5px solid var(--terracotta);
}

.stamp-text {
    font-family: "Azeret Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--terracotta);
    font-weight: 600;
}

.archive-stamp {
    opacity: 0.6;
}

/* Torn Edge Dividers */
.torn-edge {
    height: 40px;
    position: relative;
    background: var(--margin-tint);
}

.torn-edge-1 {
    clip-path: polygon(0% 0%, 2% 60%, 5% 20%, 8% 70%, 12% 10%, 16% 55%, 20% 25%, 24% 65%, 28% 15%, 32% 50%, 36% 30%, 40% 70%, 44% 5%, 48% 45%, 52% 20%, 56% 60%, 60% 10%, 64% 55%, 68% 30%, 72% 65%, 76% 15%, 80% 50%, 84% 25%, 88% 60%, 92% 10%, 96% 55%, 100% 0%, 100% 100%, 0% 100%);
}

.torn-edge-2 {
    clip-path: polygon(0% 100%, 3% 40%, 7% 75%, 11% 30%, 15% 60%, 19% 20%, 23% 55%, 27% 35%, 31% 70%, 35% 25%, 39% 50%, 43% 15%, 47% 65%, 51% 30%, 55% 55%, 59% 10%, 63% 45%, 67% 25%, 71% 60%, 75% 15%, 79% 50%, 83% 35%, 87% 70%, 91% 20%, 95% 55%, 100% 100%, 100% 0%, 0% 0%);
}

.torn-edge-3 {
    clip-path: polygon(0% 0%, 4% 50%, 8% 15%, 12% 65%, 16% 25%, 20% 55%, 24% 10%, 28% 60%, 32% 30%, 36% 70%, 40% 20%, 44% 50%, 48% 5%, 52% 55%, 56% 25%, 60% 65%, 64% 15%, 68% 50%, 72% 35%, 76% 60%, 80% 10%, 84% 55%, 88% 30%, 92% 65%, 96% 20%, 100% 0%, 100% 100%, 0% 100%);
}

.torn-edge-4 {
    clip-path: polygon(0% 100%, 3% 35%, 7% 70%, 11% 25%, 15% 55%, 19% 15%, 23% 60%, 27% 30%, 31% 65%, 35% 20%, 39% 55%, 43% 10%, 47% 45%, 51% 25%, 55% 60%, 59% 15%, 63% 50%, 67% 30%, 71% 65%, 75% 20%, 79% 55%, 83% 40%, 87% 65%, 91% 25%, 95% 50%, 100% 100%, 100% 0%, 0% 0%);
}

.torn-edge-5 {
    clip-path: polygon(0% 0%, 3% 55%, 6% 20%, 10% 60%, 14% 10%, 18% 50%, 22% 25%, 26% 65%, 30% 15%, 34% 55%, 38% 30%, 42% 70%, 46% 10%, 50% 50%, 54% 20%, 58% 60%, 62% 5%, 66% 55%, 70% 25%, 74% 65%, 78% 15%, 82% 50%, 86% 30%, 90% 60%, 94% 15%, 98% 55%, 100% 0%, 100% 100%, 0% 100%);
}

.torn-edge-6 {
    clip-path: polygon(0% 100%, 4% 40%, 8% 65%, 12% 20%, 16% 55%, 20% 30%, 24% 60%, 28% 15%, 32% 50%, 36% 25%, 40% 65%, 44% 10%, 48% 55%, 52% 30%, 56% 60%, 60% 15%, 64% 50%, 68% 35%, 72% 65%, 76% 20%, 80% 55%, 84% 30%, 88% 60%, 92% 15%, 96% 50%, 100% 100%, 100% 0%, 0% 0%);
}

.torn-edge-final {
    height: 60px;
    clip-path: polygon(0% 0%, 3% 50%, 7% 15%, 11% 60%, 15% 25%, 19% 55%, 23% 10%, 27% 50%, 31% 30%, 35% 65%, 39% 15%, 43% 55%, 47% 25%, 51% 60%, 55% 10%, 59% 50%, 63% 20%, 67% 55%, 71% 30%, 75% 65%, 79% 15%, 83% 50%, 87% 25%, 91% 60%, 95% 10%, 100% 0%, 100% 100%, 0% 100%);
    background: var(--charred);
}
/* Proclamation Zones - Full viewport dark sections */
.proclamation-zone {
    width: 100vw;
    min-height: 100vh;
    background: var(--charred);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.proclamation-zone-content {
    max-width: 90vw;
    text-align: center;
    position: relative;
    z-index: 2;
}

.proclamation-quote {
    font-family: "Anybody", sans-serif;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 800;
    font-variation-settings: "wdth" var(--scroll-width, 100);
    color: var(--parchment);
    line-height: 1.15;
    padding: 2rem;
}

/* Leaf Silhouettes */
.leaf-silhouette {
    position: absolute;
    width: 120px;
    height: 180px;
    opacity: 0.08;
    pointer-events: none;
    transition: transform 2s ease;
}

.leaf-1 {
    top: 15%;
    left: 8%;
    background: var(--terracotta);
    clip-path: path("M60 0 C80 30, 110 60, 100 90 C90 120, 80 150, 60 180 C40 150, 30 120, 20 90 C10 60, 40 30, 60 0");
}

.leaf-2 {
    bottom: 20%;
    right: 10%;
    background: var(--terracotta);
    clip-path: path("M60 0 C90 20, 115 50, 110 80 C105 110, 85 145, 60 180 C35 145, 15 110, 10 80 C5 50, 30 20, 60 0");
    transform: rotate(25deg);
}

.leaf-3 {
    top: 25%;
    right: 12%;
    background: var(--terracotta);
    clip-path: path("M60 0 C75 25, 100 55, 95 85 C90 115, 75 145, 60 180 C45 145, 30 115, 25 85 C20 55, 45 25, 60 0");
    transform: rotate(-15deg);
}

.leaf-4 {
    bottom: 15%;
    left: 6%;
    background: var(--terracotta);
    clip-path: path("M60 0 C85 35, 105 65, 100 95 C95 125, 80 150, 60 180 C40 150, 25 125, 20 95 C15 65, 35 35, 60 0");
    transform: rotate(10deg);
}

.leaf-5 {
    top: 10%;
    left: 15%;
    background: var(--terracotta);
    clip-path: path("M60 0 C80 30, 110 60, 100 90 C90 120, 80 150, 60 180 C40 150, 30 120, 20 90 C10 60, 40 30, 60 0");
    transform: rotate(-30deg);
}

.leaf-6 {
    bottom: 10%;
    right: 8%;
    background: var(--terracotta);
    clip-path: path("M60 0 C90 20, 115 50, 110 80 C105 110, 85 145, 60 180 C35 145, 15 110, 10 80 C5 50, 30 20, 60 0");
    transform: rotate(20deg);
}
/* Archive Section */
.archive-section {
    max-width: 520px;
    margin: 0 auto;
    padding: 4rem 2rem;
    position: relative;
    background: var(--parchment);
    box-shadow: 0 0 60px rgba(26,15,7,0.15);
}

.archive-content {
    position: relative;
}

.archive-headline {
    font-size: clamp(1.3rem, 2.5vw, 2rem);
}

.archive-text {
    font-size: 0.9rem;
}

/* Finale */
.finale-section {
    background: var(--charred);
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.final-text {
    font-family: "Caveat", cursive;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--parchment);
    text-align: center;
    opacity: 1;
    transition: opacity 3s ease;
}

.final-text.fading {
    opacity: 0.3;
}

/* Shake Error Animation */
@keyframes shake-error {
    0% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(2px); }
    45% { transform: translateX(-1px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.shake-active {
    animation: shake-error 200ms ease-out;
}

/* Annotation flash to copper on shake */
.annotation-flash {
    color: var(--copper) !important;
    transition: color 0.3s ease;
}

.annotation-flash-return {
    color: rgba(184,92,56,0.7);
    transition: color 1.5s ease;
}
/* Leaf drift animation */
@keyframes leaf-drift {
    0% { transform: rotate(var(--leaf-rot, 0deg)) translateY(0px); }
    50% { transform: rotate(calc(var(--leaf-rot, 0deg) + 0.5deg)) translateY(-3px); }
    100% { transform: rotate(var(--leaf-rot, 0deg)) translateY(0px); }
}

.leaf-drifting {
    animation: leaf-drift 2s ease-in-out infinite;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .margin-annotation {
        position: relative;
        left: 0;
        right: 0;
        width: auto;
        top: auto !important;
        display: block;
        margin: 0.75rem 0;
        padding-left: 1rem;
        border-left: 2px solid rgba(184,92,56,0.3);
    }

    .margin-annotation.annotation-right {
        left: 0;
        right: 0;
    }

    .proclamation-column {
        padding: 3rem 1.5rem;
    }

    .archive-section {
        padding: 3rem 1.5rem;
    }

    #progress-bar {
        display: none;
    }
}

@media (max-width: 480px) {
    .proclamation-column {
        padding: 2rem 1rem;
    }

    .archive-section {
        padding: 2rem 1rem;
    }
}

/* Scroll-driven background darkening for margins */
.margin-darkening {
    background-color: rgba(26,15,7,0.05);
    transition: background-color 0.5s ease;
}