/* ==========================================================
   mujun.io -- Blobitecture meets Old-World Leather Atelier
   Palette: Honeyed-Neutral
   Typography: Garamond-Classic
   ========================================================== */

/* --- CSS Custom Properties --- */
:root {
    /* Palette */
    --aged-cordovan: #2a1f18;
    --dark-umber: #3d2e22;
    --parchment-cream: #f0e6d4;
    --warm-ash: #b8a898;
    --burnished-brass: #b8955a;
    --honey-amber: #d4a84e;
    --oxblood: #6e2c2c;
    --shadow-leather: #1e150f;

    /* Typography */
    --font-display: 'EB Garamond', 'Georgia', serif;
    --font-body: 'Cormorant Garamond', 'Georgia', serif;
    --font-accent: 'DM Sans', 'Helvetica Neue', sans-serif;

    /* Cursor position (updated by JS) */
    --cursor-x: 50%;
    --cursor-y: 50%;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--aged-cordovan);
    color: var(--parchment-cream);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Cursor-follow spotlight overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(
        circle 250px at var(--cursor-x) var(--cursor-y),
        rgba(212, 168, 78, 0.08),
        transparent
    );
    pointer-events: none;
    z-index: 100;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Leather Background System --- */
.leather-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Leather grain via SVG feTurbulence filter */
.leather-grain {
    position: absolute;
    inset: 0;
    background-color: var(--warm-ash);
    filter: url(#leather-grain);
    opacity: 0.05;
}

/* Decorative stitch pattern along viewport edges */
.leather-stitch {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        circle 1px at center,
        rgba(184, 149, 90, 0.2) 0%,
        rgba(184, 149, 90, 0.2) 50%,
        transparent 50%
    );
    background-size: 40px 40px;
}

/* Emboss sheen layer */
.leather-emboss {
    position: absolute;
    inset: 0;
    background-color: rgba(184, 149, 90, 0.02);
    filter: url(#leather-emboss);
    opacity: 0.4;
}

/* --- Particle Canvas --- */
#particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* --- Entry Overlay --- */
#entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background-color: var(--aged-cordovan);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease-out;
}

#entry-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

.entry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.entry-line {
    width: 60vw;
    height: 1px;
    background-color: var(--burnished-brass);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.entry-line.animate {
    opacity: 0.4;
    transform: scaleX(1);
}

.entry-line.fade {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.entry-title {
    display: flex;
    align-items: baseline;
    gap: 0.15em;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.entry-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.entry-main {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    color: var(--parchment-cream);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.entry-tld {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: clamp(1.2rem, 2.8vw, 2.4rem);
    color: var(--warm-ash);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    transition-delay: 0.2s;
}

.entry-title.animate .entry-tld {
    opacity: 1;
}

/* --- Dashboard Chassis --- */
.dashboard {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 3vh auto;
    padding: clamp(12px, 2vw, 24px);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: minmax(50vh, auto) auto auto;
    gap: clamp(12px, 2vw, 24px);
    border-radius: 38% 8% 12% 42% / 15% 20% 25% 18%;
    background: linear-gradient(145deg, rgba(61, 46, 34, 0.4) 0%, rgba(42, 31, 24, 0.6) 100%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(184, 149, 90, 0.05);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* --- Content Modules (Shared) --- */
.module {
    position: relative;
    background: linear-gradient(145deg, var(--dark-umber) 0%, var(--aged-cordovan) 100%);
    padding: 0;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease;
    border: 1px solid var(--burnished-brass);
    border-radius: 20px;
    overflow: hidden;
}

.module.revealed {
    opacity: 1;
    transform: scale(1);
}

.module-inner {
    padding: clamp(1.5rem, 3vw, 3rem);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Brass rivet pseudo-elements on modules */
.module::before,
.module::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d4a84e, #8a6830);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 5;
    transition: box-shadow 0.4s ease;
    pointer-events: none;
}

.module::before {
    top: 10px;
    left: 10px;
}

.module::after {
    bottom: 10px;
    right: 10px;
}

.module:hover::before,
.module:hover::after {
    box-shadow: 0 0 8px 2px rgba(212, 168, 78, 0.5);
}

/* Additional rivets via inner pseudo-elements */
.module-inner::before,
.module-inner::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d4a84e, #8a6830);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 5;
    transition: box-shadow 0.4s ease;
    pointer-events: none;
}

.module-inner::before {
    top: 10px;
    right: 10px;
}

.module-inner::after {
    bottom: 10px;
    left: 10px;
}

.module:hover .module-inner::before,
.module:hover .module-inner::after {
    box-shadow: 0 0 8px 2px rgba(212, 168, 78, 0.5);
}

/* --- Grand Dial (Column 1, spans all rows) --- */
.grand-dial {
    grid-column: 1;
    grid-row: 1 / -1;
    border-radius: 40% 5% 5% 40% / 25% 8% 8% 25%;
    padding: 0;
}

.grand-dial.revealed {
    border-radius: 40% 5% 5% 40% / 25% 8% 8% 25%;
}

.grand-dial .module-inner {
    padding: clamp(2rem, 4vw, 4rem);
    justify-content: center;
    gap: 1.5em;
}

/* --- Gauge Bank (Columns 2-3, Row 1) --- */
.gauge {
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25);
}

.gauge-left {
    grid-column: 2;
    grid-row: 1;
    border-radius: 20px 38% 42% 20px / 18% 35% 30% 15%;
}

.gauge-left.revealed {
    border-radius: 20px 38% 42% 20px / 18% 35% 30% 15%;
}

.gauge-right {
    grid-column: 3;
    grid-row: 1;
    border-radius: 18px 42% 36% 22px / 22% 28% 38% 18%;
}

.gauge-right.revealed {
    border-radius: 18px 42% 36% 22px / 22% 28% 38% 18%;
}

/* --- Instrument Strip (Columns 2-3, Rows 2-3) --- */
.strip {
    border-radius: 16px;
    border: 1px solid var(--burnished-brass);
}

.strip-1 {
    grid-column: 2;
    grid-row: 2;
    border-radius: 32% 16px 16px 22% / 20% 16px 16px 28%;
}

.strip-1.revealed {
    border-radius: 32% 16px 16px 22% / 20% 16px 16px 28%;
}

.strip-2 {
    grid-column: 3;
    grid-row: 2;
    border-radius: 16px 28% 24% 16px / 16px 22% 30% 16px;
}

.strip-2.revealed {
    border-radius: 16px 28% 24% 16px / 16px 22% 30% 16px;
}

.strip-3 {
    grid-column: 2;
    grid-row: 3;
    border-radius: 22% 16px 26% 16px / 18% 16px 20% 16px;
}

.strip-3.revealed {
    border-radius: 22% 16px 26% 16px / 18% 16px 20% 16px;
}

.strip-4 {
    grid-column: 3;
    grid-row: 3;
    border-radius: 16px 24% 16px 30% / 16px 28% 16px 22%;
}

.strip-4.revealed {
    border-radius: 16px 24% 16px 30% / 16px 28% 16px 22%;
}

/* --- Typography --- */
.module-label {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--warm-ash);
    display: block;
}

.module-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 6.5vw, 5.8rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--parchment-cream);
}

.module-subheading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--parchment-cream);
}

.module-small-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--parchment-cream);
}

.module-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--parchment-cream);
}

.module-body em {
    font-style: italic;
    color: var(--honey-amber);
}

.module-body-sm {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.9rem, 1.3vw, 1.05rem);
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--warm-ash);
}

.module-quote {
    font-family: var(--font-body);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    line-height: 1.5;
    color: var(--honey-amber);
    border-left: 2px solid var(--burnished-brass);
    padding-left: 1.2em;
    margin: 0.5em 0;
}

/* Paragraph spacing */
.module-body + .module-body,
.module-body-sm + .module-body-sm {
    margin-top: 0.5em;
}

/* --- Module Proximity Glow (JS-driven) --- */
.module.proximity-active {
    border-color: var(--honey-amber);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .dashboard {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        border-radius: 24px;
        margin: 2vh 2vw;
    }

    .grand-dial {
        grid-column: 1 / -1;
        grid-row: auto;
        border-radius: 24px 24px 8px 8px;
    }

    .grand-dial.revealed {
        border-radius: 24px 24px 8px 8px;
    }

    .gauge-left {
        grid-column: 1;
        grid-row: auto;
        border-radius: 16px;
    }

    .gauge-left.revealed {
        border-radius: 20px 30% 30% 20px / 18% 25% 25% 18%;
    }

    .gauge-right {
        grid-column: 2;
        grid-row: auto;
        border-radius: 16px;
    }

    .gauge-right.revealed {
        border-radius: 18px 32% 28% 22px / 22% 20% 28% 18%;
    }

    .strip-1 { grid-column: 1; grid-row: auto; }
    .strip-2 { grid-column: 2; grid-row: auto; }
    .strip-3 { grid-column: 1; grid-row: auto; }
    .strip-4 { grid-column: 2; grid-row: auto; }
}

@media (max-width: 600px) {
    .dashboard {
        grid-template-columns: 1fr;
        margin: 1vh 3vw;
        border-radius: 18px;
    }

    .grand-dial,
    .gauge-left,
    .gauge-right,
    .strip-1,
    .strip-2,
    .strip-3,
    .strip-4 {
        grid-column: 1;
        grid-row: auto;
    }

    .module {
        border-radius: 16px;
    }

    .module.revealed {
        border-radius: 16px;
    }

    .entry-main {
        font-size: clamp(2.4rem, 10vw, 4rem);
    }
}

/* --- Selection --- */
::selection {
    background-color: var(--oxblood);
    color: var(--parchment-cream);
}

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

::-webkit-scrollbar-track {
    background: var(--shadow-leather);
}

::-webkit-scrollbar-thumb {
    background: var(--burnished-brass);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--honey-amber);
}