/* mujun.dev - Cottagecore meets developer contradiction */
/* Fonts: Fraunces (display), Lora (body), Recursive (code) */

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

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

body.mujun {
    font-family: 'Lora', serif;
    font-size: 17px;
    line-height: 1.75;
    letter-spacing: 0.005em;
    color: #4e5058;
    background-color: #e8e9ed;
    overflow-x: hidden;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ===== GRAIN OVERLAY ===== */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.03;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ===== BOTANICAL SILHOUETTES ===== */
.botanical {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    height: 70vh;
}

.botanical--1 {
    left: 8%;
    top: 10%;
    width: 120px;
}

.botanical--2 {
    right: 12%;
    top: 20%;
    width: 100px;
}

/* ===== FRAME SECTIONS ===== */
.frame {
    position: relative;
    min-height: 100vh;
    display: grid;
    overflow: hidden;
}

.frame--hero {
    grid-template-columns: 55fr 10px 45fr;
}

.frame--spear {
    grid-template-columns: 65fr 10px 35fr;
}

.frame--shield {
    grid-template-columns: 35fr 10px 65fr;
}

.frame--paradox,
.frame--coda {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== PANELS ===== */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem;
    overflow: hidden;
}

.panel--garden {
    background-color: #f0ede6;
}

.panel--workshop {
    background-color: #e8e9ed;
}

/* ===== DIVIDER LINE ===== */
.divider-line {
    width: 10px;
    height: 100%;
    position: relative;
    z-index: 10;
}

.divider-path {
    vector-effect: non-scaling-stroke;
}

/* ===== BOKEH CIRCLES ===== */
.bokeh-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    will-change: transform;
}

.bokeh-circle--1 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    opacity: 0.15;
    top: 15%;
    left: 20%;
    animation: drift1 12s ease-in-out infinite alternate;
}

.bokeh-circle--2 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, #a3a0b8 0%, transparent 70%);
    opacity: 0.12;
    top: 50%;
    left: 55%;
    animation: drift2 14s ease-in-out infinite alternate;
    animation-delay: -3s;
}

.bokeh-circle--3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    opacity: 0.08;
    top: 60%;
    left: 10%;
    animation: drift3 10s ease-in-out infinite alternate;
    animation-delay: -5s;
}

.bokeh-circle--4 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #a3a0b8 0%, transparent 70%);
    opacity: 0.1;
    top: 25%;
    left: 70%;
    animation: drift1 15s ease-in-out infinite alternate;
    animation-delay: -7s;
}

.bokeh-circle--5 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    opacity: 0.06;
    top: 80%;
    left: 40%;
    animation: drift2 11s ease-in-out infinite alternate;
    animation-delay: -2s;
}

/* Spear section bokeh */
.bokeh-circle--6 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    opacity: 0.18;
    top: 20%;
    left: 30%;
    animation: drift3 13s ease-in-out infinite alternate;
}

.bokeh-circle--7 {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, #a3a0b8 0%, transparent 70%);
    opacity: 0.1;
    top: 55%;
    left: 60%;
    animation: drift1 11s ease-in-out infinite alternate;
    animation-delay: -4s;
}

.bokeh-circle--8 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    opacity: 0.07;
    top: 70%;
    left: 15%;
    animation: drift2 14s ease-in-out infinite alternate;
    animation-delay: -6s;
}

/* Paradox section bokeh */
.bokeh-circle--9 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    opacity: 0.1;
    top: 30%;
    left: 20%;
    animation: drift1 12s ease-in-out infinite alternate;
    animation-delay: -1s;
}

.bokeh-circle--10 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #a3a0b8 0%, transparent 70%);
    opacity: 0.08;
    top: 60%;
    right: 20%;
    animation: drift3 15s ease-in-out infinite alternate;
    animation-delay: -8s;
}

/* ===== BOKEH DRIFT ANIMATIONS ===== */
@keyframes drift1 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(15px, -10px); }
}

@keyframes drift2 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-12px, 18px); }
}

@keyframes drift3 {
    0% { transform: translate(0, 0); }
    100% { transform: translate(10px, 15px); }
}

/* ===== SINGLE BOKEH (Shield section) ===== */
.bokeh-single {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    filter: blur(25px);
    opacity: 0.15;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 6s ease-in-out infinite alternate;
}

@keyframes pulse {
    0% { opacity: 0.12; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0.18; transform: translate(-50%, -50%) scale(1.05); }
}

/* ===== HERO TYPOGRAPHY ===== */
.hero-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.5rem, 8vw, 7rem);
    color: #3b3d45;
    line-height: 1.1;
    margin-bottom: 1rem;
    font-variation-settings: 'WONK' 1;
}

.char {
    display: inline-block;
    font-variation-settings: 'wght' 100, 'WONK' 1;
    transition: font-variation-settings 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 0.08s + 0.5s);
}

.frame--hero.active .char {
    font-variation-settings: 'wght' 900, 'WONK' 1;
}

.hero-sub {
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    color: #7a7d88;
    font-style: italic;
    letter-spacing: 0.02em;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease 1.2s, transform 1s ease 1.2s;
}

.frame--hero.active .hero-sub {
    opacity: 1;
    transform: translateY(0);
}

/* ===== MARBLE CHIPS ===== */
.marble-chip {
    position: absolute;
    z-index: 5;
    cursor: default;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.marble-surface {
    background: #e8e9ed;
    filter: url(#marble-filter);
    box-shadow: 0 4px 16px rgba(30, 32, 40, 0.12), 0 1px 4px rgba(30, 32, 40, 0.08);
}

.marble-chip--1 {
    width: 60px;
    height: 90px;
    top: 25%;
    right: 15%;
    transform: rotate(-8deg);
}

.marble-chip--1 .marble-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8e9ed 40%, #c2a8a0 50%, #e8e9ed 60%, #9a9ba3 70%, #e8e9ed 80%);
    filter: url(#marble-filter);
}

.marble-chip--2 {
    width: 50px;
    height: 70px;
    top: 55%;
    right: 25%;
    transform: rotate(12deg);
}

.marble-chip--2 .marble-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(200deg, #e8e9ed 30%, #9a9ba3 45%, #e8e9ed 55%, #c2a8a0 65%, #e8e9ed 80%);
    filter: url(#marble-filter-2);
}

.marble-chip--3 {
    width: 45px;
    height: 65px;
    top: 40%;
    right: 8%;
    transform: rotate(-3deg);
}

.marble-chip--3 .marble-surface {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #e8e9ed 35%, #c2a8a0 48%, #e8e9ed 58%, #9a9ba3 72%, #e8e9ed 85%);
    filter: url(#marble-filter);
}

/* ===== PROSE TEXT ===== */
.prose {
    font-family: 'Lora', serif;
    font-size: 17px;
    line-height: 1.75;
    color: #4e5058;
    max-width: 420px;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.frame.active .prose {
    opacity: 1;
    transform: translateY(0);
}

.prose--accent {
    font-style: italic;
    color: #8a9678;
    font-size: 1.15rem;
    transition-delay: 0.3s;
}

.prose--workshop {
    color: #4e5058;
}

/* ===== TYPE SPECIMENS (Shield section) ===== */
.type-specimens {
    max-width: 500px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.frame--shield.active .type-specimens {
    opacity: 1;
    transform: translateY(0);
}

.specimen {
    margin-bottom: 1.5rem;
}

.specimen-label {
    font-family: 'Recursive', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9a9ba3;
    display: block;
    margin-bottom: 0.25rem;
    font-variation-settings: 'CASL' 0.5, 'MONO' 1;
}

.specimen-sample {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    color: #3b3d45;
    display: block;
    line-height: 1.2;
}

.ruled-line {
    border: none;
    border-top: 1px solid #c8cad2;
    margin: 2rem 0;
    max-width: 400px;
}

.code-fragment {
    font-family: 'Recursive', monospace;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: #7a7d88;
    line-height: 1.8;
    font-variation-settings: 'CASL' 0.5, 'MONO' 1;
}

.code-fragment code {
    display: block;
    font-family: inherit;
}

/* ===== PARADOX SECTION ===== */
.frame--paradox {
    min-height: 100vh;
    background: linear-gradient(135deg, #f0ede6 0%, #e8e9ed 50%, #1e2028 100%);
}

.unified-field {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bokeh-field--paradox {
    z-index: 1;
}

/* Marble scatter chips */
.marble-scatter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 2;
}

.scatter-chip {
    position: absolute;
    width: 30px;
    height: 45px;
    background: linear-gradient(135deg, #e8e9ed 30%, #c2a8a0 50%, #e8e9ed 70%);
    box-shadow: 0 2px 8px rgba(30, 32, 40, 0.15);
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.5s ease;
    opacity: 0.6;
}

.scatter-chip--1 { transform: translate(-2px, -100px) rotate(5deg); }
.scatter-chip--2 { transform: translate(3px, -60px) rotate(-8deg); }
.scatter-chip--3 { transform: translate(-1px, -20px) rotate(3deg); }
.scatter-chip--4 { transform: translate(2px, 20px) rotate(-5deg); }
.scatter-chip--5 { transform: translate(-3px, 60px) rotate(10deg); }
.scatter-chip--6 { transform: translate(1px, 100px) rotate(-3deg); }
.scatter-chip--7 { transform: translate(-2px, 140px) rotate(7deg); }
.scatter-chip--8 { transform: translate(3px, 180px) rotate(-12deg); }

.frame--paradox.active .scatter-chip--1 { transform: translate(-180px, -220px) rotate(45deg); opacity: 0; }
.frame--paradox.active .scatter-chip--2 { transform: translate(160px, -180px) rotate(-60deg); opacity: 0; }
.frame--paradox.active .scatter-chip--3 { transform: translate(-220px, -40px) rotate(30deg); opacity: 0; }
.frame--paradox.active .scatter-chip--4 { transform: translate(200px, 30px) rotate(-45deg); opacity: 0; }
.frame--paradox.active .scatter-chip--5 { transform: translate(-150px, 160px) rotate(55deg); opacity: 0; }
.frame--paradox.active .scatter-chip--6 { transform: translate(190px, 200px) rotate(-35deg); opacity: 0; }
.frame--paradox.active .scatter-chip--7 { transform: translate(-250px, 100px) rotate(70deg); opacity: 0; }
.frame--paradox.active .scatter-chip--8 { transform: translate(230px, -100px) rotate(-80deg); opacity: 0; }

.paradox-text {
    position: relative;
    z-index: 10;
    font-family: 'Fraunces', serif;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-variation-settings: 'wght' 300, 'WONK' 1;
    color: #3b3d45;
    text-align: center;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease 0.5s, transform 1.2s ease 0.5s;
}

.frame--paradox.active .paradox-text {
    opacity: 1;
    transform: translateY(0);
}

.paradox-whisper {
    display: block;
    margin-top: 1.5rem;
    font-variation-settings: 'wght' 100, 'WONK' 1;
    font-size: clamp(1.2rem, 3vw, 2.2rem);
    color: #7a7d88;
    opacity: 0.7;
}

/* ===== CODA SECTION ===== */
.frame--coda {
    min-height: 50vh;
    background-color: #1e2028;
    position: relative;
    overflow: hidden;
}

.coda-bokeh {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, #d4c5a0 0%, transparent 70%);
    filter: blur(30px);
    opacity: 0.08;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-30px);
    animation: codaPulse 8s ease-in-out infinite alternate;
}

@keyframes codaPulse {
    0% { opacity: 0.06; transform: translate(-50%, -50%) translateY(-30px) scale(0.95); }
    100% { opacity: 0.12; transform: translate(-50%, -50%) translateY(-30px) scale(1.08); }
}

.coda-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2rem, 6vw, 5rem);
    font-variation-settings: 'wght' 400, 'WONK' 1;
    color: #c8cad2;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.frame--coda.active .coda-title {
    opacity: 1;
    transform: translateY(0);
}

/* ===== DIVIDER DISSOLUTION (Paradox) ===== */
.frame--paradox .divider-line {
    display: none;
}

/* ===== SECTION REVEAL ANIMATIONS ===== */
.frame .panel {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.frame.active .panel {
    opacity: 1;
}

.frame .divider-line {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.frame.active .divider-line {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .frame--hero,
    .frame--spear,
    .frame--shield {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 1fr;
    }

    .divider-line {
        width: 100%;
        height: 10px;
    }

    .divider-line svg {
        width: 100%;
        height: 10px;
    }

    .panel {
        padding: 2rem;
        min-height: 50vh;
    }

    .botanical {
        display: none;
    }

    .marble-chip {
        display: none;
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 4rem);
    }
}