/* =====================================================
   layer-2.quest -- Flat-design blockchain exploration
   ===================================================== */

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

html {
    scroll-behavior: auto; /* no smooth scroll -- flat design is direct */
}

body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.7;
    color: #1a1a18;
    overflow-x: hidden;
}

/* --- Typography --- */
.font-sans {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'MONO' 0, 'CASL' 0, 'wght' 700, 'slnt' 0, 'CRSV' 0;
}

.font-mono {
    font-family: 'Recursive', monospace;
    font-variation-settings: 'MONO' 1, 'CASL' 0, 'wght' 700, 'slnt' 0, 'CRSV' 0;
}

h1, h2 {
    font-family: 'Recursive', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 5vw, 60px);
    line-height: 1.15;
}

/* --- Section Base --- */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 6vw, 80px);
    position: relative;
    overflow: hidden;
    /* No transition on background -- hard-edge color swap */
}

.section-inner {
    max-width: 36em;
    width: 100%;
    margin: 0 auto;
}

/* --- Section Colors (hard-edge, no transitions) --- */
.section-teal {
    background-color: #3a8c7c;
    color: #f8f8f0;
}

.section-gold {
    background-color: #e8c84a;
    color: #1a1a18;
}

.section-rose {
    background-color: #c85a8c;
    color: #f8f8f0;
}

/* --- Opening Section --- */
#opening {
    min-height: 100vh;
}

.opening-inner {
    text-align: center;
}

#site-title {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'MONO' 0, 'CASL' 0.5, 'wght' 700, 'slnt' 0, 'CRSV' 1;
    font-size: clamp(36px, 7vw, 80px);
    color: #f8f8f0;
    text-align: center;
    margin-bottom: 48px;
}

#quest-banner {
    background-color: transparent;
    border: 3px solid #e8c84a;
    padding: 24px 32px;
    text-align: center;
    display: inline-block;
    /* Initial state: border-width 0, invisible */
    border-width: 0;
    opacity: 0;
}

#quest-banner.revealed {
    border-width: 3px;
    opacity: 1;
}

#quest-banner.filled {
    background-color: #e8c84a;
}

#quest-premise {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 2.5vw, 28px);
    color: #1a1a18;
    opacity: 0;
}

#quest-premise.visible {
    opacity: 1;
    transition: opacity 300ms ease;
}

/* --- Text Column --- */
.text-column {
    max-width: 36em;
    margin: 0 auto;
}

.text-column p {
    margin-bottom: 1.4em;
}

.text-column p:last-child {
    margin-bottom: 0;
}

/* --- Section Titles --- */
.section-title {
    margin-bottom: 32px;
    font-size: clamp(28px, 5vw, 60px);
}

/* --- Diagrams --- */
.diagram {
    margin: 48px auto 0;
    max-width: 600px;
    width: 100%;
}

.diagram-svg {
    width: 100%;
    height: auto;
    display: block;
}

.diagram-block,
.diagram-node,
.diagram-line {
    opacity: 0;
}

.diagram-block.visible {
    opacity: 1;
}

.diagram-node.visible {
    opacity: 1;
}

.diagram-line.visible {
    opacity: 1;
}

/* Stroke-dashoffset animation for lines */
.diagram-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.diagram-line.visible {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 400ms ease;
}

.diagram-label {
    font-family: 'Recursive', monospace;
    font-variation-settings: 'MONO' 1, 'CASL' 0, 'wght' 600, 'slnt' 0, 'CRSV' 0;
    font-size: 13px;
    opacity: 0;
}

.diagram-label.visible {
    opacity: 1;
}

/* --- Quest Log --- */
.quest-entries {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.quest-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background-color: rgba(248, 248, 240, 0.08);
    border-bottom: 1px solid rgba(248, 248, 240, 0.15);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
}

.quest-entry.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 300ms ease;
}

.quest-entry:last-child {
    border-bottom: none;
}

.quest-entry-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #e8c84a;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.quest-entry-ripple.animating {
    animation: ripple-expand 600ms ease-out forwards;
}

@keyframes ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.2;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

.quest-timestamp {
    font-family: 'Recursive', monospace;
    font-variation-settings: 'MONO' 1, 'CASL' 0, 'wght' 400, 'slnt' 0, 'CRSV' 0;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: rgba(248, 248, 240, 0.6);
    min-width: 48px;
}

.quest-name {
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(16px, 1.6vw, 19px);
    flex: 1;
}

/* Status indicators -- design says "small solid circle" */
.quest-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-complete {
    background-color: #4a9c6a;
}

.status-pending {
    background-color: #a0a0a0;
}

/* --- Closing Section --- */
#closing {
    min-height: 60vh;
}

.closing-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#closing-text {
    font-family: 'Recursive', sans-serif;
    font-variation-settings: 'MONO' 0, 'CASL' 0.3, 'wght' 700, 'slnt' 0, 'CRSV' 0;
    font-size: clamp(28px, 5vw, 60px);
    color: #1a1a18;
}

/* --- Section Content Enter Animation --- */
.section-content-enter {
    opacity: 0;
}

.section-content-enter.entered {
    opacity: 1;
    transition: opacity 300ms ease;
}

/* --- Ripple Overlay (section-level ripple on scroll entry) --- */
.section-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.section-ripple.animating {
    animation: section-ripple-expand 800ms ease-out forwards;
}

@keyframes section-ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.2;
    }
    100% {
        width: 200vmax;
        height: 200vmax;
        opacity: 0;
    }
}

/* Section ripple colors (triadic complement) */
.section-teal .section-ripple { background-color: #c85a8c; }
.section-gold .section-ripple { background-color: #3a8c7c; }
.section-rose .section-ripple { background-color: #e8c84a; }

/* --- No Gradients, No Shadows, No Border-Radius (Flat Design) --- */
/* Exception: status indicators and ripples are circles per design spec */

/* --- Responsive --- */
@media (max-width: 600px) {
    .section {
        padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 32px);
    }

    .quest-entry {
        gap: 10px;
        padding: 12px 14px;
    }

    .diagram {
        margin-top: 32px;
    }
}