/* ============================================================
   JUDGE.QUEST - Pixel-Art Judicial Courthouse Theme
   ============================================================ */

:root {
    --color-cream: #F5ECD7;
    --color-parchment: #E8DCC8;
    --color-aged: #D4C5A9;
    --color-warm-tan: #C2B08A;
    --color-warm-brown: #9E8A6C;
    --color-olive: #8B7750;
    --color-dark-brown: #7A6543;
    --color-dark-umber: #5C4A2E;
    --color-very-dark: #4A3C28;
    --color-seal: #8B3A2A;
    --color-seal-dark: #6B2A1A;
    --color-wax: #C9A84C;
    --color-wax-dark: #A68B3C;
    --color-parchment-light: #EDE2C8;
    --color-warm-brown-light: #A89672;
    --color-very-dark-black: #2E2419;

    --font-display: "Cormorant Garamond", serif;
    --font-body: "EB Garamond", serif;
    --font-pixel: "Silkscreen", monospace;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-aged);
    color: var(--color-very-dark);
    overflow-x: hidden;
    line-height: 1.7;
}

/* ============================================================
   LAYER STRUCTURE (Z-axis depth composition)
   ============================================================ */

.perspective-container {
    width: 100%;
    perspective: 1000px;
    position: relative;
}

/* Layer 0: Marble Background (fixed) */
.layer-marble {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="2" height="2" x="0" y="0" fill="%23F5ECD7"/><rect width="2" height="2" x="2" y="0" fill="%23E8DCC8"/><rect width="2" height="2" x="0" y="2" fill="%23D4C5A9"/><rect width="2" height="2" x="2" y="2" fill="%23C2B08A"/></svg>');
    background-size: 4px 4px;
    background-repeat: repeat;
    pointer-events: none;
}

/* Layer 1: Architectural columns */
.layer-columns {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.column-left,
.column-right {
    position: absolute;
    width: 8vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    opacity: 0.15;
}

.column-left {
    left: 2vw;
}

.column-right {
    right: 2vw;
}

.column-flute {
    width: 1px;
    height: 60%;
    background-color: var(--color-warm-brown);
    margin: 0 2px;
}

.entablature {
    position: absolute;
    top: 35vh;
    width: 96vw;
    height: 2vh;
    background: linear-gradient(to bottom, var(--color-warm-brown-light), var(--color-aged));
    left: 2vw;
    opacity: 0.1;
    border-bottom: 1px solid var(--color-very-dark-black);
}

/* Layer 2: Content plane */
.layer-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

/* Layer 3: Foreground accents */
.layer-foreground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.accent-float {
    position: absolute;
    animation: gentle-float 6s ease-in-out infinite;
}

@keyframes gentle-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(10px);
    }
}

.foreground-quill svg,
.foreground-seal svg,
.foreground-drops svg,
.foreground-gavel svg {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1 {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-dark-umber);
    margin-bottom: 0.5em;
}

h2 {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-dark-brown);
    margin-bottom: 0.75em;
}

h3 {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.02em;
    color: var(--color-dark-brown);
    margin-bottom: 0.5em;
}

p {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-very-dark);
    margin-bottom: 1em;
}

/* ============================================================
   CHAMBER STRUCTURE (Full-viewport sections)
   ============================================================ */

.chamber {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem 2rem;
}

/* Chamber 1: The Portico */
.chamber-portico {
    background-color: var(--color-cream);
    position: relative;
    z-index: 5;
}

.courthouse-facade {
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.facade-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 2rem;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.portico-title {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-dark-umber);
    letter-spacing: 0.05em;
    min-height: 5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.portico-subtitle {
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: var(--color-warm-brown);
    font-style: italic;
    margin-bottom: 2rem;
}

.scroll-arrow {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
    animation: bounce 2s infinite;
}

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

/* Chamber 2: The Vestibule */
.chamber-vestibule {
    background-color: var(--color-parchment);
}

.parchment-panel {
    background-color: var(--color-cream);
    border: 2px solid var(--color-warm-brown);
    padding: 3rem;
    max-width: 700px;
    width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    position: relative;
}

.panel-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

.quill-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.quill-icon svg {
    width: 64px;
    height: 64px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.reveal-line {
    font-size: 1.125rem;
    color: var(--color-dark-umber);
    line-height: 1.8;
    margin: 0.5rem 0;
    opacity: 0;
    animation: reveal-text 0.8s ease-out forwards;
}

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

.reveal-line:nth-child(2) { animation-delay: 0.2s; }
.reveal-line:nth-child(3) { animation-delay: 0.4s; }
.reveal-line:nth-child(4) { animation-delay: 0.6s; }
.reveal-line:nth-child(5) { animation-delay: 0.8s; }
.reveal-line:nth-child(6) { animation-delay: 1s; }

.wax-seal {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.wax-seal svg {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2));
}

/* Chamber 3: The Gallery of Precedents */
.chamber-gallery {
    background-color: var(--color-aged);
    padding: 4rem 2rem;
}

.chamber-gallery .layer-content {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.gallery-panel {
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}

.panel-left,
.panel-center,
.panel-right {
    background-color: var(--color-cream);
    border: 2px solid var(--color-warm-brown);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Chamber 4: The Bench */
.chamber-bench {
    background-color: var(--color-parchment);
    padding: 4rem 2rem;
}

.panel-large {
    background-color: var(--color-cream);
    border: 3px solid var(--color-warm-brown);
    padding: 3.5rem;
    max-width: 900px;
    width: 100%;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.bench-illustration {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, var(--color-parchment-light) 0%, var(--color-aged) 100%);
    padding: 1rem;
    border-radius: 4px;
}

.bench-svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.scrollwork-border {
    margin: 2rem 0;
    border-top: 1px solid var(--color-warm-brown);
    border-bottom: 1px solid var(--color-warm-brown);
    padding: 1rem 0;
    text-align: center;
    font-size: 1.5rem;
    color: var(--color-warm-brown);
}

.scrollwork-border.meander::before {
    content: "~ ≈ ~ ≈ ~ ≈ ~";
}

.scrollwork-border.acanthus::before {
    content: "❦ ◆ ❦ ◆ ❦";
}

/* Chamber 5: The Deliberation Room */
.chamber-deliberation {
    background-color: var(--color-warm-tan);
    padding: 4rem 2rem;
}

.panel-deliberation {
    background-color: var(--color-aged);
    border: 3px solid var(--color-dark-brown);
    padding: 3rem;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.deliberation-text {
    font-size: 1.125rem;
    color: var(--color-very-dark);
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

/* Chamber 6: The Verdict */
.chamber-verdict {
    background-color: var(--color-cream);
    padding: 4rem 2rem;
}

.verdict-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.balance-scale {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.scale-svg {
    width: 150px;
    height: 150px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.scale-beam {
    transform-origin: center;
    animation: scale-sway 3s ease-in-out infinite;
}

@keyframes scale-sway {
    0%, 100% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(3deg);
    }
}

.chain-left,
.chain-right {
    animation: chain-sway 3s ease-in-out infinite;
}

.chain-left {
    animation-delay: 0s;
}

.chain-right {
    animation-delay: 1.5s;
}

@keyframes chain-sway {
    0%, 100% {
        stroke-dasharray: 0;
    }
    50% {
        stroke-dasharray: 2;
    }
}

.pan-left,
.pan-right {
    animation: pan-oscillate 3s ease-in-out infinite;
}

.pan-left {
    animation-delay: 0s;
}

.pan-right {
    animation-delay: 1.5s;
}

@keyframes pan-oscillate {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.verdict-text {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--color-dark-umber);
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 600px;
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .parchment-panel {
        padding: 2rem;
    }

    .panel-large {
        padding: 2rem;
    }

    .chamber {
        padding: 2rem 1rem;
        min-height: 80vh;
    }

    .panel-left,
    .panel-center,
    .panel-right {
        padding: 1.5rem;
        min-width: 100%;
        max-width: 100%;
    }

    .bench-svg {
        max-width: 250px;
    }

    .scale-svg {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1rem;
    }

    .parchment-panel {
        padding: 1.5rem;
    }

    .chamber {
        padding: 1.5rem 1rem;
        min-height: 60vh;
    }

    .portico-title {
        font-size: 2.5rem;
        min-height: auto;
    }

    .portico-subtitle {
        font-size: 1.25rem;
    }

    .facade-svg {
        max-width: 300px;
    }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.smooth-transition {
    transition: all 0.3s ease;
}

.pixelated {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}