/* ==========================================
   ЧЕЛОВЕК, КОТОРЫЙ СТАЛ МОИМ МИРОМ
   Digital Love Book
========================================== */


/* ШРИФТЫ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Great+Vibes&display=swap');



/* ==========================================
   ПЕРЕМЕННЫЕ
========================================== */


:root {

    --paper: #fffdf8;

    --background: #eee5da;

    --text: #382d29;

    --green: #4c7c59;

    --green-soft: #7da986;

    --gold: #c8a45d;

    --shadow: rgba(50,40,30,.18);

}



/* ==========================================
   ОСНОВА
========================================== */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {


    background:

    radial-gradient(
        circle at top,
        #faf6ef,
        #e9dfd2
    );


    min-height:100vh;

    font-family:
    "Cormorant Garamond",
    serif;


    color:var(--text);

    overflow-x:hidden;


}







/* ==========================================
   ЗАГРУЗКА
========================================== */


.loader {

    position:fixed;

    inset:0;

    background:#fffaf3;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

    animation:
    hideLoader 2s forwards;

}



.heart {

    font-size:70px;

    animation:

    heartbeat 1.5s infinite;

}



.loader p {

    margin-top:25px;

    font-size:25px;

}



@keyframes hideLoader {


    0%,80% {

        opacity:1;

    }


    100% {

        opacity:0;

        visibility:hidden;

    }

}




@keyframes heartbeat {


    50% {

        transform:scale(1.15);

    }

}







/* ==========================================
   КНИГА
========================================== */


.book {


    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:40px 15px;


}





/* ==========================================
   СТРАНИЦЫ
========================================== */


.page {


    width:min(900px,95%);


    min-height:850px;


    background:var(--paper);


    margin:35px 0;


    padding:80px;


    border-radius:8px;



    box-shadow:


    0 30px 70px var(--shadow);



    position:relative;


    overflow:hidden;



    animation:

    pageAppear 1s ease;



}




/* бумага */


.page::after {


    content:"";


    position:absolute;

    inset:0;


    pointer-events:none;



    background:

    radial-gradient(
    rgba(0,0,0,.03) 1px,
    transparent 1px
    );


    background-size:5px 5px;


    opacity:.25;


}





@keyframes pageAppear {


    from {

        opacity:0;

        transform:
        translateY(40px);

    }


    to {

        opacity:1;

        transform:none;

    }

}







/* ==========================================
   ОБЛОЖКА
========================================== */


.cover-page {


    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;


}



.cover {


    display:flex;

    flex-direction:column;

    align-items:center;

}





.cover-photo-wrapper {


    position:relative;

    padding:12px;


}




.cover-photo {


    width:380px;

    max-width:90vw;


    border-radius:18px;


    box-shadow:

    0 35px 70px rgba(0,0,0,.25);



    animation:

    photoAppear 1.5s;


}




@keyframes photoAppear {


    from {

        opacity:0;

        transform:scale(.9);

    }


    to {

        opacity:1;

        transform:none;

    }

}






.small-heart {


    font-size:38px;

    margin-top:35px;

}




h1 {


    font-size:72px;

    line-height:1;


    margin-top:35px;


    font-weight:600;


}





.cover-subtitle {


    font-size:30px;


    margin-top:35px;


    line-height:1.5;


}





.authors {


    margin-top:45px;


    font-size:38px;


    color:var(--green);


    font-weight:600;


}





.date {


    margin-top:30px;


    color:#9a8660;


    font-size:24px;


    letter-spacing:3px;


}





/* кнопки */


button {


    border:none;

    cursor:pointer;


    font-family:inherit;


}



#startBook,
#continueBook {


    margin-top:55px;


    padding:18px 50px;


    border-radius:50px;


    background:var(--green);


    color:white;


    font-size:26px;


    box-shadow:

    0 15px 30px rgba(76,124,89,.25);


    transition:.3s;


}





#continueBook {


    display:none;


}





#startBook:hover,
#continueBook:hover {


    transform:translateY(-5px);


    background:#5d936b;


}







/* ==========================================
   ТЕКСТ
========================================== */


h2 {


    text-align:center;


    font-size:56px;


    line-height:1.2;


    margin-bottom:50px;


}



.chapter-title {


    text-align:center;


    color:var(--green);


    text-transform:uppercase;


    letter-spacing:5px;


    font-size:25px;


    margin-bottom:20px;


}





p {


    font-size:32px;


    line-height:1.8;


    margin-bottom:30px;


    text-indent:40px;


}






/* ==========================================
   ЦИТАТЫ
========================================== */


.quote {


    margin:60px auto;


    max-width:700px;


    padding:35px;


    border-left:4px solid var(--green);



    background:#f8f4ed;



    text-align:center;


    font-size:34px;


    font-style:italic;


    line-height:1.5;


}





/* ==========================================
   ПОСВЯЩЕНИЕ
========================================== */


.dedication {


    height:100%;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


}





.dedication h2 {


    font-size:70px;

}





.dedication p {


    font-size:40px;

    text-indent:0;


    color:var(--green);


}







/* ==========================================
   ФОТО
========================================== */


.photo-place {


    height:350px;


    border:

    2px dashed var(--green);


    border-radius:20px;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:30px;


    color:var(--green);


    margin-top:50px;


}








/* ==========================================
   ФИНАЛ
========================================== */


.final {


    text-align:center;


}





.final p {


    text-indent:0;


}





.green-heart {


    font-size:80px;


    margin-top:80px;


}






/* ==========================================
   АДАПТАЦИЯ ТЕЛЕФОН
========================================== */


@media(max-width:700px){


    .book {

        padding:15px 5px;

    }



    .page {


        padding:40px 25px;


        min-height:700px;


    }




    .cover-photo {


        width:90vw;


    }




    h1 {


        font-size:45px;


    }



    .cover-subtitle {


        font-size:22px;


    }




    .authors {


        font-size:30px;


    }





    h2 {


        font-size:38px;


    }




    p {


        font-size:23px;


        line-height:1.7;


        text-indent:25px;


    }



    .quote {


        font-size:24px;


        padding:25px;


    }



    .dedication h2 {


        font-size:50px;


    }



}


/* ==================================
   КОНТРОЛЬ КНИГИ
================================== */


.book-controls{


position:fixed;


bottom:25px;


left:50%;


transform:translateX(-50%);



display:flex;


align-items:center;


gap:25px;



background:
rgba(255,253,248,.95);



padding:12px 25px;



border-radius:50px;



box-shadow:
0 15px 40px rgba(0,0,0,.15);



z-index:999;


}




.book-controls button{


width:50px;

height:50px;


border-radius:50%;


background:#4c7c59;


color:white;


font-size:30px;


cursor:pointer;


}




.counter{


font-size:22px;


}





.page-animation{


animation:
pageMove .5s ease;


}



@keyframes pageMove{


from{

opacity:0;

transform:
translateX(60px)
rotateY(-10deg);

}


to{


opacity:1;

transform:none;


}


}

/* =====================================
   РЕЖИМ НАСТОЯЩЕЙ КНИГИ
===================================== */


body{

overflow:hidden;

}



.book{

height:100vh;

padding:0;

}




.page{


display:none;


height:100vh;


width:100%;


max-width:none;


margin:0;


border-radius:0;


padding:

90px clamp(25px,8vw,120px);



box-shadow:none;


overflow-y:auto;


}





/* верхняя панель */


.reading-header{


position:fixed;


top:0;


left:0;


right:0;


height:65px;


display:flex;


justify-content:space-between;


align-items:center;



padding:

0 35px;



background:

rgba(255,253,248,.92);



backdrop-filter:blur(10px);



z-index:500;


border-bottom:

1px solid rgba(0,0,0,.05);



}




.chapter-name{


font-size:22px;


color:var(--green);


letter-spacing:2px;


}



.page-info{


font-size:20px;


color:#8d7b68;


}





/* анимация перелистывания */


.page-turn{


animation:

turnPage .55s ease;


}




@keyframes turnPage{


from{


opacity:0;


transform:

translateX(80px)

rotateY(-12deg);


}



to{


opacity:1;


transform:none;


}



}







/* убираем старый вид */


.page::after{

display:none;

}






/* мобильная версия */


@media(max-width:700px){



.reading-header{


padding:0 18px;


}



.chapter-name{


font-size:17px;


}



.page-info{


font-size:16px;


}



.page{


padding:

85px 25px 100px;


}




}