/* ============================================================
   Scene, Book, Leaf & Flip Animation
   ============================================================ */

/* === SCENE LAYOUT === */
.scene {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  transform: scale(var(--book-scale));
  transform-origin: center center;
  opacity: 0;
  animation: fadeIn .6s ease .15s forwards;
}

@keyframes fadeIn { to { opacity: 1; } }

.scene-header {
  text-align: center;
  color: var(--gold);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: .6;
}

/* === BOOK === */
.book-wrap { perspective: 1500px; -webkit-perspective: 1500px; }

.book {
  position: relative;
  width: var(--spread-w);
  height: var(--page-h);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: translateX(var(--tx, 0px));
  clip-path: inset(-100px);
  transition: transform .9s cubic-bezier(.645,.045,.355,1),
              clip-path .9s cubic-bezier(.645,.045,.355,1);
  border-radius: 3px;
}
.book[data-state="0"] { --tx: calc(var(--page-w) * -.5); clip-path: inset(-100px -100px -100px 50%); }
.book[data-state="6"] { --tx: calc(var(--page-w) * .5); clip-path: inset(-100px 50% -100px -100px); }

/* Shadows */
.book-shadow {
  position: absolute; top: 0; right: 0;
  width: 100%; height: 100%;
  border-radius: 3px; pointer-events: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 5px 20px rgba(0,0,0,.25);
  transition: left .9s cubic-bezier(.645,.045,.355,1), width .9s cubic-bezier(.645,.045,.355,1), box-shadow .9s cubic-bezier(.645,.045,.355,1);
}
.book[data-state="0"] .book-shadow { left: 50%; width: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.10); }
.book[data-state="6"] .book-shadow { left: 0; width: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.10); }
.spine {
  position: absolute; left: 50%; top: 0;
  width: 6px; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    rgba(0,0,0,.12), rgba(0,0,0,.04) 40%,
    rgba(0,0,0,.04) 60%, rgba(0,0,0,.12));
  z-index: 500; pointer-events: none;
  opacity: 0; transition: opacity .6s;
}
.book:not([data-state="0"]):not([data-state="6"]) .spine { opacity: 1; }

/* === STATIC PAGES (left bg / back cover) === */
.pg-static {
  position: absolute; top: 0;
  width: var(--page-w); height: var(--page-h);
  overflow: hidden; border-radius: 2px;
  transform: translateZ(-2px);
}
.pg-left  { left: 0; background: var(--navy-deeper); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.pg-right { left: var(--page-w); opacity: 0; visibility: hidden; /* visible only for PDF clone */ }
.book:not([data-state="0"]):not([data-state="6"]) .pg-left { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }

/* === LEAF (flippable page) === */
.leaf {
  position: absolute; top: 0; left: 50%;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
.leaf.flipped { transform: rotateY(-180deg); }

/* === FACE === */
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden; border-radius: 2px;
}
.face-front { transform: translateZ(0.5px); }
.face-back { transform: rotateY(180deg) translateZ(0.5px); }

/* Fold shadow on inner edges */
.face-front::after,
.face-back::after {
  content: ''; position: absolute; top: 0;
  width: 35px; height: 100%;
  pointer-events: none; z-index: 10;
}
.face-front::after { left: 0; background: linear-gradient(to right, rgba(0,0,0,.05), transparent); }
.face-back::after  { right: 0; background: linear-gradient(to left, rgba(0,0,0,.05), transparent); }


/* === PAGE SHELL === */
.pg { width: 100%; height: 100%; position: relative; overflow: hidden; }