/* ================================
   BOOK COVERS - Corey's Bookshop
   Book cover metaphor: spine, surfaces, edges
   ================================ */

/* ================================
   NOISE TEXTURE OVERLAY (global)
   ================================ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 10000;
}

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

/* --- BURGUNDY COVER (Header) --- */
.book-cover-burgundy {
  position: relative;
  display: flex;
  z-index: 10;
}

.cover-spine {
  width: var(--spine-width);
  flex-shrink: 0;
  position: relative;
  background: linear-gradient(
    90deg,
    var(--color-spine-dark) 0%,
    var(--color-spine-mid) 40%,
    var(--color-spine-light) 60%,
    var(--color-spine-mid) 80%,
    var(--color-spine-dark) 100%
  );
  box-shadow:
    inset -2px 0 4px rgba(0, 0, 0, 0.4),
    2px 0 6px rgba(0, 0, 0, 0.3);
}

.cover-spine::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.08) 2px,
      rgba(0, 0, 0, 0.04) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.02) 3px,
      rgba(255, 255, 255, 0.02) 4px
    );
}

.cover-spine::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.1;
  mix-blend-mode: overlay;
}

.cover-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cover-surface-burgundy {
  padding: 1rem 2rem;
  position: relative;
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 40%,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
      ellipse 80% 50% at 50% 20%,
      var(--color-burgundy-light) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--color-burgundy-dark) 0%,
      var(--color-burgundy-mid) 30%,
      var(--color-burgundy-mid) 60%,
      var(--color-burgundy-dark) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.cover-surface-burgundy::before,
.cover-surface-green::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 1px,
      rgba(0, 0, 0, 0.06) 1px,
      rgba(0, 0, 0, 0.03) 2px,
      transparent 2px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.04) 2px,
      rgba(0, 0, 0, 0.02) 3px,
      transparent 3px,
      transparent 5px
    );
  pointer-events: none;
}

.cover-surface-burgundy::after,
.cover-surface-green::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.cover-edge-bottom {
  height: 8px;
  background: linear-gradient(
    180deg,
    var(--color-burgundy-deep) 0%,
    var(--cover-board) 30%,
    var(--cover-board-light) 50%,
    var(--cover-board) 70%,
    #2A231C 100%
  );
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

/* --- GREEN COVER (Footer) --- */
.book-cover-green {
  position: relative;
  display: flex;
  z-index: 10;
  margin-top: auto;
}

.cover-edge-top {
  height: 8px;
  background: linear-gradient(
    0deg,
    var(--color-green-deep) 0%,
    var(--cover-board) 30%,
    var(--cover-board-light) 50%,
    var(--cover-board) 70%,
    #2A231C 100%
  );
  box-shadow:
    0 -2px 4px rgba(0, 0, 0, 0.15),
    0 -4px 8px rgba(0, 0, 0, 0.1),
    0 -8px 16px rgba(0, 0, 0, 0.05);
}

.cover-surface-green {
  padding: 1.5rem 2rem;
  text-align: center;
  position: relative;
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 60%,
      transparent 0%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
      ellipse 80% 50% at 50% 80%,
      var(--color-green-light) 0%,
      transparent 60%
    ),
    linear-gradient(
      0deg,
      var(--color-green-dark) 0%,
      var(--color-green-mid) 30%,
      var(--color-green-mid) 60%,
      var(--color-green-dark) 100%
    );
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* ================================
   INNER PAGE SPINE & EDGES
   ================================ */
.page-spine {
  width: var(--spine-width);
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  background: linear-gradient(
    90deg,
    var(--color-spine-dark) 0%,
    var(--color-spine-mid) 40%,
    var(--color-spine-light) 60%,
    var(--color-spine-mid) 80%,
    var(--color-spine-dark) 100%
  );
  box-shadow:
    inset -2px 0 4px rgba(0, 0, 0, 0.4),
    4px 0 12px rgba(0, 0, 0, 0.2);
}

.page-spine::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 2px,
      rgba(0, 0, 0, 0.08) 2px,
      rgba(0, 0, 0, 0.04) 3px
    );
}

.page-edges {
  width: var(--page-edge-width);
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 50;
  background: var(--color-parchment);
  box-shadow:
    inset 2px 0 8px rgba(0, 0, 0, 0.08),
    -4px 0 12px rgba(0, 0, 0, 0.05);
  border-right: var(--spine-width) solid var(--color-green-deep);
}

.page-edges::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  background: repeating-linear-gradient(
    90deg,
    rgba(60, 50, 40, 0.25) 0px,
    rgba(60, 50, 40, 0.25) 0.5px,
    transparent 0.5px,
    transparent 1.5px,
    rgba(60, 50, 40, 0.18) 1.5px,
    rgba(60, 50, 40, 0.18) 2px,
    transparent 2px,
    transparent 3.5px,
    rgba(60, 50, 40, 0.22) 3.5px,
    rgba(60, 50, 40, 0.22) 4px,
    transparent 4px,
    transparent 6px,
    rgba(60, 50, 40, 0.15) 6px,
    rgba(60, 50, 40, 0.15) 6.5px,
    transparent 6.5px,
    transparent 9px,
    rgba(60, 50, 40, 0.2) 9px,
    rgba(60, 50, 40, 0.2) 9.5px,
    transparent 9.5px,
    transparent 12px,
    rgba(60, 50, 40, 0.12) 12px,
    rgba(60, 50, 40, 0.12) 12.5px,
    transparent 12.5px,
    transparent 16px
  );
}

.page-edges::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.03) 40%,
    transparent 100%
  );
  pointer-events: none;
}

/* Inner page content wrapper */
.page-content-wrapper {
  flex: 1;
  margin-left: var(--spine-width);
  margin-right: var(--page-edge-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 10;
  box-shadow: inset 20px 0 30px -20px rgba(0, 0, 0, 0.1);
}

/* ================================
   LITERARY QUOTES
   ================================ */
.quote-top {
  position: fixed;
  left: calc(var(--spine-width) + 2rem);
  right: calc(var(--page-edge-width) + 2rem);
  top: 1rem;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-sm);
  color: rgba(107, 93, 77, 0.6);
  z-index: 40;
  pointer-events: none;
}

.quote-bottom {
  display: none;
}

/* ================================
   COVER BOARD COLOURS
   ================================ */
:root {
  --cover-board: #3D3028;
  --cover-board-light: #5A4D40;
}

/* ================================
   FRONT & BACK COVER - No page edges
   Homepage = front cover, Visit = back cover
   ================================ */
.page-home .page-edges,
.page-visit .page-edges {
  display: none;
}

/* Hide page spine on homepage (cover has its own spine) */
.page-home .page-spine {
  display: none;
}

.page-home .page-content-wrapper,
.page-visit .page-content-wrapper {
  margin-right: 0;
}

/* ================================
   MOBILE ADJUSTMENTS
   ================================ */
@media (max-width: 768px) {
  :root {
    --spine-width: 8px;
    --page-edge-width: 28px;
  }

  .cover-surface-burgundy,
  .cover-surface-green {
    padding: 1rem 1.5rem;
  }

  .quote-top,
  .quote-bottom {
    display: none;
  }
}