/* ============================================================
   eyes.cash — Anatomical Ledger Dissection
   ============================================================ */

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

:root {
    --ledger-paper: #f5f0e8;
    --carbon-blue: #1a1a3e;
    --stamp-red: #c4362a;
    --margin-rule: #d4a0a0;
    --sepia-ink: #4a3728;
    --transaction-green: #d8e8d0;
    --receipt-void: #b8b0c8;
    --watermark: #e8e0d8;
    --margin-width: 18%;
    --ease-institutional: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    font-size: 17px;
    scroll-behavior: auto;
}

body {
    background-color: var(--ledger-paper);
    color: var(--carbon-blue);
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-weight: 400;
    line-height: 1.85;
    overflow-x: hidden;
    position: relative;
}

/* --- WATERMARK LAYER --- */
#watermark {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 280px,
        rgba(0,0,0,0) 280px
    );
    opacity: 0.04;
    overflow: hidden;
}

#watermark::after {
    content: 'EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES EYES ';
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 300%;
    font-family: 'Playfair Display', serif;
    font-size: 20rem;
    font-weight: 700;
    color: var(--carbon-blue);
    line-height: 1.1;
    word-spacing: 6rem;
    letter-spacing: 0.3em;
    transform: rotate(-45deg);
    transform-origin: center center;
    white-space: normal;
    overflow: hidden;
}

/* --- MARGIN COLUMN --- */
#margin-column {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--margin-width);
    height: 100%;
    z-index: 2;
    pointer-events: none;
    border-right: 1px solid var(--margin-rule);
}

.margin-rule-line {
    position: absolute;
    top: 0;
    left: 70%;
    width: 1px;
    height: 100%;
    background: var(--margin-rule);
    transform: rotate(7deg);
    transform-origin: top center;
    opacity: 0.5;
}

/* Margin annotations (desktop: positioned in margin column via JS) */
.margin-annotation {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--margin-rule);
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.margin-annotation .annotation-mark {
    margin-right: 4px;
    color: var(--sepia-ink);
    opacity: 0.5;
}

/* Desktop: margin annotations hidden in flow, shown in margin via JS clone */
.mobile-annotation {
    display: none;
}

/* --- LEDGER HEADER --- */
#ledger-header {
    position: relative;
    z-index: 3;
    padding: 8vh 4vw 4vh;
    margin-left: var(--margin-width);
    text-align: center;
}

.ledger-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--carbon-blue);
    margin-bottom: 1.5rem;
}

.double-rule {
    width: 100%;
    height: 6px;
    border-top: 2px solid var(--carbon-blue);
    border-bottom: 2px solid var(--carbon-blue);
    margin: 1rem 0;
}

.single-rule {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--carbon-blue);
    margin: 0.8rem 0;
}

.header-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--carbon-blue);
}

.header-cell {
    flex: 1;
    text-align: center;
}

/* --- DATE STAMP --- */
#date-stamp {
    position: fixed;
    top: 12vh;
    right: 8vw;
    z-index: 10;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3vw, 3rem);
    font-weight: 700;
    color: var(--stamp-red);
    opacity: 0;
    transform: scale(1.1) rotate(-3deg);
    border: 3px solid var(--stamp-red);
    padding: 0.3em 0.6em;
    border-radius: 4px;
    pointer-events: none;
    transition: opacity 200ms var(--ease-institutional), transform 200ms var(--ease-institutional);
}

#date-stamp.stamp-visible {
    opacity: 0.35;
    transform: scale(1.0) rotate(-3deg);
}

/* --- MAIN CONTENT --- */
#content-field {
    position: relative;
    z-index: 3;
    margin-left: var(--margin-width);
    padding: 2rem 4vw 6rem;
}

/* --- DISSECTION SECTIONS --- */
.dissection-section {
    margin-bottom: 4rem;
    position: relative;
}

/* --- SPECIMEN LABELS --- */
.specimen-label {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transition: opacity 800ms var(--ease-institutional);
}

.specimen-label.revealed {
    opacity: 0.8;
}

.label-text {
    display: block;
    font-family: 'Cormorant SC', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--receipt-void);
    margin-bottom: 0.5rem;
}

.label-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--carbon-blue);
    line-height: 1.1;
}

.label-subtitle {
    display: block;
    font-family: 'Cormorant SC', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--sepia-ink);
    margin-top: 0.5rem;
}

/* --- ANATOMICAL PLATES --- */
.anatomical-plate {
    max-width: 65vw;
    margin: 0 0 3rem 0;
}

.engraving {
    width: 100%;
    height: auto;
}

/* SVG path drawing animation */
.draw-path line,
.draw-path path,
.draw-path circle,
.draw-path ellipse,
.draw-path rect {
    stroke-dasharray: var(--path-length, 2000);
    stroke-dashoffset: var(--path-length, 2000);
    transition: stroke-dashoffset 5s var(--ease-institutional);
}

.anatomical-plate.revealed .draw-path line,
.anatomical-plate.revealed .draw-path path,
.anatomical-plate.revealed .draw-path circle,
.anatomical-plate.revealed .draw-path ellipse,
.anatomical-plate.revealed .draw-path rect {
    stroke-dashoffset: 0;
}

/* --- LEDGER BLOCKS --- */
.ledger-block {
    max-width: 600px;
    margin: 0 0 2rem auto;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
}

.ledger-row {
    display: flex;
    border-bottom: 0.5px solid var(--margin-rule);
    padding: 4px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 50ms step-end;
}

.ledger-block.revealed .ledger-row {
    opacity: 1;
}

.ledger-header-row {
    font-weight: 700 !important;
    border-bottom: 1.5px solid var(--carbon-blue) !important;
    opacity: 1 !important;
}

.ledger-total-row {
    border-top: 1.5px solid var(--carbon-blue);
    border-bottom: 1.5px solid var(--carbon-blue) !important;
    font-weight: 700 !important;
}

.ledger-grand-total {
    font-size: 15px;
    background: var(--transaction-green);
}

.ledger-col {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.col-date {
    width: 60px;
    flex-shrink: 0;
}

.col-desc {
    flex: 1;
}

.col-debit,
.col-credit {
    width: 80px;
    flex-shrink: 0;
    text-align: right;
}

/* Ledger rulings background (24px grid) */
.ledger-table {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 23px,
        var(--margin-rule) 23px,
        var(--margin-rule) 24px
    );
    background-size: 100% 24px;
}

/* --- SECTION NARRATIVE --- */
.section-narrative {
    max-width: 540px;
    margin: 2rem auto 2rem 10%;
    font-family: 'Source Serif 4', 'Georgia', serif;
    font-size: 17px;
    line-height: 1.85;
    color: var(--carbon-blue);
}

/* --- RUBBER STAMPS --- */
.stamp-mark {
    position: absolute;
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--stamp-red);
    opacity: 0;
    pointer-events: none;
    border: 4px solid var(--stamp-red);
    padding: 0.15em 0.5em;
    border-radius: 6px;
    transform: scale(1.1) rotate(-2deg);
    transition: opacity 200ms var(--ease-institutional), transform 200ms var(--ease-institutional);
}

.stamp-mark.revealed {
    opacity: 0.35;
    transform: scale(1.0) rotate(-2deg);
}

.stamp-received {
    top: 60%;
    right: 5%;
    transform: scale(1.1) rotate(-3deg);
}
.stamp-received.revealed {
    transform: scale(1.0) rotate(-3deg);
}

.stamp-past-due {
    top: 55%;
    right: 8%;
    transform: scale(1.1) rotate(2deg);
}
.stamp-past-due.revealed {
    transform: scale(1.0) rotate(2deg);
}

.stamp-void {
    top: 60%;
    right: 4%;
    transform: scale(1.1) rotate(-4deg);
}
.stamp-void.revealed {
    transform: scale(1.0) rotate(-4deg);
}

.stamp-specimen {
    position: relative;
    display: inline-block;
    margin: 3rem auto;
    transform: scale(1.1) rotate(2deg);
}
.stamp-specimen.revealed {
    transform: scale(1.0) rotate(2deg);
}

/* --- RECEIPT STRIPS --- */
.receipt-strip {
    width: 220px;
    margin: 2rem auto;
    background: var(--ledger-paper);
    border: 1px dashed var(--margin-rule);
    padding: 12px 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    line-height: 1.6;
    color: var(--sepia-ink);
}

.receipt-content {
    display: flex;
    flex-direction: column;
}

.receipt-line {
    white-space: pre;
}

/* --- SECTION SPACERS --- */
.section-spacer {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.floating-detail {
    width: 120px;
    height: auto;
    opacity: 0.15;
}

/* --- DOCUMENT FOOTER --- */
#document-footer {
    position: relative;
    z-index: 3;
    padding: 4rem 4vw 8rem;
    margin-left: 0;
    text-align: center;
}

#document-footer .double-rule {
    max-width: 700px;
    margin: 1.5rem auto;
}

.final-total {
    max-width: 700px;
    margin: 2rem auto;
}

.final-total .ledger-row {
    opacity: 1;
}

.net-balance {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--carbon-blue);
    background: var(--transaction-green);
    display: inline-block;
    padding: 0.5rem 1.5rem;
    margin: 2rem 0;
}

.signature-line {
    display: flex;
    justify-content: center;
    gap: 6rem;
    margin: 4rem 0 3rem;
}

.signature-field {
    text-align: center;
}

.sig-line {
    width: 200px;
    height: 0;
    border-bottom: 1px solid var(--carbon-blue);
    margin-bottom: 0.5rem;
}

.sig-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--sepia-ink);
}

.document-end {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.end-mark {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--sepia-ink);
}

.end-domain {
    font-family: 'Cormorant SC', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--receipt-void);
}

/* --- RESPONSIVE: NARROW VIEWPORTS --- */
@media (max-width: 768px) {
    :root {
        --margin-width: 0%;
    }

    #margin-column {
        display: none;
    }

    #ledger-header {
        margin-left: 0;
        padding: 6vh 5vw 3vh;
    }

    #content-field {
        margin-left: 0;
        padding: 1.5rem 5vw 4rem;
    }

    .header-row {
        flex-direction: column;
        gap: 0.3rem;
    }

    .header-cell {
        text-align: left;
    }

    .anatomical-plate {
        max-width: 95vw;
    }

    .ledger-block {
        max-width: 100%;
    }

    .section-narrative {
        margin-left: 0;
        max-width: 100%;
    }

    .mobile-annotation {
        display: block;
        margin: 1rem 0;
        padding: 0.5rem 0.8rem;
        background: var(--watermark);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10px;
        color: var(--sepia-ink);
        opacity: 0.7;
    }

    .receipt-strip {
        width: 100%;
    }

    .signature-line {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .stamp-mark {
        font-size: 2rem;
    }

    #date-stamp {
        top: 8vh;
        right: 5vw;
    }
}