/* TOC */

/* 1. SHELF */
/* 2. BOOK BINDINGS */
/* 3. BOOK WIDTHS */
/* 4. TITLE SHADOWS */
/* 5. DEFAULT BOOK ATTRIBUTES */
/* 6. GRAPHIC DESIGN */
/* 7. DATA VISUALIZATION */
/* 8. PHOTOGRAPHY */
/* 9. LANDSCAPE DESIGN */
/* 10. CREATIVE WRITING */
/* 11. WEB DESIGN */
/* 12. OPEN BOOK */
/* 13. BACK ARROW */
/* 14. UTILITY CLASSES */

/* ~~ 1. SHELF */

.bookshelf__depth {
  position: absolute;
  /* border-image: 
    linear-gradient(
      black,
      whitesmoke
    );
  border-width: 19rem calc(100vw / 2);
  border-image-slice: 50%; */
  border-image-source: linear-gradient(
      black,
      whitesmoke
    );
border-image-slice: 30;
border-image-repeat: round;
border-width: 19rem 50vw;
}

.bookshelf {  
  padding: 3rem 0;
  width: clamp(365px, 80vw, 500px);
  margin-left: auto;
  margin-right: auto;
}

/* */

/* ~~ 2. BOOK BINDINGS */

.book {                   /* <-- BEM Block */
  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 10%;  /* <-- 100% flex-basis was the key to ending weird book behavior on hover or after click, but once I refactored and moved some properties from child to parent, this actually stopped the sizes from varying. I don't understand the behavior. Adding an event listener in JS seems to affect the behavior and make it more erratic, but, for now at least, the 10% flex-basis is working.*/
  
  height: 32rem;

  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border-radius: 5px;
  box-shadow: 0 0.5rem 1rem 0rem rgba(0, 0, 0, 0.4);

  background-image: url(../images/leather_texture.jpg);
  background-size: auto 100%;

  writing-mode: vertical-rl;
}

.book:hover {
  box-shadow: 0 0.5rem 3rem -0.5rem rgba(0, 0, 0, 0.4);
  z-index: 10;
  margin-top: -15px;
  transform: scale(1.03, 1.03);
}

/* */

/* ~~ 3. BOOK WIDTHS */

.book--graphic {
  flex-grow: 6;
}
.book--data {
  flex-grow: 5;
}
.book--photo {
  flex-grow: 5;
}
.book--landscape {
  flex-grow: 6;
  align-items: start;
}
.book--writing {
  flex-grow: 4;
  gap: .5rem;
}
.book--web {
  flex-grow: 5;
  gap: .75rem;
}

/* */

/* ~~ 4. TITLE SHADOWS */

.book__title {
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8);
}

.book__title--web {
  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.6);
}

/* */

/* ~~ 5. DEFAULT BOOK ATTRIBUTES */

.book__shading {
  position: absolute;

  height: 100%;
  width: 100%;
  box-shadow: inset -0.35rem 0 0.5rem rgba(0, 0, 0, 0.4),
    inset 0.35rem 0 0.5rem rgba(0, 0, 0, 0.4);
  /* writing-mode: vertical-rl; */


  border-top-style: solid;
  border-top-width: 1px;
  border-image: 
    linear-gradient(
      to right,
      #333,
      #333 15%,
      antiquewhite 30%,
      antiquewhite 70%,
      #333 85%,
      #333);
  border-image-slice: 1;

}

.book__title {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  margin: 0;
  z-index: 10;
}

.book__contents {
  display: flex;
  position: absolute;
  opacity: 0;
  width: 0;
}

/* */

/* ~~ 6. GRAPHIC DESIGN */

.book__shading--graphic {
  background: radial-gradient(
      ellipse at top,
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
}

.graphic-title {
  font-size: clamp(1.6rem, 4.5vw, 2rem);
  align-items: center;
  font-family: "Unica One", cursive;
  color: darkorange;
  gap: clamp(0, 1vw, .2rem);
}

.graphic-title-sub {
  font-size: clamp(.75rem, 3vw, 1rem);
}

/* */

/* ~~ 7. DATA VISUALIZATION */

.book__shading--data {
  background: radial-gradient(
      ellipse at top,
      rgba(50, 10, 87, 0.55),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
}

.data-title {
  font-family: "Smooch Sans", sans-serif;
  color: rgb(221, 206, 206);
  font-size: clamp(1.5rem, 4.5vw, 2rem);
}

/* */

/* ~~ 8. PHOTOGRAPHY */

.book__shading--photo {
  background: radial-gradient(
      ellipse at top,
      rgba(189, 147, 189, 0.55),
      rgba(0, 0, 0, 0.85)
    ),
    radial-gradient(ellipse at bottom, rgba(185, 154, 154, 0.5), transparent);
}

.photo-title {
  font-family: "Nothing You Could Do", cursive;
  color: #212121;
}

/* */

/* ~~ 9. LANDSCAPE DESIGN */

.book__shading--landscape {
  background: radial-gradient(
      ellipse at top,
      rgba(2, 95, 18, 0.55),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
}

.landscape-title {
  font-family: "Fredericka the Great", cursive;
  color: rgb(247, 229, 192);
  margin-top: 8rem;
}

.landscape-title-sub {
  font-size: clamp(.75rem, 3vw, 1rem);
}

.book--landscape.active {
  align-items: center;
}

/* */

/* ~~ 10. CREATIVE WRITING */

.book__shading--writing {
  background: radial-gradient(
      ellipse at top,
      rgba(94, 15, 6, 0.76),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
}

.writing-title {
  font-family: "Lora", serif;
  color: rgb(216, 191, 191);
}

.writing-title-sub {
  font-size: clamp(1rem, 3vw, 1.25rem);
}

/* */

/* ~~ 11. WEB DESIGN */

.book__shading--web {
  background: radial-gradient(
      ellipse at top,
      rgba(255, 255, 255, 0.63),
      rgba(0, 0, 0, 0.75)
    ),
    radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
}

.book__title--web {
  font-family: "Inconsolata", monospace;
  color: #222;
}

.book__title--web_sub {
  font-size: clamp(1rem, 3vw, 1.25rem);
}

/* */

/* ~~ 12. OPEN BOOK */

.book.active {
  box-shadow: 0 0.5rem 3rem -0.5rem rgba(0, 0, 0, 0.4);
  position: absolute;
  width: min(50rem,95vw);
  height: 32rem;
  margin-top: -22px;
  z-index: 100;
  border-top-width: 0;
  cursor: auto;
}

.book.active:hover {
  margin-top: -22px;
  transform: none;
}

.book.active .book__shading {
  border-top-width: 0;
  align-items: center;
}

.book.active .book__contents {
  background-color: antiquewhite;
  opacity: 100;
  width: calc(100% - min(6vw, 50px));
  height: calc(100% - min(6vw, 50px));
  border-left-style: double;
  border-right-style: double;
  border-left-width: 4px;
  border-right-width: 4px;
  border-color: rgb(92, 92, 92);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: antiquewhite;
  border-bottom-style: groove;
  border-bottom-color: rgb(155, 153, 153);
  border-bottom-width: 2px;
  color: #333;
  writing-mode: horizontal-tb;
  font-family: "Nothing You Could Do", cursive;
}

.book__page {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: clamp(1rem, 3vw, 2rem);
  flex: 1 1 0px;
  min-width: 0;
}

.book__page h3 {
  font-size: clamp(1rem, 3vw, 1.2rem);
  margin: 0;
}

.book__page--grid {
  display: grid;
  gap: 5px;
  grid-template: "1fr 1fr 1fr" "1fr 1fr 1fr" "1fr 1fr 1fr";
}

.book__illus {
  border: 5px solid white;
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
}

.book__text {
  margin-top: clamp(.5rem, 2vw, 1rem);
  margin-bottom: clamp(.5rem, 2vw, 1rem);
  margin-left: 0;
  margin-right: 0;
  font-size: clamp(.85rem, 3vw, 1rem);
  line-height: clamp(.85rem, 3vw, 1.5rem);
}

.book__page-shading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(30, 30, 30, 0.1),
    transparent 25%,
    transparent 30%,
    rgba(30, 30, 30, 0.3) 48%,
    rgba(30, 30, 30, 0.4) 50%,
    transparent 50%,
    rgba(30, 30, 30, 0.3) 70%,
    transparent
  );
}

.book.active .book__inside_shading {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    transparent 43%,
    rgba(30, 30, 30, 0.3) 44%,
    rgba(30, 30, 30, 0.5) 45%,
    rgba(30, 30, 30, 0.4) 50%,
    rgba(30, 30, 30, 0.65) 55%,
    rgba(30, 30, 30, 0.3) 56%,
    transparent 57%,
    transparent
  );
}

/* */

/* ~~ 13. BACK ARROW */

.btn {
  border: none;
  cursor: pointer;
}

.btn--back {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  opacity: 85%;
  margin: 1%;
  gap: 2px;
  width: 0;
}

.book.active .btn--back {
  width: auto;
}

.btn--back p {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 500;
  font-size: .8rem;
  margin: 0;
  text-align: center;
}

.btn--back:hover {
  opacity: 100%;
  filter: drop-shadow(0px 0px 2px whitesmoke);
}

/* */

/* ~~ 14. UTILITY CLASSES */

.unpublished {
  opacity: 0.55;
}

.unpublished.active {
  opacity: 1;
}

/*  */