/*
  bookshelf.css
  Original source code from https://github.com/petargyurov/virtual-bookshelf
  Modified by shamimsulaiman.com
  License: Unlicense (Public Domain)
*/

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');

:root {
    --spine-pyramid: linear-gradient(
      315deg,
      transparent 75%,
      rgba(255, 255, 255, 0.1) 0
      ),
      linear-gradient(
        45deg,
         transparent 75%,
          rgba(255, 255, 255, 0.1) 0
      ),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 166px,
        transparent 0
      ),
      linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 0
      );
    --spine-stairs: repeating-linear-gradient(
        63deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 3px,
        transparent 0
      ),
      linear-gradient(
        127deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 90px,
        transparent 55%,
        transparent 0
      ),
      linear-gradient(
        transparent 51%,
        rgba(0, 0, 0, 0.1) 170px
      );
    --spine-argyle: repeating-linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 60px
      ),
      repeating-linear-gradient(
        60deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 60px
      ),
      linear-gradient(
        60deg,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.1) 75%,
        rgba(0, 0, 0, 0.1)
      ),
      linear-gradient(
        120deg,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.1) 75%,
        rgba(0, 0, 0, 0.1)
      );
    --spine-tartan: repeating-linear-gradient(
        transparent,
        transparent 50px,
        rgba(0, 0, 0, 0.4) 50px,
        rgba(0, 0, 0, 0.4) 53px,
        transparent 53px,
        transparent 63px,
        rgba(0, 0, 0, 0.4) 63px,
        rgba(0, 0, 0, 0.4) 66px,
        transparent 66px,
        transparent 116px,
        rgba(0, 0, 0, 0.5) 116px,
        rgba(0, 0, 0, 0.5) 166px,
        rgba(255, 255, 255, 0.2) 166px,
        rgba(255, 255, 255, 0.2) 169px,
        rgba(0, 0, 0, 0.5) 169px,
        rgba(0, 0, 0, 0.5) 179px,
        rgba(255, 255, 255, 0.2) 179px,
        rgba(255, 255, 255, 0.2) 182px,
        rgba(0, 0, 0, 0.5) 182px,
        rgba(0, 0, 0, 0.5) 232px,
        transparent 232px
      ),
      repeating-linear-gradient(
        270deg,
        transparent,
        transparent 50px,
        rgba(0, 0, 0, 0.4) 50px,
        rgba(0, 0, 0, 0.4) 53px,
        transparent 53px,
        transparent 63px,
        rgba(0, 0, 0, 0.4) 63px,
        rgba(0, 0, 0, 0.4) 66px,
        transparent 66px,
        transparent 116px,
        rgba(0, 0, 0, 0.5) 116px,
        rgba(0, 0, 0, 0.5) 166px,
        rgba(255, 255, 255, 0.2) 166px,
        rgba(255, 255, 255, 0.2) 169px,
        rgba(0, 0, 0, 0.5) 169px,
        rgba(0, 0, 0, 0.5) 179px,
        rgba(255, 255, 255, 0.2) 179px,
        rgba(255, 255, 255, 0.2) 182px,
        rgba(0, 0, 0, 0.5) 182px,
        rgba(0, 0, 0, 0.5) 232px,
        transparent 232px
      ),
      repeating-linear-gradient(
        125deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.2) 2px,
        rgba(0, 0, 0, 0.2) 3px,
        transparent 3px,
        transparent 5px,
        rgba(0, 0, 0, 0.2) 5px
      );
  }

/* --------- Layout --------- */
.bookshelf {
  width: 100%;
  margin-top: 70px;
  display: flex;
  flex-wrap: wrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  visibility: hidden;
}

.book {
  width: 75px;
  height: 420px;
  position: relative;
  margin-left: 1px;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

/* --------- Visuals (sides, spine, cover, top) --------- */
.side {
  position: absolute;
  border: 2px solid black;
  border-radius: 3px;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

/* spine uses a background-image variable as in original.
   NOTE: original defines --spine-tartan and friends; .spine used var(--tartan)
   (no --tartan defined). That mismatch is preserved to avoid changing behavior. */
.spine {
  position: relative;
  width: 75px;
  height: 420px;
  /* Patterns from: https://projects.verou.me/css3patterns/ */
  background-image: var(--spine-tartan);
  transform: rotateY(0deg) translateZ(0px);
}

.spine-title-wrapper {
  position: absolute;
  top: 0;
  bottom: 60px; /* reserve space for author name */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.spine-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: gold;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  line-height: 1.1;
  max-height: 100%;
  max-width: 90%;
}

.spine-author {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 10px;
  color: goldenrod;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  width: 90%;
  height: 48px;        /* ~4 lines at 10px font-size + line-height */
  line-height: 1.2;
  overflow: hidden;
}

.top {
  width: 75px;
  height: 285px;
  top: -2px;  /* hmm, why -2 and not 0? */
  background-image: linear-gradient(90deg, white 90%, gray 10%);
  background-size: 5px 5px;
  transform: rotateX(90deg) translateZ(142.5px) translateY(-142.5px);
}

.cover {
  width: 285px;
  height: 420px;
  top: 0px;
  background-size: contain;
  background-repeat: round;
  left: 75px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

/* --------- States & interactions --------- */
.bookshelf.loaded {
  opacity: 1;
  visibility: visible;
}

.book:hover {
  z-index: 1;
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px)
    translateX(-30px);
}

/* --------- Animations / Transitions --------- */
/* Transitions are kept exactly as in original to preserve timing and feel */

/* --------- Responsive --------- */
/* No media queries were present in the original; kept intact */