/* =====================================================
   Digital Letter Project
   To 阿凤 / 卢老师
   Version 1.0
   Part 1
   Foundation / Typography / Layout
===================================================== */


/* =====================================================
   Reset
===================================================== */

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{

    background:#ffffff;

    color:#2E2E2E;

    font-family:
    "PingFang SC",
    "Noto Sans SC",
    "Microsoft YaHei",
    sans-serif;

    transition:background-color 1.2s ease;

    font-size:18px;

    line-height:1.95;

    letter-spacing:.02em;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


/* =====================================================
   Color System
===================================================== */

:root{

    --klein-blue:#1038A8;

    --paper:#FAFAF8;

    --paper-soft:#F4F5F6;

    --mist:#E8EDF3;

    --fog:#D8E0EA;

    --deep:#3B4654;

    --warm:#F7F4EF;

    --morning:#FBFAF8;

    --text:#2E2E2E;

    --text-light:#666;

    --border:rgba(0,0,0,.06);

    --max-width:760px;

}

/* Chapter Background */

.chapter-01{

    background:var(--paper);

}


.chapter-02{

    background:var(--paper-soft);

}


.chapter-03{

    background:var(--mist);

}


.chapter-04{

    background:var(--deep);

    color:white;

}

.chapter-04 .text-block{

    color:#F5F5F5;

}


.chapter-04 .chapter-header p:last-child{

    color:rgba(255,255,255,.6);

}


.chapter-04 .chapter-header p:first-child{

    opacity:.5;

}

.chapter-05{

    background:var(--warm);

}


/* =====================================================
   Images
===================================================== */

img{

    max-width:100%;

    display:block;

}


/* =====================================================
   Links
===================================================== */

a{

    color:inherit;

    text-decoration:none;

}


/* =====================================================
   Main Layout
===================================================== */

main{

    width:100%;

    overflow:hidden;

}

section{

    position:relative;

    width:100%;

}


/* =====================================================
   Reading Width
===================================================== */

.chapter-content,
.ending-content{

    width:100%;

    max-width:760px;

    margin:0 auto;

    padding-left:30px;

    padding-right:30px;

}


/* =====================================================
   Paragraph
===================================================== */

.text-block{

    width:100%;
 
    max-width:620px; 

    box-sizing:border-box;

    margin-left:auto;

    margin-right:auto;

}

.text-block p{

    margin-left:0;

    margin-right:0;

}

.text-block p:last-child{

    margin-bottom:0;

}


/* =====================================================
   Intro Note
===================================================== */

.intro-note{

    width:100%;

    max-width:620px;

    margin:40px auto 100px auto;

    padding-left:30px;

    padding-right:30px;

    opacity:.72;

}

.intro-note p{

    font-size:16px;

    color:#666;

    margin-bottom:18px;

}


/* =====================================================
   Memory Block
===================================================== */

.memory-block{

    margin:110px 0;

}

.memory-block h3{

    font-size:22px;

    font-weight:500;

    margin-bottom:32px;

}

.memory-block p{

    margin-bottom:28px;

}


/* =====================================================
   Visual Quote
===================================================== */

.visual-quote{

    width:100%;

    max-width:600px;

    margin:90px auto;

    padding:0 30px;

}

.visual-quote p{

    text-align:center;

    font-size:24px;

    line-height:1.8;

    font-weight:400;

    letter-spacing:.04em;

}


/* =====================================================
   Chapter Header
===================================================== */

.chapter{

    min-height:100vh;

    padding-top:120px;

    padding-bottom:120px;

}

.chapter-space{

    height:48px;
}

.chapter-header{

    width:100%;

    max-width:760px;

    margin:0 auto;

    padding:0 30px;

    margin-bottom:110px;

}

.chapter-header p:first-child{

    font-size:13px;

    letter-spacing:.18em;

    text-transform:uppercase;

    opacity:.45;

}

.chapter-header h2{

    margin-top:14px;

    margin-bottom:14px;

    font-size:40px;

    font-weight:500;

    letter-spacing:.04em;

}

.chapter-header p:last-child{

    font-size:15px;

    color:#666;

}


/* =====================================================
   Opening
===================================================== */

.opening{

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--klein-blue);

    color:white;

    text-align:left;

}

.opening-content{

    width:100%;

    max-width:760px;

    margin:0 auto;

    padding:0 30px;

    transform:translateY(8vh)

}

.opening h1{

    font-family:

    "PingFang SC",

    "Noto Sans SC",

    "Noto Serif SC"
    
    "Microsoft YaHei",

     sans-serif;

    font-size:40px;

    font-weight:400;

    line-height:1.72;

    letter-spacing:.08em;

}

.opening .subtitle{

    margin-top:72px;

    font-size:14px;

    opacity:.65;

    letter-spacing:.14em;

}


/* =====================================================
   Ending
===================================================== */

.ending{

    min-height:100vh;

    background:var(--morning);

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.ending h2{

    font-size:48px;

    font-weight:400;

    margin-bottom:26px;

}

.signature{

    margin-top:120px;

    font-size:22px;

}

.date{

    margin-top:28px;

    color:#666;

}

.hidden-mark{

    display:block;

    margin-top:120px;

    font-size:11px;

    opacity:.28;

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width:768px){

body{

    font-size:17px;

}

.chapter-space{
 
   height:36px;

}


.chapter{

    padding-top:110px;

    padding-bottom:110px;

}

.chapter-header{

    margin-bottom:80px;
}

.chapter-header h2{

    font-size:34px;

}

.visual-quote{

    margin:140px auto;

}

.visual-quote p{

    font-size:28px;

}

.opening h1{

    font-size:36px;

    line-height:1.75;

}

.opening-content{

    padding:0 36px;

    transform:translateY(5vh)

}

.opening h1 br{

    display:block;

    margin-top:12px;

}

.ending h2{

    font-size:40px;

}

}


/* =========================
   Scroll Reveal
========================= */


.reveal{

    opacity:0;

    transform:translateY(20px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}


.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/* =========================
   Opening Reveal
========================= */


.opening-reveal{

    opacity:0;

    transform:translateY(20px);

    animation:openingFade 1.4s ease forwards;

}



.opening-reveal .subtitle{

    opacity:0;

    animation:subtitleFade 1.4s ease forwards;

    animation-delay:.5s;

}



@keyframes openingFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes subtitleFade{

    from{

        opacity:0;

    }


    to{

        opacity:0.65;

    }

}