/* ==========================================================================
   Fabricated Secrets Publishing
   The Pretty Wrists of Witty Mistresses
   Main Stylesheet
   ========================================================================== */


/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {

    --sand: #c2ae86;
    --sand-light: #e6d8bc;

    --text: #ddd8cf;
    --text-soft: #b9b6b1;

    --forest: #171d1d;

    --shadow: rgba(55,72,90,.72);

    --overlay-dark: rgba(8,10,12,.48);
    --overlay-light: rgba(8,10,12,.22);

    --content-width: 1100px;

    --section-padding: clamp(80px,10vw,180px);

    --transition: .45s ease;

}



/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after{

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

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:"Source Code Pro", monospace;

    background:#111;

    color:var(--text);

    line-height:1.9;

    font-weight:300;

    overflow-x:hidden;

}



/* ==========================================================================
   LINKS
   ========================================================================== */

a{

    color:var(--sand);

    text-decoration:none;

    transition:color .25s ease;

}

a:hover{

    color:var(--sand-light);

}



/* ==========================================================================
   IMAGES
   ========================================================================== */

img{

    display:block;

    max-width:100%;

}



/* ==========================================================================
   HERO
   ========================================================================== */

.hero{

    position:relative;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}



.hero-bg{

    position:absolute;

    inset:0;

    background-image:url("../img/PWBG4.jpg");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    transform:scale(1.03);

    z-index:1;

}



.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to bottom,

            var(--overlay-light),

            var(--overlay-dark)

        );

    z-index:2;

}



/* ==========================================================================
   LOGO
   ========================================================================== */

.logo-wrapper{

    position:relative;

    z-index:5;

    width:min(78vw,1000px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity: 0.7;

}



.logo{

    width:100%;

    filter:

        drop-shadow(
            8px 8px 10px
            var(--shadow)
        );

    animation:

        floatLogo 18s ease-in-out infinite;

    transition:

        opacity .2s linear,

        transform .2s linear,

        filter .2s linear;

}



/* ==========================================================================
   BOOK SECTION
   ========================================================================== */

.book-section{

    position:relative;

    min-height:120vh;

    padding:

        var(--section-padding)

        40px;

    background-image:

        linear-gradient(

            rgba(15,18,20,.62),

            rgba(15,18,20,.72)

        ),

        url("../img/PWBG6.jpg");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

}



.content-column{

    width:min(100%,var(--content-width));

    margin:auto;

}



/* ==========================================================================
   BOOK GRID
   ========================================================================== */

.book-grid{

    display:grid;

    grid-template-columns:

        300px

        1fr;

    gap:70px;

    align-items:center;

    margin-bottom:90px;

}



/* ==========================================================================
   BOOK COVER
   ========================================================================== */

.book-cover img{

    border-radius:3px;

    box-shadow:

        0 18px 40px rgba(0,0,0,.45);

}



/* ==========================================================================
   TITLE
   ========================================================================== */

.title{

    font-size:clamp(2rem,4vw,2.8rem);

    color:var(--sand);

    font-weight:300;

    letter-spacing:.04em;

    line-height:1.2;

    margin-bottom:18px;

}



.subtitle{

    font-size:1.35rem;

    color:var(--text);

    font-weight:300;

    margin-bottom:24px;

}



.author{

    font-size:1.05rem;

    color:var(--text-soft);

}



/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.description{

    width:min(850px,100%);

    margin:auto;

}



.description p{

    margin-bottom:2rem;

    opacity:0;

    transform:translateY(40px);

}



.description .lead{

    color:var(--sand-light);

    font-size:1.18rem;

}



/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{

    text-align:center;

    margin-top:120px;

    padding-top:50px;

    border-top:

        1px solid

        rgba(255,255,255,.08);

    color:var(--text-soft);

    font-size:.95rem;

}

.footer p{

    margin-bottom:12px;

}

/* ==========================================================================
   PURCHASE LINKS
   ========================================================================== */

.buy-links{

    margin-top:2rem;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.85rem;

}

.buy-links::before{

    content:"Available in";

    color:var(--text-soft);

    font-size:.85rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    margin-bottom:.35rem;

}

.buy-links a{

    color:var(--sand);

    font-size:.95rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:
        color .25s ease,
        transform .25s ease;

}

.buy-links a:hover{

    color:var(--sand-light);

    transform:translateY(-2px);

}



/* ==========================================================================
   BOOK COVER HOVER
   ========================================================================== */

.book-cover{

    transition:
        transform .35s ease,
        filter .35s ease;

}

.book-cover:hover{

    transform:translateY(-6px);

    filter:brightness(1.05);

    cursor:pointer;

}

.book-cover:hover img{

    box-shadow:
        0 28px 60px rgba(0,0,0,.55);

}



/* ==========================================================================
   PARAGRAPH REVEAL
   ========================================================================== */

.description p.visible{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .9s ease,

        transform .9s ease;

}



/* ==========================================================================
   FOOTER LINKS
   ========================================================================== */

.footer a{

    color:var(--text-soft);

    transition:color .3s ease;

}

.footer a:hover{

    color:var(--sand-light);

}



/* ==========================================================================
   SELECTION COLOR
   ========================================================================== */

::selection{

    background:var(--sand);

    color:#111;

}



/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:#555;

    border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

    background:#777;

}



/* ==========================================================================
   LOGO ANIMATION
   ========================================================================== */

@keyframes floatLogo{

    0%{

        transform:
            translateY(0px);

    }

    25%{

        transform:
            translateY(-4px);

    }

    50%{

        transform:
            translateY(-7px);

    }

    75%{

        transform:
            translateY(-3px);

    }

    100%{

        transform:
            translateY(0px);

    }

}



/* ==========================================================================
   PAGE FADE-IN
   ========================================================================== */

body{

    animation:

        pageFade 1.5s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width:1000px){

    .book-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }

    .book-cover{

        width:280px;

        margin:auto;

    }

    .description{

        width:100%;

    }

}



/* ==========================================================================
   PHONE
   ========================================================================== */

@media (max-width:700px){

    .hero{

        min-height:100svh;

    }

    .logo-wrapper{

        width:90vw;

    }

    .book-section{

        padding:

            80px 25px;

    }

    .title{

        font-size:2rem;

    }

    .subtitle{

        font-size:1.1rem;

    }

    .author{

        font-size:1rem;

    }

    .description{

        font-size:.98rem;

    }

    .footer{

        margin-top:80px;

    }

}



/* ==========================================================================
   SMALL PHONES
   ========================================================================== */

@media (max-width:450px){

    .book-cover{

        width:210px;

    }

    .title{

        font-size:1.65rem;

    }

    .subtitle{

        font-size:1rem;

    }

    .description .lead{

        font-size:1.05rem;

    }

}



/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}