/* ============================================================
   economics.quest - Stratigraphic Survey of Economic Thought
   ============================================================ */

/* === CSS Custom Properties === */
:root {
    /* Stratigraphic Palette */
    --surface-sand: #E8DCC8;
    --alluvial-ochre: #C4A265;
    --chalk-bone: #D5CCBA;
    --pressed-slate: #6B7B8A;
    --fossil-umber: #8A6E4E;
    --core-graphite: #2E2E2E;
    --bedrock-void: #131118;
    --specimen-rust: #A0522D;

    /* Typography Scale */
    --header-size: clamp(1.8rem, 4vw, 3.5rem);
    --body-size: clamp(1rem, 1.8vw, 1.2rem);
    --label-size: 0.7rem;
    --title-size: clamp(2.5rem, 5vw, 4.5rem);

    /* Layout */
    --column-left: 20%;
    --column-width: 65%;
    --margin-right-start: 87%;

    /* Leading (varies per stratum) */
    --stratum-leading: 1.7;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--surface-sand);
    color: var(--core-graphite);
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: var(--body-size);
    line-height: var(--stratum-leading);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* === Core-Sample Scale Bar === */
#scale-bar {
    position: fixed;
    left: 0;
    top: 0;
    width: 8px;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.scale-segment {
    flex: 1;
    transition: opacity 0.3s ease;
}

.scale-segment[data-stratum="topsoil"] { background-color: var(--surface-sand); }
.scale-segment[data-stratum="alluvium"] { background-color: var(--alluvial-ochre); }
.scale-segment[data-stratum="limestone"] { background-color: var(--chalk-bone); }
.scale-segment[data-stratum="shale"] { background-color: var(--pressed-slate); }
.scale-segment[data-stratum="sandstone"] { background-color: var(--fossil-umber); }
.scale-segment[data-stratum="basalt"] { background-color: var(--core-graphite); }
.scale-segment[data-stratum="bedrock"] { background-color: var(--bedrock-void); }

#scale-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-left: 8px solid var(--specimen-rust);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: top 0.15s ease-out;
    z-index: 101;
}

/* === Opening / Title Screen === */
#opening {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: var(--surface-sand);
    position: relative;
}

#opening .stratum-content {
    padding-left: var(--column-left);
    padding-top: 35vh;
}

#site-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: var(--title-size);
    color: var(--core-graphite);
    opacity: 0;
    transform: translateY(12px);
    animation: fadeInUp 800ms ease-out 500ms forwards;
}

#site-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: var(--pressed-slate);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 0.75rem;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeInUp 800ms ease-out 700ms forwards;
}

#drill-line {
    width: 1px;
    height: 0;
    background-color: var(--specimen-rust);
    margin-top: 2rem;
    animation: drillDown 1600ms ease-in-out 1200ms forwards;
}

#drill-chevron {
    margin-top: 0.5rem;
    opacity: 0;
    animation: fadeIn 400ms ease-out 2800ms forwards;
}

#drill-chevron svg {
    animation: pulseChevron 2s ease-in-out infinite;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes drillDown {
    to { height: 25vh; }
}

@keyframes pulseChevron {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* === Stratum Sections === */
.stratum {
    position: relative;
    min-height: 80vh;
    padding: 6rem 0;
    display: flex;
    gap: 0;
}

.stratum-content {
    margin-left: var(--column-left);
    width: var(--column-width);
    max-width: 800px;
    position: relative;
}

.stratum-header {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: var(--header-size);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.3rem;
}

.era-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--label-size);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 2.5rem;
}

.stratum-body p {
    margin-bottom: 1.25em;
    font-weight: 400;
}

.stratum-body p:last-child {
    margin-bottom: 0;
}

/* === Stratum-Specific Styles === */

/* Topsoil */
#topsoil {
    background-color: var(--surface-sand);
    min-height: 60vh;
}

#topsoil .stratum-header { color: var(--core-graphite); }
#topsoil .era-label { color: var(--pressed-slate); }
#topsoil .stratum-body { line-height: 1.7; color: var(--core-graphite); }

/* Alluvium - horizontal banding */
#alluvium {
    background: repeating-linear-gradient(
        180deg,
        var(--surface-sand) 0px,
        var(--surface-sand) 3px,
        rgba(196, 162, 101, 0.12) 3px,
        rgba(196, 162, 101, 0.12) 6px
    );
    background-color: var(--surface-sand);
}

#alluvium .stratum-header { color: var(--fossil-umber); }
#alluvium .era-label { color: var(--fossil-umber); opacity: 0.7; }
#alluvium .stratum-body { line-height: 1.6; color: #3a3226; }

/* Limestone - chalky */
#limestone {
    background-color: var(--chalk-bone);
}

#limestone .stratum-header { color: var(--core-graphite); }
#limestone .era-label { color: var(--pressed-slate); }
#limestone .stratum-body { line-height: 1.5; color: #2a2a2a; font-weight: 400; }

/* Shale - compressed, with lamination lines */
#shale {
    background-color: #4a5563;
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 18px,
        rgba(107, 123, 138, 0.2) 18px,
        rgba(107, 123, 138, 0.2) 18.5px
    );
}

#shale .stratum-header { color: #c8cdd3; }
#shale .era-label { color: var(--pressed-slate); }
#shale .stratum-body { line-height: 1.15; color: #c0c5cb; }
.stratum-compressed p { margin-bottom: 0.7em; }

/* Sandstone - warm, grainy */
#sandstone {
    background-color: var(--fossil-umber);
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='4' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}

#sandstone .stratum-header { color: #e0d0b8; }
#sandstone .era-label { color: var(--alluvial-ochre); }
#sandstone .stratum-body { line-height: 1.45; color: #e2d5c4; }
#sandstone .stratum-content { max-width: 850px; }

/* Basalt - dark, heavy */
#basalt {
    background-color: var(--core-graphite);
}

#basalt .stratum-header {
    color: #a8a095;
    font-weight: 700;
}
#basalt .era-label { color: var(--pressed-slate); }
#basalt .stratum-body { line-height: 1.35; color: #9a9088; }

/* Bedrock - deepest, near-black */
#bedrock {
    background-color: var(--bedrock-void);
    min-height: 100vh;
    padding-bottom: 12rem;
}

#bedrock .stratum-header-bedrock {
    color: #4a4440;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
}

#bedrock .era-label-bedrock {
    color: #3a3530;
}

.bedrock-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.5;
    color: #6a6055;
}

.bedrock-fragment {
    transition: opacity 0.6s ease, filter 0.6s ease;
}

.bedrock-fragment[data-erosion="0.1"] { opacity: 0.55; }
.bedrock-fragment[data-erosion="0.3"] { opacity: 0.48; filter: url(#erosion-light); }
.bedrock-fragment[data-erosion="0.5"] { opacity: 0.40; filter: url(#erosion-medium); }
.bedrock-fragment[data-erosion="0.7"] { opacity: 0.32; filter: url(#erosion-heavy); }
.bedrock-fragment[data-erosion="0.9"] { opacity: 0.22; filter: url(#erosion-severe); }

/* === Contact Lines === */
.contact-line {
    position: relative;
    height: 40px;
    overflow: visible;
    z-index: 10;
    margin: -20px 0;
}

.contact-line svg {
    width: 100%;
    height: 40px;
    display: block;
}

.contact-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1400ms ease-in-out;
}

.contact-path.dashed {
    stroke-dasharray: 8, 4;
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity 1400ms ease-in-out;
}

.contact-line.visible .contact-path {
    stroke-dashoffset: 0;
}

.contact-line.visible .contact-path.dashed {
    opacity: 1;
}

/* === Right-Margin Annotations === */
.margin-annotations {
    position: absolute;
    right: -32%;
    top: 6rem;
    width: 26%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.specimen-label {
    position: sticky;
    top: 30vh;
    border-left: 1px solid var(--specimen-rust);
    padding-left: 0.75rem;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity 300ms ease, transform 300ms ease;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.specimen-label.visible {
    opacity: 1;
    transform: translateX(0);
}

.label-date {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--specimen-rust);
}

.label-name {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--label-size);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 400;
}

.label-desc {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

/* Annotation colors per stratum */
#topsoil .specimen-label .label-name { color: var(--core-graphite); }
#topsoil .specimen-label .label-desc { color: var(--pressed-slate); }

#alluvium .specimen-label .label-name { color: var(--fossil-umber); }
#alluvium .specimen-label .label-desc { color: #6a5a42; }

#limestone .specimen-label .label-name { color: var(--core-graphite); }
#limestone .specimen-label .label-desc { color: var(--pressed-slate); }

#shale .specimen-label .label-name { color: #b0b8c0; }
#shale .specimen-label .label-desc { color: var(--pressed-slate); }
#shale .specimen-label .label-date { color: #8a7060; }

#sandstone .specimen-label .label-name { color: #e0d0b8; }
#sandstone .specimen-label .label-desc { color: var(--alluvial-ochre); }

#basalt .specimen-label .label-name { color: #807870; }
#basalt .specimen-label .label-desc { color: #605850; }
#basalt .specimen-label { border-left-color: #705840; }

#bedrock .specimen-label .label-name { color: #4a4440; }
#bedrock .specimen-label .label-desc { color: #3a3530; }
#bedrock .specimen-label .label-date { color: #5a4a3a; }
#bedrock .specimen-label { border-left-color: #4a3a2a; }

/* === Fossil Diagrams === */
.fossil-diagram {
    position: absolute;
    opacity: 0;
    transition: opacity 600ms ease;
    z-index: 5;
}

.fossil-diagram.visible {
    opacity: 0.7;
}

.fossil-islm {
    right: -28%;
    top: 55%;
}

.fossil-supply-demand {
    right: -28%;
    top: 40%;
}

.fossil-indifference {
    right: -25%;
    top: 70%;
}

.fossil-ammonite {
    right: -28%;
    top: 45%;
    opacity: 0;
}

.fossil-ammonite.visible {
    opacity: 0.4;
}

/* === Responsive === */
@media (max-width: 900px) {
    :root {
        --column-left: 5%;
        --column-width: 90%;
    }

    .margin-annotations {
        position: relative;
        right: auto;
        top: auto;
        width: 100%;
        margin-top: 2rem;
        padding-left: 5%;
    }

    .specimen-label {
        position: relative;
        top: auto;
    }

    .fossil-diagram {
        display: none;
    }

    #scale-bar {
        width: 5px;
    }

    #scale-marker {
        border-left-width: 5px;
    }
}

@media (min-width: 901px) and (max-width: 1200px) {
    .margin-annotations {
        right: -30%;
        width: 24%;
    }
}

/* === Selection === */
::selection {
    background: var(--specimen-rust);
    color: var(--surface-sand);
}

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 0px;
}

body {
    scrollbar-width: none;
}