/* judge.quest - Dark Academia Quest Journal */

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

body {
    font-family: 'Crimson Pro', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.9;
    color: #E8E0D0;
    background: #2A2218;
    overflow-x: hidden;
}

/* Chapter Indicator */
#chapter-indicator {
    position: fixed;
    top: 1.5rem;
    right: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
    color: #9A9080;
    z-index: 100;
}

/* Candle Glow */
.candle-glow {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 192, 120, 0.08), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.candle-glow:nth-child(1) { animation: flicker 2.5s ease-in-out infinite; }
.candle-glow:nth-child(2) { animation: flicker 3.2s ease-in-out infinite; }
.candle-glow:nth-child(3) { animation: flicker 4.1s ease-in-out infinite; }

@keyframes flicker {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Paper Texture Overlay */
.paper-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(200, 168, 104, 0.02) 3px,
        rgba(200, 168, 104, 0.02) 4px
    );
    pointer-events: none;
}

/* Annotations */
.annotation {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    color: #9A9080;
    margin-bottom: 0.75rem;
}

/* =============================================
   SECTION 1: The Summons Hero
   ============================================= */

#the-summons {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #2A2218;
    position: relative;
}

#wax-seal {
    margin-bottom: 2rem;
}

#wax-seal line, #wax-seal circle, #wax-seal path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 3s ease;
}

#wax-seal.drawing line, #wax-seal.drawing circle, #wax-seal.drawing path {
    stroke-dashoffset: 0;
}

.hero-text {
    text-align: center;
}

.chapter-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.06em;
    color: #C8A868;
    margin-bottom: 0.5rem;
}

.chapter-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.1rem;
    color: #9A9080;
}

.fade-word {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-word.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   Map Fragments
   ============================================= */

.map-fragment {
    height: 200px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contour {
    position: absolute;
    border: 1px solid #C8A868;
    opacity: 0.06;
}

.contour.c1 {
    width: 300px;
    height: 150px;
    border-radius: 40% 60% 50% 70% / 55% 45% 60% 40%;
}

.contour.c2 {
    width: 220px;
    height: 110px;
    border-radius: 55% 45% 60% 40% / 40% 60% 50% 70%;
}

.contour.c3 {
    width: 140px;
    height: 70px;
    border-radius: 50% 60% 40% 55% / 60% 40% 55% 50%;
}

/* =============================================
   Chapter Sections
   ============================================= */

.chapter {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    position: relative;
    background: #2A2218;
}

.chapter:nth-child(even) {
    background: #3A3028;
}

.chapter-numeral {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 120px;
    color: #C8A868;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.chapter-numeral.visible {
    opacity: 0.05;
}

.chapter-content {
    max-width: 600px;
    margin-left: 15%;
}

.chapter-content .chapter-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    margin-bottom: 1.5rem;
}

.chapter-content p {
    margin-bottom: 1.2rem;
    color: #E8E0D0;
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =============================================
   Verdict Gate
   ============================================= */

#verdict-gate {
    background: #2A2218;
}

.gate-corridor {
    clip-path: polygon(10% 0%, 90% 0%, 80% 100%, 20% 100%);
    background: #3A3028;
    padding: 6rem 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.gate-corridor .chapter-content {
    margin-left: 0;
    text-align: center;
}

.verdict-statement {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #8A3030;
    border-top: 1px solid #6A5840;
    border-bottom: 1px solid #6A5840;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* =============================================
   Footer
   ============================================= */

#site-footer {
    padding: 4rem 2rem;
    text-align: center;
    background: #2A2218;
}

.footer-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    color: #C8A868;
    margin-bottom: 0.5rem;
}

.footer-annotation {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 13px;
    color: #6A5840;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 768px) {
    .chapter-numeral { left: 2%; font-size: 80px; }
    .chapter-content { margin-left: 5%; }
    .gate-corridor { clip-path: polygon(5% 0%, 95% 0%, 90% 100%, 10% 100%); padding: 4rem 2rem; }
}