/* ===== BOOK / CODEX VISUAL STYLES ===== */

/* Cover wrapper */
.cover-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  perspective: 1200px;
}

/* Book cover - 3D perspective */
.book-cover {
  width: 320px;
  height: 440px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: left center;
  animation: coverFloat 4s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes coverFloat {
  0%, 100% { transform: rotateY(-8deg) rotateX(2deg); }
  50% { transform: rotateY(-4deg) rotateX(0deg) translateY(-6px); }
}

.cover-spine {
  position: absolute;
  left: -20px;
  top: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, #0a0806, var(--color-spine), #1a150e);
  transform: rotateY(-90deg);
  transform-origin: right center;
  border-radius: 2px 0 0 2px;
}

.cover-face {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a150e 0%, var(--color-leather) 50%, #0f0c08 100%);
  border: 2px solid var(--color-gold);
  border-radius: 0 6px 6px 0;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.5),
    0 0 30px rgba(212,168,83,0.15),
    4px 4px 20px rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-border {
  width: 85%;
  height: 85%;
  border: 1px solid rgba(212,168,83,0.4);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  position: relative;
}

.cover-emblem {
  animation: emblemPulse 3s ease-in-out infinite;
}
.cover-glyph {
  filter: invert(1) drop-shadow(0 0 12px rgba(254,231,67,0.5));
  object-fit: contain;
}

@keyframes emblemPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(254,231,67,0.3)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 20px rgba(254,231,67,0.6)); transform: scale(1.05); }
}

.cover-title {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-gold);
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 0 20px rgba(212,168,83,0.4);
}

.cover-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim);
  font-style: italic;
  text-align: center;
}

.cover-glyphs {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.cover-glyphs img {
  filter: invert(1);
  opacity: 0.5;
  animation: glyphFlicker 5s ease-in-out infinite;
  object-fit: contain;
}
.cover-glyphs img:nth-child(2) { animation-delay: 1.7s; }
.cover-glyphs img:nth-child(3) { animation-delay: 3.4s; }

@keyframes glyphFlicker {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; filter: drop-shadow(0 0 6px rgba(254,231,67,0.5)); }
}

/* Open button */
.btn-open {
  position: relative;
  padding: 14px 40px;
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  font-family: var(--font-title);
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease;
}
.btn-open:hover {
  color: var(--bg);
  background: var(--color-gold);
  box-shadow: 0 0 30px rgba(212,168,83,0.4);
}
.btn-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(254,231,67,0.15), transparent 70%);
  animation: btnGlow 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}


/* ======================================================
   OPEN BOOK LAYOUT - 3D angled with page-edge depth
   ====================================================== */

.book-open {
  display: flex;
  width: min(90vw, 920px);
  height: min(80vh, 600px);
  position: relative;
  transform-style: preserve-3d;
  box-shadow:
    0 0 40px rgba(0,0,0,0.6),
    0 0 80px rgba(212,168,83,0.08);
  border-radius: 6px;
  transform: perspective(2000px) rotateX(2deg) rotateY(-1deg);
  animation: pageBreath 6s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes pageBreath {
  0%, 100% { transform: perspective(2000px) rotateX(2deg) rotateY(-1deg) scale(1); }
  50%      { transform: perspective(2000px) rotateX(2deg) rotateY(-1deg) scale(1.003); }
}

/* Page-edge depth - stacked pages effect */
.book-open::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 3px;
  right: 3px;
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    #1a1510 0px, #241e14 1px, #1c1610 2px
  );
  border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  z-index: -1;
}


/* ======================================================
   PAGES
   ====================================================== */

.page {
  width: 50%;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0); /* GPU layer promotion */
}
.page-left {
  border-right: 1px solid rgba(212,168,83,0.15);
  border-radius: 6px 0 0 6px;
  background: linear-gradient(135deg, var(--bg-page) 0%, var(--bg-page-edge) 100%);
}
.page-right {
  border-radius: 0 6px 6px 0;
  background: linear-gradient(225deg, var(--bg-page) 0%, var(--bg-page-edge) 100%);
}

.page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(212,168,83,0.03) 28px,
      rgba(212,168,83,0.03) 29px
    );
  pointer-events: none;
  z-index: 1;
}

.page-inner {
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease;
}

/* Content hidden during transitions */
.page-inner.content-hidden {
  opacity: 0 !important;
}


/* ======================================================
   COVER → OPEN: The cover physically flips open
   ====================================================== */

/* Phase 1: The 3D cover rotates open along its spine (left edge) */
#view-cover.cover-opening .btn-open {
  opacity: 0;
  transition: opacity 0.1s;
}

#view-cover.cover-opening .book-cover {
  animation: coverFlipOpen 0.65s ease forwards;
}

@keyframes coverFlipOpen {
  0% {
    transform: rotateY(-8deg) rotateX(2deg);
    opacity: 1;
  }
  20% {
    transform: rotateY(-12deg) rotateX(2deg) scale(1.05);
    opacity: 1;
  }
  60% {
    transform: rotateY(-70deg) rotateX(0deg) scale(1.06);
    opacity: 0.7;
  }
  100% {
    transform: rotateY(-110deg) rotateX(0deg) scale(1.08);
    opacity: 0;
  }
}

/* Phase 2: The open book settles into position - tilt drop + content fade */
.book-open.book-entering {
  animation: bookGrowIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}

@keyframes bookGrowIn {
  0% {
    opacity: 0;
    transform: perspective(2000px) rotateX(5deg) rotateY(-3deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: perspective(2000px) rotateX(2deg) rotateY(-1deg);
  }
}

/* Content fades in slightly delayed during entrance */
.book-open.book-entering .page-inner {
  opacity: 0;
  animation: contentFadeIn 0.35s ease-out 0.4s forwards;
}

@keyframes contentFadeIn {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* ======================================================
   OPEN → COVER: Book closes and cover flips shut
   ====================================================== */

/* Phase 1: Book pages fold closed - cover swings over from right to left */
.book-open.book-exiting {
  animation: bookClose 0.75s ease-in forwards !important;
}

@keyframes bookClose {
  0%   { opacity: 1; transform: perspective(2000px) rotateX(2deg) rotateY(-1deg); }
  99%  { opacity: 0; transform: perspective(2000px) rotateX(2deg) rotateY(-1deg); visibility: visible; }
  100% { opacity: 0; transform: perspective(2000px) rotateX(2deg) rotateY(-1deg); visibility: hidden; }
}

/* Both pages fold toward the spine simultaneously during close */
.book-open.book-exiting .page-right {
  transform-origin: left center;
  animation: pageRightFold 0.65s ease-in forwards;
  overflow: visible;
  backface-visibility: hidden;
}

@keyframes pageRightFold {
  0% {
    transform: perspective(1200px) rotateY(0);
    box-shadow: none;
  }
  100% {
    transform: perspective(1200px) rotateY(-88deg);
    box-shadow: -8px 0 25px rgba(0,0,0,0.5);
  }
}

.book-open.book-exiting .page-left {
  transform-origin: right center;
  animation: pageLeftFold 0.65s ease-in forwards;
  overflow: visible;
  backface-visibility: hidden;
}

@keyframes pageLeftFold {
  0% {
    transform: perspective(1200px) rotateY(0);
    box-shadow: none;
  }
  100% {
    transform: perspective(1200px) rotateY(88deg);
    box-shadow: 8px 0 25px rgba(0,0,0,0.5);
  }
}

/* Hide content immediately when closing */
.book-open.book-exiting .page-inner {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Phase 2: Cover reappears - flips closed from open position */
#view-cover.cover-closing .btn-open {
  opacity: 0;
  animation: btnFadeIn 0.3s ease-out 0.4s forwards;
}

@keyframes btnFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#view-cover.cover-closing .book-cover {
  animation: coverFlipClose 0.55s ease-out forwards;
}

@keyframes coverFlipClose {
  0% {
    transform: rotateY(-110deg) rotateX(0deg) scale(1.08);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: rotateY(-8deg) rotateX(2deg);
    opacity: 1;
  }
}


/* ======================================================
   PAGE TURN (interior-to-interior transitions)
   Forward = deeper into book (toc→chapter→entry)
   Backward = back toward front (entry→chapter→toc)
   ====================================================== */

/* ── PAGE TURN: Two-phase system (Turn.js inspired) ──
   Phase 1 (outgoing view): page swings OUT to 90deg (edge-on)
   Phase 2 (incoming view): page swings IN from 90deg back to flat
   View swap happens at the 90deg midpoint for seamless illusion
*/

/* Phase 1: Right page swings OUT (forward navigation) */
.page-exit-forward .page-right {
  transform-origin: left center;
  animation: pageSwingOut 0.24s ease-in forwards;
}

@keyframes pageSwingOut {
  0% {
    transform: perspective(1200px) rotateY(0);
    box-shadow: none;
  }
  100% {
    transform: perspective(1200px) rotateY(-88deg);
    box-shadow: -8px 0 25px rgba(0,0,0,0.5);
  }
}

/* Phase 2: Right page swings IN (forward navigation - on new view) */
.page-enter-forward .page-right {
  transform-origin: left center;
  animation: pageSwingIn 0.26s ease-out forwards;
}

@keyframes pageSwingIn {
  0% {
    transform: perspective(1200px) rotateY(-88deg);
    box-shadow: -8px 0 25px rgba(0,0,0,0.5);
  }
  100% {
    transform: perspective(1200px) rotateY(0);
    box-shadow: none;
  }
}

/* Phase 1: Left page swings OUT (backward navigation) */
.page-exit-backward .page-left {
  transform-origin: right center;
  animation: pageSwingOutRight 0.24s ease-in forwards;
}

@keyframes pageSwingOutRight {
  0% {
    transform: perspective(1200px) rotateY(0);
    box-shadow: none;
  }
  100% {
    transform: perspective(1200px) rotateY(88deg);
    box-shadow: 8px 0 25px rgba(0,0,0,0.5);
  }
}

/* Phase 2: Left page swings IN (backward - on new view) */
.page-enter-backward .page-left {
  transform-origin: right center;
  animation: pageSwingInRight 0.26s ease-out forwards;
}

@keyframes pageSwingInRight {
  0% {
    transform: perspective(1200px) rotateY(88deg);
    box-shadow: 8px 0 25px rgba(0,0,0,0.5);
  }
  100% {
    transform: perspective(1200px) rotateY(0);
    box-shadow: none;
  }
}

/* Hide content during exit phase */
.page-exit-forward .page-inner,
.page-exit-backward .page-inner {
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* Fade content in during enter phase */
.page-enter-forward .page-inner,
.page-enter-backward .page-inner {
  animation: contentReveal 0.3s ease-out 0.1s both;
}

@keyframes contentReveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Shadow on the stationary page during turn */
.page-exit-forward .page-left::after,
.page-enter-forward .page-left::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(to right, transparent 50%, rgba(0,0,0,0.1) 100%);
  animation: shadowFade 0.3s ease-in-out both;
}

.page-exit-backward .page-right::after,
.page-enter-backward .page-right::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(to left, transparent 50%, rgba(0,0,0,0.1) 100%);
  animation: shadowFade 0.3s ease-in-out both;
}

@keyframes shadowFade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Seal break animation (chapter unlock) */
.seal-break {
  animation: sealBreak 0.8s ease-out;
}
@keyframes sealBreak {
  0%   { transform: scale(0.8); opacity: 0; filter: brightness(3) saturate(0); }
  50%  { transform: scale(1.05); filter: brightness(1.5) saturate(1.5); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1) saturate(1); }
}

@keyframes pageGlyphFlicker {
  0%, 92%, 100% { opacity: 0; }
  94% { opacity: 0.15; }
  96% { opacity: 0; }
  98% { opacity: 0.1; }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 700px) {
  /* Cover */
  .cover-wrapper { gap: 20px; padding: 1rem; }
  .book-cover {
    width: min(280px, 80vw);
    height: min(380px, 110vw);
    animation: none;
    transform: rotateY(-4deg) rotateX(1deg);
  }
  .cover-title { font-size: 20px; }
  .cover-subtitle { font-size: 10px; }
  .cover-glyphs { gap: 10px; }
  .cover-glyphs img { width: 24px; height: 24px; }
  .btn-open { padding: 12px 32px; font-size: 14px; }
  .cover-spine { left: -14px; width: 14px; }

  /* === Open book: full-screen post-it layout === */
  .book-open {
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 0;
    border-radius: 0;
    transform: none !important;
    animation: none !important;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
  }
  .book-open::after { display: none; }

  /* Pages: top = compact header, bottom = scrollable content */
  .page { width: 100% !important; }
  .page-left {
    border-right: none !important;
    border-bottom: 1px solid rgba(212,168,83,0.2) !important;
    border-radius: 0 !important;
    flex: 0 0 auto;
    max-height: 42vh;
    overflow-y: auto;
  }
  .page-right {
    border-radius: 0 !important;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
  }

  /* Book open: post-it slide in from bottom */
  .book-open.book-entering { animation: mbSlideUp   0.4s cubic-bezier(.15,.85,.3,1) forwards !important; }
  .book-open.book-exiting  { animation: mbSlideDown 0.32s ease-in forwards !important; }
  .book-open.book-exiting .page-right,
  .book-open.book-exiting .page-left { transform: none !important; animation: none !important; }

  /* Page turns: vertical post-it flip */
  .book-open.page-exit-forward   { animation: mbFlipOutUp   0.24s ease-in  forwards !important; }
  .book-open.page-enter-forward  { animation: mbFlipInUp    0.26s ease-out forwards !important; }
  .book-open.page-exit-backward  { animation: mbFlipOutDown 0.24s ease-in  forwards !important; }
  .book-open.page-enter-backward { animation: mbFlipInDown  0.26s ease-out forwards !important; }

  /* Suppress desktop child-targeted rotateY animations */
  .page-exit-forward  .page-right,
  .page-enter-forward .page-right,
  .page-exit-backward .page-left,
  .page-enter-backward .page-left {
    transform: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
  .page-exit-forward  .page-left::after,
  .page-enter-forward .page-left::after,
  .page-exit-backward .page-right::after,
  .page-enter-backward .page-right::after { display: none; }

  /* Content reveal on book open */
  .book-open.book-entering .page-inner { animation: mbFadeIn 0.3s ease 0.15s both !important; }
}