/* hwakryul.com -- MCbling botanical split-screen */
/* Palette: #0A0A0A (obsidian), #F2EDE4 (hanji), #C9A84C (gold), #8B7332 (brass), #5C3A2E (peony), #D4A88C (blush), #E8E0D4 (silk), #2A2118 (ink) */

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

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

body{
    background:#0A0A0A;
    color:#E8E0D4;
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(1rem,1.6vw,1.25rem);
    line-height:1.85;
    letter-spacing:0.03em;
    overflow-x:hidden;
}

/* Gold divider */
.gold-divider{
    position:fixed;
    top:0;
    left:50%;
    width:2px;
    height:100vh;
    background:#C9A84C;
    z-index:100;
    box-shadow:0 0 8px rgba(201,168,76,0.3);
    animation:dividerPulse 3s ease-in-out infinite alternate;
}

@keyframes dividerPulse{
    0%{box-shadow:0 0 6px rgba(201,168,76,0.2)}
    100%{box-shadow:0 0 14px rgba(201,168,76,0.45)}
}

/* Chamber layout */
.chamber{
    min-height:100svh;
    display:flex;
    position:relative;
}

.panel-fire{
    flex:1;
    background:#0A0A0A;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
    overflow:hidden;
}

/* Noise overlay on fire side */
.panel-fire::before{
    content:'';
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size:150px 150px;
    opacity:0.04;
    pointer-events:none;
    mix-blend-mode:multiply;
}

.panel-grain{
    flex:1;
    background:#F2EDE4;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    position:relative;
    overflow:hidden;
}

/* Hanji texture on grain side */
.panel-grain::before{
    content:'';
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    background-size:150px 150px;
    opacity:0.06;
    pointer-events:none;
    mix-blend-mode:multiply;
}

/* Width variations */
.panel-fire.wide{flex:1.85}
.panel-grain.wide{flex:1.85}
.panel-fire.narrow{flex:0.55}
.panel-grain.narrow{flex:0.55}
.panel-fire.collapsed{flex:0.25}
.panel-grain.collapsed{flex:0.25}
.panel-fire.expanded{flex:4}
.panel-grain.expanded{flex:4}

/* Content wrappers */
.fire-content,.grain-content{
    max-width:560px;
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),transform 0.8s cubic-bezier(0.16,1,0.3,1);
}

.fire-content.revealed,.grain-content.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Hero text */
.hero-handwritten{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:clamp(2.5rem,8vw,9rem);
    color:#C9A84C;
    letter-spacing:0.01em;
    line-height:1;
}

.hero-korean{
    font-family:'Nanum Myeongjo',serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#8B7332;
    letter-spacing:0.05em;
    margin-top:1rem;
}

/* Peony SVG */
.peony-svg{
    width:clamp(140px,20vw,220px);
    height:auto;
}

.petal-path{
    stroke-dasharray:400;
    stroke-dashoffset:400;
    transition:stroke-dashoffset 2.5s ease;
}

.grain-content.revealed .petal-path{
    stroke-dashoffset:0;
}

/* Section headings */
.section-heading{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:clamp(1.4rem,3vw,3rem);
    color:#C9A84C;
    letter-spacing:0.01em;
    margin-bottom:1.5rem;
}

.section-heading-light{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:clamp(1.4rem,3vw,3rem);
    color:#2A2118;
    letter-spacing:0.01em;
    margin-bottom:1.5rem;
}

/* Body text */
.body-text-dark{
    color:#E8E0D4;
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
}

.body-text-light{
    color:#2A2118;
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
}

.single-line{
    font-family:'Nanum Myeongjo',serif;
    font-weight:400;
    font-size:clamp(1rem,2vw,1.5rem);
    color:#C9A84C;
    letter-spacing:0.05em;
    writing-mode:vertical-rl;
    text-orientation:mixed;
}

/* Collage fragments */
.collage-fragment{
    width:120px;
    height:160px;
    background:
        repeating-linear-gradient(0.5deg,#C9A84C 0px,#8B7332 1px,transparent 1px,transparent 4px);
    clip-path:polygon(5% 0,95% 3%,100% 92%,8% 100%);
    filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
    margin-bottom:1rem;
}

.fragment-2{
    width:90px;
    height:120px;
    background:
        repeating-linear-gradient(-1deg,#C9A84C 0px,#8B7332 2px,#5C3A2E 3px,transparent 3px,transparent 6px);
    clip-path:polygon(8% 2%,92% 0,100% 95%,0 100%);
    margin-left:30px;
}

/* Diptych text */
.diptych-text{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.1rem,2vw,1.6rem);
    line-height:2;
    letter-spacing:0.03em;
}

.fire-voice{
    color:#C9A84C;
    font-weight:300;
    font-style:italic;
}

.grain-voice{
    color:#5C3A2E;
    font-weight:600;
}

/* Vertical text */
.vertical-text{
    font-family:'Nanum Myeongjo',serif;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,1.1rem);
    color:#C9A84C;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    letter-spacing:0.2em;
}

/* Garden grid */
.garden-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    width:100%;
    max-width:400px;
}

.garden-cell{
    aspect-ratio:1;
    opacity:0;
    transform:scale(0.85);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.grain-content.revealed .garden-cell{
    opacity:1;
    transform:scale(1);
}

.grain-content.revealed .garden-cell:nth-child(1){transition-delay:0.1s}
.grain-content.revealed .garden-cell:nth-child(2){transition-delay:0.2s}
.grain-content.revealed .garden-cell:nth-child(3){transition-delay:0.3s}
.grain-content.revealed .garden-cell:nth-child(4){transition-delay:0.4s}
.grain-content.revealed .garden-cell:nth-child(5){transition-delay:0.5s}
.grain-content.revealed .garden-cell:nth-child(6){transition-delay:0.6s}

/* Passage text */
.passage{
    font-size:clamp(1rem,1.4vw,1.15rem);
    line-height:2;
}

/* Chamber 7: Seal */
.chamber-seal{
    background:#F2EDE4;
    justify-content:center;
    align-items:center;
}

.seal-content{
    text-align:center;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 1s ease,transform 1s ease;
    position:relative;
    z-index:2;
}

.seal-content.revealed{
    opacity:1;
    transform:translateY(0);
}

.seal-domain{
    font-family:'Caveat',cursive;
    font-weight:700;
    font-size:clamp(2rem,5vw,4rem);
    color:#C9A84C;
    letter-spacing:0.01em;
}

.seal-korean{
    font-family:'Nanum Myeongjo',serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
    color:#5C3A2E;
    margin-top:0.5rem;
    letter-spacing:0.1em;
}

.seal-flower{
    width:clamp(80px,12vw,120px);
    height:auto;
    margin-top:2rem;
}

.seal-flower ellipse{
    stroke-dasharray:200;
    stroke-dashoffset:200;
    transition:stroke-dashoffset 2s ease;
}

.seal-content.revealed .seal-flower ellipse{
    stroke-dashoffset:0;
}

/* Rhinestone border accents */
.chamber::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:10px;
    background:radial-gradient(circle 4px at center,#C9A84C 100%,transparent 100%);
    background-size:10px 10px;
    background-position:center;
    opacity:0.4;
    pointer-events:none;
}

.chamber-seal::after{
    display:none;
}

/* Responsive */
@media(max-width:768px){
    .chamber{
        flex-direction:column;
    }
    .panel-fire,.panel-grain,
    .panel-fire.wide,.panel-grain.wide,
    .panel-fire.narrow,.panel-grain.narrow,
    .panel-fire.collapsed,.panel-grain.collapsed,
    .panel-fire.expanded,.panel-grain.expanded{
        flex:none;
        min-height:50svh;
    }
    .gold-divider{
        left:0;
        top:auto;
        bottom:0;
        width:100%;
        height:2px;
        display:none;
    }
    .single-line{
        writing-mode:horizontal-tb;
    }
    .vertical-text{
        writing-mode:horizontal-tb;
    }
    .collage-fragment{
        width:80px;
        height:110px;
    }
    .fragment-2{
        width:60px;
        height:80px;
    }
}

@media(prefers-reduced-motion:reduce){
    .fire-content,.grain-content,.seal-content,.garden-cell{
        opacity:1;transform:none;transition:none;
    }
    .petal-path,.seal-flower ellipse{
        stroke-dashoffset:0;transition:none;
    }
    .gold-divider{animation:none}
}