/* munju.org - Tactile Craft Workshop Diorama */
/* Fonts: Josefin Sans (display), Nunito (body), Cormorant Garamond (accent) */

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

:root{
    --cloud-cream:#faf5ef;
    --lavender-mist:#e8dff5;
    --mint-whisper:#dff5ec;
    --rose-quartz:#f5d5d5;
    --powder-blue:#d5e5f5;
    --dusty-violet:#4a3f5c;
    --muted-plum:#5c5470;
    --brass:#b8860b;
    --pale-gold:#daa520;
    --soft-peach:#f5c5a3;
    --dusty-mauve:#9b8aa8;
    --warm-amber:#f5deb3;
    --wood-dark:#c8956e;
    --wood-light:#d4a373;
    --dark-gold:#8b6914;
}

html{scroll-behavior:smooth}

body{
    font-family:'Nunito',sans-serif;
    font-weight:300;
    color:var(--muted-plum);
    background:var(--cloud-cream);
    overflow-x:hidden;
    line-height:1.7;
    letter-spacing:0.01em;
}

/* ========== NAVIGATION SCREWS ========== */
#screw-nav{
    position:fixed;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:1000;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.screw-btn{
    width:20px;
    height:20px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    position:relative;
    background:linear-gradient(135deg,var(--pale-gold) 0%,var(--brass) 40%,var(--dark-gold) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(0,0,0,0.2),0 2px 4px rgba(0,0,0,0.15);
    transition:transform 0.4s ease,box-shadow 0.4s ease;
}

.screw-btn.active{
    transform:rotate(45deg) scale(1.15);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(0,0,0,0.2),0 3px 8px rgba(0,0,0,0.25);
}

.screw-cross{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:10px;
    height:10px;
}

.screw-cross::before,.screw-cross::after{
    content:'';
    position:absolute;
    background:rgba(0,0,0,0.25);
    border-radius:1px;
}
.screw-cross::before{
    width:10px;height:2px;
    top:4px;left:0;
}
.screw-cross::after{
    width:2px;height:10px;
    top:0;left:4px;
}

/* ========== DIORAMA SCENES ========== */
.diorama-scene{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;
    perspective:1200px;
}

#section-0{background:var(--cloud-cream)}
#section-1{background:var(--cloud-cream)}
#section-2{background:var(--lavender-mist)}
#section-3{background:var(--cloud-cream)}
#section-4{background:var(--mint-whisper)}

.scene-content{
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* ========== BOKEH LAYER ========== */
.bokeh-layer{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    z-index:1;
    pointer-events:none;
    transform:translateZ(-50px);
}

.bokeh-circle{
    position:absolute;
    border-radius:50%;
    will-change:transform;
    pointer-events:none;
}

.bokeh-far{transform:translateZ(-50px)}
.bokeh-mid{transform:translateZ(-25px)}
.bokeh-near{transform:translateZ(0)}

@keyframes bokehFloat{
    0%,100%{transform:translate(var(--bx1),var(--by1))}
    50%{transform:translate(var(--bx2),var(--by2))}
}

/* ========== SURFACE SYSTEM ========== */
.surface-felt{
    background:var(--cloud-cream);
    background-image:
        radial-gradient(ellipse at 20% 50%,rgba(245,222,179,0.08) 0%,transparent 50%),
        radial-gradient(ellipse at 80% 30%,rgba(232,223,245,0.1) 0%,transparent 50%);
    box-shadow:0 2px 8px rgba(155,138,168,0.2);
}

.surface-brass{
    background:linear-gradient(135deg,var(--pale-gold) 0%,var(--brass) 40%,var(--dark-gold) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(0,0,0,0.2);
}

.surface-wood{
    background:var(--wood-light);
    background-image:
        repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(200,149,110,0.3) 4px,rgba(200,149,110,0.3) 6px),
        repeating-linear-gradient(93deg,transparent,transparent 7px,rgba(180,130,90,0.15) 7px,rgba(180,130,90,0.15) 9px);
}

.surface-paper{
    background:#fff;
    box-shadow:0 1px 4px rgba(155,138,168,0.15);
    transform:rotate(-1deg);
}

.surface-glass{
    background:rgba(255,255,255,0.3);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.5);
}

/* ========== REVEAL ANIMATION ========== */
.reveal-child{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease-out,transform 0.8s ease-out;
    transition-delay:calc(var(--delay,0) * 120ms);
}
.reveal-child.revealed{
    opacity:1;
    transform:translateY(0);
}

/* ========== SECTION 0: WORKSHOP DOOR ========== */
.workshop-door{
    position:relative;
    width:clamp(280px,50vw,500px);
    height:clamp(400px,70vh,700px);
    display:flex;
    align-items:center;
    justify-content:center;
}

.door-panel{
    width:100%;
    height:100%;
    border-radius:8px 8px 0 0;
    position:relative;
    box-shadow:
        inset -4px 0 12px rgba(0,0,0,0.15),
        4px 0 20px rgba(0,0,0,0.1),
        -2px 0 8px rgba(0,0,0,0.05);
    transform-origin:left center;
    transition:transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

.door-panel.door-open{
    transform:perspective(800px) rotateY(-35deg);
}

.door-grain{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    border-radius:inherit;
    opacity:0.3;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(139,105,20,0.08) 30px,rgba(139,105,20,0.08) 31px);
}

.door-handle{
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    width:16px;height:40px;
    border-radius:8px;
    background:linear-gradient(135deg,var(--pale-gold),var(--brass),var(--dark-gold));
    box-shadow:2px 2px 6px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.3);
}

.door-gap{
    position:absolute;
    left:0;top:0;
    width:15px;height:100%;
    background:rgba(250,245,239,0.3);
    z-index:-1;
    overflow:hidden;
}

.gap-light{
    width:100%;height:100%;
    background:linear-gradient(180deg,
        rgba(245,222,179,0.0) 0%,
        rgba(245,222,179,0.4) 30%,
        rgba(245,197,163,0.5) 50%,
        rgba(245,222,179,0.4) 70%,
        rgba(245,222,179,0.0) 100%);
}

.nameplate{
    position:absolute;
    top:35%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:16px 32px;
    border-radius:4px;
    text-align:center;
    z-index:5;
    box-shadow:
        0 3px 10px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.15);
}

.nameplate-text{
    display:block;
    font-family:'Josefin Sans',sans-serif;
    font-weight:700;
    font-size:clamp(1.6rem,4vw,3rem);
    letter-spacing:0.04em;
    line-height:1.15;
    color:var(--cloud-cream);
    text-shadow:0 -1px 0 rgba(0,0,0,0.3),0 1px 0 rgba(255,255,255,0.2);
}

.nameplate-subtitle{
    display:block;
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(0.7rem,1.2vw,0.9rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cloud-cream);
    opacity:0.85;
    margin-top:4px;
}

.scene-hint{
    position:absolute;
    bottom:40px;
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:0.9rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--dusty-mauve);
    animation:hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse{
    0%,100%{opacity:0.5}
    50%{opacity:1}
}

/* ========== SECTION 1: INVENTOR'S DESK ========== */
.desk-surface{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:30px;
    padding:40px;
    max-width:700px;
    width:90%;
}

.desk-object{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.notepad{
    padding:24px 20px;
    min-height:180px;
    border-radius:2px;
    position:relative;
    overflow:hidden;
}

.notepad-lines{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    background:repeating-linear-gradient(
        0deg,
        transparent,transparent 27px,
        rgba(184,134,11,0.12) 27px,
        rgba(184,134,11,0.12) 28px
    );
    pointer-events:none;
}

.notepad-text{
    position:relative;
    font-family:'Nunito',sans-serif;
    font-weight:300;
    font-size:clamp(0.85rem,1.4vw,1rem);
    color:var(--muted-plum);
    line-height:28px;
    z-index:1;
}

.compass-rose{
    width:120px;height:120px;
}
.compass-svg{width:100%;height:100%}

.magnifier{
    width:90px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.magnifier-lens{
    width:70px;height:70px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.7),rgba(213,229,245,0.4));
    border:4px solid var(--brass);
    box-shadow:
        inset 0 0 20px rgba(255,255,255,0.5),
        0 2px 8px rgba(0,0,0,0.15);
}

.magnifier-handle{
    width:8px;height:35px;
    background:linear-gradient(135deg,var(--pale-gold),var(--brass));
    border-radius:0 0 4px 4px;
    transform:rotate(-20deg);
    transform-origin:top center;
    margin-top:-4px;
    box-shadow:1px 2px 4px rgba(0,0,0,0.15);
}

.book-stack{
    display:flex;
    flex-direction:column;
    gap:0;
    align-items:center;
}

.book{
    width:clamp(80px,15vw,120px);
    height:20px;
    border-radius:2px 4px 4px 2px;
    box-shadow:
        -2px 2px 4px rgba(0,0,0,0.1),
        inset -2px 0 0 rgba(0,0,0,0.1);
    margin-bottom:-2px;
}

.book:nth-child(1){transform:rotate(-2deg)}
.book:nth-child(2){transform:rotate(1deg)}
.book:nth-child(3){transform:rotate(-1deg)}

/* ========== SECTION 2: THE MECHANISM ========== */
.mechanism-container{
    position:relative;
    width:clamp(300px,60vw,600px);
    height:clamp(250px,40vh,400px);
    display:flex;
    align-items:center;
    justify-content:center;
}

.gear{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gear-primary{
    width:200px;height:200px;
    left:calc(50% - 160px);
    top:calc(50% - 100px);
}

.gear-secondary{
    width:140px;height:140px;
    left:calc(50% + 20px);
    top:calc(50% - 70px);
}

.gear-tertiary{
    width:160px;height:160px;
    left:calc(50% - 80px);
    top:calc(50% + 60px);
}

.gear-svg{
    width:100%;height:100%;
}

.gear-spin-cw{
    animation:spinCW 20s linear infinite;
}
.gear-spin-ccw{
    animation:spinCCW 13.33s linear infinite;
}

@keyframes spinCW{to{transform:rotate(360deg)}}
@keyframes spinCCW{to{transform:rotate(-360deg)}}

.gear-label{
    position:absolute;
    font-family:'Josefin Sans',sans-serif;
    font-weight:600;
    font-size:clamp(0.8rem,1.5vw,1.1rem);
    color:var(--dusty-violet);
    letter-spacing:0.04em;
    text-align:center;
    pointer-events:none;
    z-index:5;
}

.mechanism-caption{
    position:absolute;
    bottom:10%;
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(0.9rem,1.8vw,1.2rem);
    letter-spacing:0.06em;
    color:var(--dusty-violet);
    text-align:center;
}

/* ========== SECTION 3: THE WINDOW ========== */
.window-frame{
    width:clamp(280px,50vw,500px);
    padding:20px;
    border-radius:clamp(140px,25vw,250px) clamp(140px,25vw,250px) 0 0;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.15),
        inset 0 2px 0 rgba(255,255,255,0.2),
        inset 0 -2px 0 rgba(0,0,0,0.1);
    position:relative;
}

.window-arch{
    width:100%;
    aspect-ratio:5/7;
    border-radius:clamp(120px,22vw,230px) clamp(120px,22vw,230px) 0 0;
    overflow:hidden;
    position:relative;
}

.window-pane{
    width:100%;height:100%;
    background:linear-gradient(180deg,
        rgba(223,245,236,0.4) 0%,
        rgba(245,222,179,0.3) 40%,
        rgba(245,197,163,0.2) 100%);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.window-bokeh-layer{
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    pointer-events:none;
}

.window-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:30px;
}

.window-title{
    font-family:'Josefin Sans',sans-serif;
    font-weight:600;
    font-size:clamp(1.4rem,3.5vw,2.5rem);
    letter-spacing:0.04em;
    line-height:1.15;
    color:var(--dusty-violet);
    margin-bottom:16px;
}

.window-text{
    font-family:'Nunito',sans-serif;
    font-weight:300;
    font-size:clamp(0.9rem,1.6vw,1.1rem);
    color:var(--muted-plum);
    line-height:1.7;
    max-width:380px;
    margin:0 auto;
}

.window-sill{
    width:calc(100% + 40px);
    height:20px;
    margin-left:-20px;
    margin-top:0;
    background:var(--wood-light);
    background-image:
        repeating-linear-gradient(90deg,transparent,transparent 4px,rgba(200,149,110,0.3) 4px,rgba(200,149,110,0.3) 6px);
    border-radius:0 0 4px 4px;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
}

/* ========== SECTION 4: THE SHELF ========== */
.shelf-container{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.shelf-surface{
    display:flex;
    gap:clamp(30px,6vw,60px);
    align-items:flex-end;
    padding:20px clamp(30px,5vw,60px);
    border-radius:4px;
    box-shadow:0 6px 16px rgba(0,0,0,0.12);
    min-height:200px;
    position:relative;
}

.shelf-object{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.object-label{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-style:italic;
    font-size:clamp(0.7rem,1.2vw,0.9rem);
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--brass);
    text-shadow:0 -1px 0 rgba(0,0,0,0.1),0 1px 0 rgba(255,255,255,0.3);
}

/* Snow Globe */
.globe-dome{
    width:80px;height:80px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.7),rgba(213,229,245,0.3));
    border:3px solid rgba(184,134,11,0.4);
    position:relative;
    overflow:hidden;
    box-shadow:
        inset 0 -10px 20px rgba(155,138,168,0.15),
        0 2px 8px rgba(0,0,0,0.1);
    transition:transform 0.5s ease;
}

.snow-globe:hover .globe-dome{
    animation:shake 0.5s ease-in-out;
}

@keyframes shake{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(3deg)}
    75%{transform:rotate(-3deg)}
}

.globe-scene{
    width:100%;height:100%;
    position:relative;
}

.globe-tree{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    width:0;height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid #a8d5a0;
}
.globe-tree::after{
    content:'';
    position:absolute;
    bottom:-20px;left:50%;
    transform:translateX(-50%);
    width:4px;height:6px;
    background:#8b6914;
}

.snow-particle{
    position:absolute;
    width:3px;height:3px;
    border-radius:50%;
    background:white;
    opacity:0;
}

.snow-globe:hover .snow-particle{
    animation:snowFloat 2s ease-in-out forwards;
}

.snow-particle:nth-child(1){left:20%;bottom:30%;animation-delay:0s}
.snow-particle:nth-child(2){left:40%;bottom:25%;animation-delay:0.2s}
.snow-particle:nth-child(3){left:60%;bottom:35%;animation-delay:0.1s}
.snow-particle:nth-child(4){left:30%;bottom:40%;animation-delay:0.3s}
.snow-particle:nth-child(5){left:70%;bottom:20%;animation-delay:0.15s}
.snow-particle:nth-child(6){left:50%;bottom:45%;animation-delay:0.25s}
.snow-particle:nth-child(7){left:35%;bottom:30%;animation-delay:0.35s}

@keyframes snowFloat{
    0%{opacity:0;transform:translateY(0)}
    20%{opacity:1}
    100%{opacity:0;transform:translateY(-40px)}
}

.globe-base{
    width:50px;height:14px;
    border-radius:0 0 6px 6px;
    margin-top:-2px;
}

/* Music Box */
.music-box-body{
    width:70px;height:50px;
    border-radius:4px;
    position:relative;
    box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

.music-box-lid{
    position:absolute;
    top:0;left:0;
    width:100%;height:8px;
    background:linear-gradient(135deg,var(--pale-gold) 0%,var(--brass) 50%,var(--dark-gold) 100%);
    border-radius:4px 4px 0 0;
    border-bottom:1px solid rgba(0,0,0,0.15);
}

.music-box-handle-wrap{
    position:absolute;
    right:-14px;
    top:50%;
    transform:translateY(-50%);
}

.music-box-handle{
    width:12px;height:3px;
    background:var(--brass);
    border-radius:2px;
    transform-origin:left center;
    transition:transform 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
    box-shadow:1px 1px 2px rgba(0,0,0,0.15);
}
.music-box-handle::after{
    content:'';
    position:absolute;
    right:-4px;top:-2px;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--pale-gold);
    border:1px solid var(--brass);
}

.music-box:hover .music-box-handle{
    transform:rotate(-45deg);
}

/* Sealed Letter */
.letter-body{
    width:80px;height:55px;
    border-radius:2px;
    position:relative;
    transform:rotate(-1deg);
    transition:transform 0.4s ease;
}

.letter-fold{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:50%;
    background:rgba(250,245,239,0.6);
    border-bottom:1px solid rgba(184,134,11,0.15);
    transform-origin:bottom center;
    transition:transform 0.4s ease;
}

.wax-seal{
    position:absolute;
    top:calc(50% - 10px);
    left:50%;
    transform:translateX(-50%);
    width:20px;height:20px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%,#e86b6b,#c0392b);
    box-shadow:0 1px 3px rgba(0,0,0,0.2);
    transition:transform 0.4s ease;
    z-index:2;
}

.sealed-letter:hover .wax-seal{
    transform:translateX(-50%) translateY(-4px);
}
.sealed-letter:hover .letter-fold{
    transform:rotateX(-2deg);
}

.shelf-bracket{
    position:absolute;
    bottom:-30px;
    width:20px;height:30px;
    background:var(--brass);
    clip-path:polygon(0 0,100% 0,100% 60%,50% 100%,0 60%);
}
.shelf-bracket-left{left:calc(50% - 80px)}
.shelf-bracket-right{right:calc(50% - 80px)}

/* ========== RESPONSIVE ========== */
@media (max-width:768px){
    #screw-nav{
        flex-direction:row;
        top:auto;
        bottom:16px;
        right:50%;
        transform:translateX(50%);
        gap:12px;
    }
    .desk-surface{
        grid-template-columns:1fr;
        gap:20px;
        padding:20px;
    }
    .mechanism-container{
        flex-direction:column;
        height:auto;
        gap:20px;
    }
    .gear{position:relative;left:auto!important;top:auto!important}
    .shelf-surface{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }
}