/* sbom.study - Victorian Industrial Intelligence */
/* Palette:
   Burnt Sienna: #c4652a  (Primary accent)
   Tarnished Brass: #b8860b  (Decorative ornaments)
   Aged Gold: #c9a227  (HUD elements)
   Darkened Mahogany: #1a110d  (BG primary)
   Charred Walnut: #2a1f18  (BG secondary)
   Antique Parchment: #e8dcc0  (Text primary)
   Faded Vellum: #b8a88c  (Text secondary)
   Ember Glow: #d4721a  (Hover/active)
   Patina Copper: #7c6350  (Borders)
   Oxidized Vermillion: #a83218  (Alerts)
*/

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #1a110d;
    color: #e8dcc0;
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

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

h1 {
    font-family: 'Poiret One', sans-serif;
    font-weight: 400;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8dcc0;
    line-height: 1.1;
}

h2 {
    font-family: 'Poiret One', sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    letter-spacing: 0.08em;
    color: #e8dcc0;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.mono-accent {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    letter-spacing: 0.04em;
    color: #c9a227;
}

.text-emphasis {
    font-weight: 600;
    color: #c4652a;
}

.pull-quote {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    letter-spacing: 0.15em;
    color: #b8860b;
    text-align: center;
    padding: 2rem 1rem;
    border-top: 1px solid #7c6350;
    border-bottom: 1px solid #7c6350;
    margin: 2rem 0;
    line-height: 1.5;
}

/* ========================================
   HUD OVERLAY
   ======================================== */

.hud-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

.hud-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: #c9a227;
    border-style: solid;
    opacity: 0.2;
}

.hud-corner-tl {
    top: 40px;
    left: 40px;
    border-width: 1px 0 0 1px;
}

.hud-corner-tr {
    top: 40px;
    right: 40px;
    border-width: 1px 1px 0 0;
}

.hud-corner-bl {
    bottom: 40px;
    left: 40px;
    border-width: 0 0 1px 1px;
}

.hud-corner-br {
    bottom: 40px;
    right: 40px;
    border-width: 0 1px 1px 0;
}

.hud-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #d4721a;
    opacity: 0.08;
    animation: scanlineDrift 60s linear infinite;
}

@keyframes scanlineDrift {
    0% { top: 0; }
    100% { top: 100%; }
}

.hud-radar {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(201, 162, 39, 0.06);
    overflow: hidden;
}

.hud-radar-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(201, 162, 39, 0.06) 0deg,
        rgba(201, 162, 39, 0) 15deg,
        transparent 15deg
    );
    animation: radarSweep 8s linear infinite;
    transform-origin: center;
}

@keyframes radarSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hud-status {
    position: fixed;
    bottom: 30px;
    right: 40px;
    font-family: 'Poiret One', sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: #c9a227;
    opacity: 0.4;
}

.hud-status-text {
    transition: opacity 0.3s ease;
}

/* ========================================
   CARTOUCHE FRAME
   ======================================== */

.cartouche {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a110d;
    overflow: hidden;
}

.cartouche-border {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 1;
}

.corner-flourish {
    opacity: 0;
    transform-origin: center;
}

.corner-arc {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.border-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}

.dentil-pattern {
    opacity: 0;
}

.cartouche-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
}

.cartouche-title {
    margin-bottom: 1rem;
}

.cartouche-subtitle {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.15em;
    color: #b8860b;
    opacity: 0;
    transform: translateY(10px);
}

.cartouche-pulse {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    box-shadow: inset 0 0 0 0 rgba(212, 114, 26, 0);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

/* Cartouche animations */
.cartouche.animate .corner-flourish {
    animation: cornerFadeIn 600ms ease-out forwards;
}

.cartouche.animate .corner-flourish.corner-tl { animation-delay: 300ms; }
.cartouche.animate .corner-flourish.corner-tr { animation-delay: 300ms; }
.cartouche.animate .corner-flourish.corner-bl { animation-delay: 300ms; }
.cartouche.animate .corner-flourish.corner-br { animation-delay: 300ms; }

@keyframes cornerFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.cartouche.animate .corner-arc {
    animation: drawArc 800ms ease-in-out forwards;
    animation-delay: 300ms;
}

@keyframes drawArc {
    to { stroke-dashoffset: 0; }
}

.cartouche.animate .border-line {
    animation: drawBorder 800ms ease-in-out forwards;
    animation-delay: 900ms;
}

@keyframes drawBorder {
    to { stroke-dashoffset: 0; }
}

.cartouche.animate .dentil-pattern {
    animation: dentilFade 400ms ease-out forwards;
    animation-delay: 1700ms;
}

@keyframes dentilFade {
    to { opacity: 0.5; }
}

.cartouche.animate .cartouche-content {
    animation: contentFadeUp 500ms ease-out forwards;
    animation-delay: 1700ms;
}

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

.cartouche.animate .cartouche-subtitle {
    animation: subtitleFadeUp 500ms ease-out forwards;
    animation-delay: 1900ms;
}

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

.cartouche.animate .cartouche-pulse {
    animation: borderPulse 1.5s ease-in-out forwards;
    animation-delay: 2200ms;
}

@keyframes borderPulse {
    0% { box-shadow: inset 0 0 0 0 rgba(212, 114, 26, 0); opacity: 1; }
    50% { box-shadow: inset 0 0 4px 4px rgba(212, 114, 26, 0.08); opacity: 1; }
    100% { box-shadow: inset 0 0 0 0 rgba(212, 114, 26, 0); opacity: 0; }
}

/* ========================================
   MAIN LEDGER LAYOUT
   ======================================== */

.ledger {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 129px;
    display: grid;
    grid-template-columns: 1fr minmax(2px, 4px) 1fr;
    gap: 0;
}

.spine {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    display: flex;
    justify-content: center;
}

.spine-line {
    position: sticky;
    top: 0;
    height: 100vh;
}

.spine-stroke {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 0.1s linear;
}

/* ========================================
   SECTION PANELS
   ======================================== */

.ledger-section {
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: none;
    margin-bottom: 129px;
}

.ledger-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

.ledger-left {
    grid-column: 1;
    padding-right: 40px;
}

.ledger-right {
    grid-column: 3;
    padding-left: 40px;
}

.section-panel {
    position: relative;
    background-color: #2a1f18;
    padding: 2.5rem;
    overflow: visible;
}

.panel-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.panel-border rect {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

.ledger-section.revealed .panel-border rect {
    animation: drawPanelBorder 600ms ease-in-out forwards;
}

@keyframes drawPanelBorder {
    to { stroke-dashoffset: 0; }
}

.section-heading {
    opacity: 0;
    transform: translateY(15px);
}

.ledger-section.revealed .section-heading {
    animation: headingReveal 400ms ease-out forwards;
    animation-delay: 200ms;
}

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

.section-content > p,
.section-content > .inline-data,
.section-content > .pull-quote,
.section-content > .data-fragment,
.section-content > .tree-intro {
    opacity: 0;
}

.ledger-section.revealed .section-content > p,
.ledger-section.revealed .section-content > .inline-data,
.ledger-section.revealed .section-content > .pull-quote,
.ledger-section.revealed .section-content > .data-fragment,
.ledger-section.revealed .section-content > .tree-intro {
    animation: contentReveal 300ms ease-out forwards;
    animation-delay: 300ms;
}

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

.section-content p {
    margin-bottom: 1.2rem;
}

/* Circuit Trace Illumination */
.circuit-trace {
    transition: stroke 200ms ease, filter 200ms ease;
}

.ledger-section.revealed .circuit-trace {
    stroke: #d4721a;
    filter: drop-shadow(0 0 3px #d4721a);
}

.via-dot {
    transition: fill 200ms ease, transform 200ms ease;
}

.ledger-section.revealed .via-dot {
    fill: #d4721a;
    animation: viaPulse 300ms ease-out forwards;
}

@keyframes viaPulse {
    0% { r: 2; }
    50% { r: 2.6; }
    100% { r: 2; }
}

/* Spine Rosette */
.spine-rosette {
    position: absolute;
    right: -54px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    z-index: 5;
}

.ledger-right .spine-rosette {
    right: auto;
    left: -54px;
}

.ledger-section.revealed .spine-rosette {
    animation: rosetteBloom 400ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 100ms;
}

@keyframes rosetteBloom {
    to { transform: translateY(-50%) scale(1); }
}

/* ========================================
   INLINE DATA DISPLAY
   ======================================== */

.inline-data {
    margin-top: 1.5rem;
    border-top: 1px solid #7c6350;
    padding-top: 1rem;
}

.data-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(124, 99, 80, 0.3);
}

.data-label {
    color: #c4652a;
    white-space: nowrap;
}

.data-value {
    font-family: 'Lora', serif;
    font-size: 0.9em;
}

.faded {
    color: #b8a88c;
}

.data-fragment {
    text-align: center;
    padding: 1rem;
    border: 1px solid rgba(124, 99, 80, 0.4);
    margin-top: 1.5rem;
}

/* ========================================
   DEPENDENCY TREE
   ======================================== */

.section-panel-tree {
    padding-bottom: 3rem;
}

.tree-intro {
    color: #b8a88c;
    font-style: italic;
    margin-bottom: 2rem;
}

.dependency-tree {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: block;
}

.tree-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    fill: #e8dcc0;
    letter-spacing: 0.04em;
}

.tree-label-sm {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 7px;
    fill: #b8a88c;
    letter-spacing: 0.04em;
}

.tree-label-xs {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 6px;
    fill: #7c6350;
    letter-spacing: 0.03em;
}

.tree-node {
    opacity: 0;
    cursor: pointer;
}

.tree-stem {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.ledger-section.revealed .tree-root {
    animation: nodeBloom 400ms ease-out forwards;
    animation-delay: 600ms;
}

.ledger-section.revealed .tree-branch {
    animation: nodeBloom 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ledger-section.revealed .tree-branch:nth-child(5) { animation-delay: 1350ms; }
.ledger-section.revealed .tree-branch:nth-child(6) { animation-delay: 1500ms; }
.ledger-section.revealed .tree-branch:nth-child(7) { animation-delay: 1650ms; }

.ledger-section.revealed .tree-leaf {
    animation: nodeBloom 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ledger-section.revealed .tree-leaf:nth-child(10) { animation-delay: 2100ms; }
.ledger-section.revealed .tree-leaf:nth-child(11) { animation-delay: 2250ms; }
.ledger-section.revealed .tree-leaf:nth-child(12) { animation-delay: 2400ms; }
.ledger-section.revealed .tree-leaf:nth-child(13) { animation-delay: 2550ms; }

.ledger-section.revealed .tree-leaf-deep {
    animation: nodeBloom 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.ledger-section.revealed .tree-leaf-deep:nth-child(16) { animation-delay: 2850ms; }
.ledger-section.revealed .tree-leaf-deep:nth-child(17) { animation-delay: 3000ms; }

.ledger-section.revealed .tree-stem {
    animation: stemGrow 600ms ease-in-out forwards;
}

.ledger-section.revealed .tree-stem:nth-child(4) { animation-delay: 1000ms; }
.ledger-section.revealed .tree-stem:nth-child(5) { animation-delay: 1000ms; }
.ledger-section.revealed .tree-stem:nth-child(6) { animation-delay: 1000ms; }

.ledger-section.revealed .tree-stem:nth-child(9) { animation-delay: 1800ms; }
.ledger-section.revealed .tree-stem:nth-child(10) { animation-delay: 1800ms; }
.ledger-section.revealed .tree-stem:nth-child(13) { animation-delay: 1800ms; }
.ledger-section.revealed .tree-stem:nth-child(14) { animation-delay: 1800ms; }

.ledger-section.revealed .tree-stem:nth-child(17) { animation-delay: 2600ms; }
.ledger-section.revealed .tree-stem:nth-child(18) { animation-delay: 2600ms; }

@keyframes nodeBloom {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes stemGrow {
    to { stroke-dashoffset: 0; }
}

/* Tree Tooltip */
.tree-tooltip {
    position: absolute;
    background: #2a1f18;
    border: 1px solid #b8860b;
    padding: 0.6rem 0.8rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #e8dcc0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 20;
    min-width: 180px;
}

.tree-tooltip.visible {
    opacity: 1;
}

.tooltip-row {
    display: flex;
    gap: 0.8rem;
    padding: 0.15rem 0;
}

.tooltip-label {
    color: #7c6350;
    font-size: 9px;
    letter-spacing: 0.08em;
    min-width: 28px;
}

.tooltip-value {
    color: #c9a227;
}

/* ========================================
   FOOTER
   ======================================== */

.registry-footer {
    text-align: center;
    padding: 80px 20px 60px;
    border-top: 1px solid #7c6350;
    max-width: 800px;
    margin: 0 auto;
}

.footer-ornament {
    margin-bottom: 2rem;
}

.footer-ornament svg {
    display: block;
    margin: 0 auto;
}

.footer-text {
    font-family: 'Lora', serif;
    color: #b8a88c;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.footer-meta {
    color: #7c6350;
    font-size: 0.75rem;
}

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

@media (max-width: 900px) {
    .ledger {
        display: flex;
        flex-direction: column;
        padding: 60px 20px 80px;
    }

    .spine {
        display: none;
    }

    .ledger-left,
    .ledger-right {
        padding: 0;
    }

    .spine-rosette {
        display: none;
    }

    .ledger-section {
        margin-bottom: 80px;
    }

    .hud-radar {
        display: none;
    }

    .hud-corner {
        display: none;
    }
}

@media (max-width: 600px) {
    .section-panel {
        padding: 1.5rem;
    }

    .cartouche-border {
        top: 2%;
        left: 2%;
        width: 96%;
        height: 96%;
    }

    .data-row {
        flex-direction: column;
        gap: 0.2rem;
    }
}