/* miris.one -- muji journal with parallax and pressed leaves */

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

:root{
    --parchment:#F5ECD7;
    --sepia:#5C3D1E;
    --faded:#8B7B68;
    --leaf:#7A8B65;
    --foxed:#D4C4A8;
    --deep:#2E1F0F;
    --rose:#C4A08A;
    --bleach:#FAF6EE;
}

body{
    background:var(--parchment);
    color:var(--sepia);
    font-family:'Karla',sans-serif;
    font-weight:400;
    font-size:1rem;
    line-height:1.85;
    overflow-x:hidden;
    position:relative;
}

/* Gradient mesh paper texture */
body::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
        radial-gradient(ellipse at 20% 30%,rgba(212,196,168,0.25),transparent 50%),
        radial-gradient(ellipse at 80% 70%,rgba(196,160,138,0.15),transparent 40%),
        radial-gradient(ellipse at 50% 50%,rgba(245,236,215,0.3),transparent 60%),
        radial-gradient(ellipse at 10% 80%,rgba(212,196,168,0.15),transparent 30%);
}

/* Pages */
.page{
    min-height:90vh;
    position:relative;
    z-index:1;
}

.page-border{
    position:relative;
    min-height:90vh;
    border:1px solid var(--foxed);
    border-radius:2px;
    margin:4vh 3vw;
    padding:3rem;
    overflow:hidden;
    background:var(--parchment);
}

/* Page corner curl */
.page-border::after{
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    width:30px;
    height:30px;
    background:linear-gradient(135deg,transparent 50%,rgba(212,196,168,0.4) 50%);
    pointer-events:none;
}

/* Parallax background layer */
.parallax-bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
}

/* Leaf silhouettes */
.leaf{
    position:absolute;
    opacity:0.08;
}

.leaf-ginkgo{width:60px}
.leaf-oval{width:30px}
.leaf-fern{width:40px}

/* Leaf positions per page */
.page-cover .leaf-ginkgo{top:15%;right:20%}
.page-cover .leaf-oval{bottom:25%;left:10%;transform:rotate(15deg)}
.page-cover .leaf-fern{top:50%;right:8%;transform:rotate(-10deg)}

.leaf-pos-2{top:20%;left:15%;transform:rotate(25deg)}
.leaf-pos-3{bottom:15%;right:12%;transform:rotate(-20deg)}
.leaf-pos-4{top:10%;right:15%;transform:rotate(5deg)}
.leaf-pos-5{bottom:20%;left:8%;transform:rotate(-15deg)}
.leaf-pos-6{top:10%;left:20%;opacity:0.15 !important}
.leaf-pos-7{bottom:25%;right:25%;opacity:0.12 !important}
.leaf-pos-8{top:40%;right:10%;opacity:0.13 !important}

/* Pressed flower impressions */
.pressed-flower{
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;
    background:radial-gradient(circle,var(--rose),transparent 70%);
    opacity:0.06;
}

.flower-1{bottom:30%;left:20%}
.flower-2{top:20%;right:15%}

/* Foxing stains */
.foxing-stain{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,rgba(212,196,168,0.4),transparent 70%);
    pointer-events:none;
    z-index:0;
}

.stain-1{width:40px;height:40px;top:15%;right:10%}
.stain-2{width:25px;height:25px;bottom:20%;left:25%}
.stain-3{width:35px;height:35px;top:40%;right:5%}
.stain-4{width:50px;height:50px;top:30%;left:5%}
.stain-5{width:30px;height:30px;bottom:10%;right:15%}

/* Page content */
.page-content{
    position:relative;
    z-index:2;
    max-width:560px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:calc(90vh - 6rem);
}

.page-content-centered{
    align-items:center;
    text-align:center;
}

/* Cover */
.cover-title{
    font-family:'Libre Baskerville',serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:-0.01em;
    color:var(--sepia);
    line-height:1;
    opacity:0;
}

.cover-title.flip-done{
    opacity:1;
}

.cover-title .flip-letter{
    display:inline-block;
    opacity:0;
    transform:rotateY(-90deg);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.cover-title .flip-letter.flipped{
    opacity:1;
    transform:rotateY(0);
}

.cover-sub{
    font-family:'Karla',sans-serif;
    font-weight:300;
    font-size:clamp(0.85rem,1.2vw,1rem);
    color:var(--faded);
    margin-top:1.5rem;
    opacity:0;
    transition:opacity 0.8s ease;
}

.cover-sub.shown{
    opacity:1;
}

/* Section headings */
.section-heading{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(1.5rem,3.5vw,2.5rem);
    color:var(--sepia);
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

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

/* Body text */
.body-text{
    margin-bottom:1.5rem;
    color:var(--sepia);
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.body-text.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Margin note */
.margin-note{
    position:absolute;
    right:2rem;
    top:40%;
    font-family:'Caveat',cursive;
    font-size:0.9375rem;
    color:var(--rose);
    transform:rotate(-3deg);
    opacity:0;
    transition:opacity 0.6s ease;
    z-index:3;
}

.page.in-view .margin-note{
    opacity:0.7;
}

/* Work entries */
.work-entry{
    padding:2rem 0;
    border-bottom:1px solid rgba(212,196,168,0.4);
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.work-entry:last-child{border-bottom:none}

.work-entry.revealed{
    opacity:1;
    transform:translateY(0);
}

.work-title{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(1.5rem,3vw,2.2rem);
    color:var(--sepia);
    margin-bottom:0.75rem;
}

.work-desc{
    color:var(--faded);
    font-size:0.95rem;
}

/* Last page */
.page-last .page-border{
    background:linear-gradient(to bottom,var(--parchment),var(--bleach));
}

.last-thought{
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(1.3rem,2.5vw,2rem);
    color:var(--sepia);
    line-height:1.6;
    max-width:40ch;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.last-thought.revealed{
    opacity:1;
    transform:translateY(0);
}

.last-sign{
    margin-top:3rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    opacity:0;
    transition:opacity 0.8s ease 0.4s;
}

.last-sign.revealed{
    opacity:1;
}

.sign-date{
    font-family:'Caveat',cursive;
    font-size:0.9375rem;
    color:var(--faded);
}

.sign-circle{
    width:24px;
    height:24px;
}

/* Responsive */
@media(max-width:768px){
    .page-border{
        margin:2vh 2vw;
        padding:2rem;
    }
    .margin-note{display:none}
    .page-content{
        min-height:auto;
        padding:2rem 0;
    }
}

@media(prefers-reduced-motion:reduce){
    .cover-title,.cover-sub,.section-heading,.body-text,
    .work-entry,.last-thought,.last-sign,.margin-note{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .cover-title .flip-letter{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}