:root {
    --background-image: url("/images/legion/backgrounds/dark-metal-bg.webp");
}

:root {

    /* Sizing */

    --book-row-count: 4;
    --gallery-width: 99%;
    --gallery-max-width: 1600px;
    --feature-image-h: 30vh;
    --mobile-featured-image-h: 15vh;
    --selected-book-cover-height: 50vh;
    --book-cover-height: 50vh;
    --book-cover-hw-ratio: 0.628;
    --move-in-left-anim: in-left-anim .65s ease-out 1 normal;
    --move-in-right-anim: in-right-anim .65s ease-out 1 normal;
    --book-anim-distance: 5vw;
    /* Colors */
    --book-cover-shadow-color: rgba(206,143,56,1);
    /* --book-cover-shadow-color: #ce8f38; */
    --mobile-gallery-bg-color: rgba(0,0,0,0.85);
    --gallery-border: 1px solid rgba(206, 143, 56, 0.3);
    --tagline-glow-color: #060504;
    --purchase-button-glow-color: rgb(206, 143, 56);
}

body {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    backdrop-filter: brightness(35%);
}

/* Welcome Banner */
.welcome-banner {
    background: linear-gradient(black, 30%, rgba(206,143,56,0.55), 75%, black);
    color: black;
    text-align: center;
    font-family: 'Cinzel', Georgia, 'Times New Roman', Times, serif;
    text-shadow: 1pt 1pt 3pt black;
    font-variant: small-caps;
    font-size: 28pt;
    padding: 3ex;
    margin-bottom: 2ex;
}

/* Feature Image */
div.feature-image {
    background: url("/images/legion/bikes-night.webp");
    background-size: cover;
    background-position: top 40% right 50%;
    filter: contrast(110%);
    height: 200px;
}

@media screen and (max-width: 600px) {
    div.welcome-banner {
        font-size: 20pt;
    }
    div.feature-image {
        height: 100px;
    }
}

.article__divider {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    width: 100%;
    margin: 16px 0;
}

.article {
    margin: 32px auto;
    max-width: 1024px;
    /* background-image: url("/images/legion/backgrounds/smoke2.webp");
    background-position: 20% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid var(--accent-color);
    border-radius: 16px; */
}

/* Gallery CSS */
.gallery-container {
    margin-top: 2vh;
    /* display: none; */
    display: flex;
    justify-content: center;
}

section.book-gallery {
    /* Background and Sizing */
    width: var(--gallery-width);
    max-width: var(--gallery-max-width);
    background: url("/images/legion/backgrounds/smoke2.webp"), linear-gradient(transparent, 3%, black);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3vw;
    padding: 3vw 5vw;
    border: var(--gallery-border);
    /* Flexbox Vars */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-end;
}

@media screen and (max-width: 600px) {
    section.book-gallery {
        /* 
            These overrides keep the text
            legible, since the background
            image was intefering with it.
         */
        justify-content: space-between;
        background-image: none;
        background-color: var(--mobile-gallery-bg-color);
        touch-action: pan-y;
    }
}

div.book {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

div.book-cover {
    width: calc(70vw / var(--book-row-count));
    max-width: calc(var(--selected-book-cover-height) * var(--book-cover-hw-ratio) * 0.75);
    transition: box-shadow 1s;
}

/* Desktop-size media query to give margins between books. */

@media screen and (min-width: 600px) {
    div.book-cover {
        width: calc(500px / var(--book-row-count));
    }
    div.book-cover:not(.selected-book) {
        margin: 0 1vw;
        margin-bottom: 1vw;
    }
}

div.book-cover:hover {
    box-shadow: 0px 0px 2vw var(--book-cover-shadow-color);
    cursor: pointer;
}

div.book-blurb {
    width: calc(100% - calc(var(--book-cover-height) * var(--book-cover-hw-ratio)) - 10%);
    /* About 5/6 of your average mobile device. */
    /* min-width: 350px; */
    min-width: calc(var(--selected-book-cover-height) * var(--book-cover-hw-ratio));
    /* max-width: 80%; */
}

@media screen and (max-width: 600px) {
    div.book-blurb {
        min-width: 90%;
        touch-action: pan-y;
    }
}

.book-blurb__invisible {
    display: none;
}

h1.book-title {
    font-family: 'Goudy Old Style Bold', Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    font-size: 2rem;
    margin: 0;
}

h2.book-subtitle {
    font-family: 'Cinzel', Georgia, 'Times New Roman', Times, serif;
    text-align: center;
    font-size: 1.2rem;
    margin: 0;
    padding-bottom: 1vh;
    /* border-bottom: 1px solid rgba(81, 56, 22, 1.0); */
}

h1.book-title + h2.book-subtitle::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.5ex;
    margin-top: 4ex;
    background: linear-gradient(90deg, transparent, rgba(255, 149, 0, 1), transparent);
}

div.book-description {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* font-weight: bold; */
    line-height: 1.4;
    text-align: justify;
    margin: 0;
    text-shadow: 1px 1px 0px rgba(0,0,0,0.9),
    -1px 1px 0px rgba(0,0,0,0.9),
    1px 1px 2px rgba(0,0,0,0.9),
    -1px 1px 2px rgba(0,0,0,0.9),
    0px 0px 7px black;
}

div.book-description p {
    margin: 1ex 0;
}

.cta-header {
    font-family: 'Cinzel', Georgia, 'Times New Roman', Times, serif;
    font-variant: small-caps;
    font-weight: 900;
    font-size: 16pt;
    text-decoration: underline;
    width: 100%;
    text-align: center;
    margin-bottom: 2ex;
}

.article-cta-buttons-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

@media screen and (max-width: 600px) {
    .article-cta-buttons-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .article-cta-buttons-container * {
        width: 80%;
        margin: 0;
        margin-bottom: 2ex;
    }
    div.book-description .article-cta-buttons-container {
        align-self: center;
    }
}

/* Desktop only,add padding to bottom of book description */
@media screen and (min-width: 600px) {
    div.book-description {
        font-size: 0.9rem;
        margin-bottom: 3vw;
    }
}

.article-button {
    font-family: 'Cinzel';
    font-weight: 900;
    color: rgb(167, 115, 44);
    background-color: black;
    text-decoration: none;
    padding: 1.5ex 1.5ch;
    text-align: center;
    /* width: 10ch; */
    border-radius: 7px;
    display: inline-block;
    transition: box-shadow 0.65s;
    border: 2px solid rgb(167, 115, 44);
    text-shadow: none;
    min-width: 16ch;
    text-align: center;
    margin: 1ex 1ch;
}

.article-button:hover {
    color: black;
    background-color: rgb(167, 115, 44);
    border: 2px solid black;
    box-shadow: 
        1px 1px 1.5vw var(--purchase-button-glow-color),
        -1px 1px 1.5vw var(--purchase-button-glow-color),
        1px -1px 1.5vw var(--purchase-button-glow-color),
        -1px -1px 1.5vw var(--purchase-button-glow-color);
}

.hooklines {
    margin-top: 1ex;
}

.hookline {
    margin: 0;
}

.indent {
    text-indent: 2ch;
}

/* Selected Book */
div.selected-book {
    width: var(--gallery-width);
    justify-content: space-around;
    order: -1; /* Brings selected book to start of flex. */
}

@media screen and (max-width: 600px) {
    div.selected-book {
        order: 1;
        touch-action: pan-y;
    }
}

div.selected-book .book-cover {
    box-shadow: 0px 0px 0.25vw var(--book-cover-shadow-color);
    cursor: auto; /* Removes pointer cursor from base book class */
    width: calc(var(--selected-book-cover-height) * var(--book-cover-hw-ratio));
    height: var(--selected-book-cover-height);
    margin-bottom: 5vh;
    max-width: none;
}

/*
    This handles the case where a *book* reflows on narrow
    screens (as opposed to the whole gallery).
*/

@media screen and (max-width: 600px) {
    div.selected-book .book-cover {
        margin-top: 2vh;
        margin-bottom: 2vh;
        touch-action: pan-y;
    }
}

div.selected-book .book-blurb {
    display: block;
}

/* Only animate on desktop, there isn't room on mobile really. */

@media screen and (min-width: 600px) {
    .animate-left {
        animation: var(--move-in-left-anim);
        -moz-animation: var(--move-in-left-anim);
        -webkit-animation: var(--move-in-left-anim);
        -o-animation: var(--move-in-left-anim);
        animation-play-state: running;
    }

    .animate-right {
        animation: var(--move-in-right-anim);
        -moz-animation: var(--move-in-right-anim);
        -webkit-animation: var(--move-in-right-anim);
        -o-animation: var(--move-in-right-anim);
        animation-play-state: running;
    }
}

#rubidium-cover {
    content: url('../../images/books/legion/rubidium/rubidium.webp');
}

#scythe-cover {
    content: url('../../images/books/legion/scythe/scythe.webp');
}

#grim-cover {
    content: url('../../images/books/legion/grim/grim.webp');
}

#a-better-man-cover {
    content: url('../../images/books/legion/a-better-man/a-better-man.webp');
}

#forgiveness-cover {
    content: url('../../images/books/legion/forgiveness/forgiveness.webp');
}

@keyframes in-left-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * -1));
        opacity: 0%;
    }
    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}

@-moz-keyframes in-left-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * -1));
        opacity: 0%;
    }

    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}

@-webkit-keyframes in-left-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * -1));
        opacity: 0%;
    }
    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}

@-o-keyframes in-left-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * -1));
        opacity: 0%;
    }
    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}

@keyframes in-right-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * 2));
        opacity: 0%;
    }
    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}

@-moz-keyframes in-right-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * 2));
        opacity: 0%;
    }
    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}

@-webkit-keyframes in-right-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * 2));
        opacity: 0%;
    }
    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}

@-o-keyframes in-right-anim {
    0% {
        transform: translateX(calc(var(--book-anim-distance) * 2));
        opacity: 0%;
    }
    100% {
        transform: translateX(0vw);
        opacity: 100%;
    }
}