/* ============================================================
   BOOK ENGINE + page furniture
   ============================================================ */

.stage{
  position:relative;
  width:100%;height:100%;
  display:grid;place-items:center;
  perspective:2600px;
  perspective-origin:50% 42%;
}

/* ---------- Closed cover scene ---------- */
.cover-scene{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:26px;
  transition:opacity .6s ease, transform .9s cubic-bezier(.7,0,.3,1);
}
.cover-scene.gone{opacity:0;transform:scale(.94) translateY(8px);pointer-events:none;}

.book-closed{
  position:relative;
  width:min(380px,72vw);
  aspect-ratio:380/520;
  transform-style:preserve-3d;
  cursor:pointer;
  transition:transform .5s cubic-bezier(.5,0,.2,1);
}
.book-closed:hover{transform:rotateX(2deg) translateY(-6px);}
.book-closed.opening{transform-origin:left center;animation:coverOpen .95s cubic-bezier(.6,0,.25,1) forwards;}
@keyframes coverOpen{
  to{transform:perspective(1600px) rotateY(-118deg) translateX(-4%);opacity:0;}
}

/* ---------- Open book ---------- */
.book-open{
  position:relative;
  height:min(680px,80vh);
  aspect-ratio:1180/700;
  max-width:95vw;
  transform-style:preserve-3d;
  filter:drop-shadow(0 30px 60px rgba(20,12,5,.55));
  opacity:0;transform:scale(.92);
  transition:opacity .6s ease .25s, transform .7s cubic-bezier(.5,0,.2,1) .2s;
}
.book-open.shown{opacity:1;transform:scale(1);}

/* hard cover slab behind pages */
.book-open::before{
  content:"";position:absolute;inset:-14px -18px -18px -18px;
  background:linear-gradient(135deg,#3a2414,#28180c);
  border-radius:6px 10px 10px 6px;
  box-shadow:inset 0 0 0 2px rgba(255,220,170,.06), 0 10px 30px rgba(0,0,0,.5);
  z-index:0;
}

.spread{
  position:absolute;inset:0;z-index:1;
  display:flex;
  border-radius:3px;
  overflow:hidden;
}
/* center spine */
.spread::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:54px;transform:translateX(-50%);
  pointer-events:none;z-index:30;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(40,24,10,.20) 38%, rgba(40,24,10,.42) 50%,
    rgba(40,24,10,.20) 62%, rgba(0,0,0,0) 100%);
}

.page{
  position:relative;
  width:50%;height:100%;
  overflow:hidden;
  background-color:var(--realm-paper);
}
.page-inner{
  position:absolute;inset:0;
  padding:clamp(20px,3.2vh,42px);
  display:flex;flex-direction:column;
  overflow:hidden;
}
/* page edge gutter shading toward spine */
.page.left .page-inner{box-shadow:inset -38px 0 38px -34px rgba(40,24,10,.5);}
.page.right .page-inner{box-shadow:inset 38px 0 38px -34px rgba(40,24,10,.5);}

/* ---------- Flipping leaf ---------- */
.flipper{
  position:absolute;top:0;height:100%;width:50%;
  z-index:40;
  transform-style:preserve-3d;
  will-change:transform;
}
.flipper.next{right:0;transform-origin:left center;}
.flipper.prev{left:0;transform-origin:right center;}
.flip-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
  background-color:var(--realm-paper);
}
.flip-face.back{transform:rotateY(180deg);}
/* moving shadow on the turning leaf */
.flip-face::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:60;
  background:linear-gradient(90deg, rgba(30,18,8,.35), rgba(30,18,8,0) 60%);
  opacity:0;transition:opacity .2s;
}
.flipper.turning .flip-face.front::before{opacity:.6;}

/* ---------- Navigation ---------- */
.nav-arrow{
  position:fixed;top:50%;transform:translateY(-50%);
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;z-index:80;
  background:rgba(250,246,239,.10);backdrop-filter:blur(6px);
  border:1px solid rgba(250,246,239,.22);
  color:var(--cream);transition:.25s;
}
.nav-arrow:hover{background:rgba(250,246,239,.2);transform:translateY(-50%) scale(1.06);}
.nav-arrow:disabled{opacity:0;pointer-events:none;}
.nav-arrow.prev{left:max(18px,3vw);}
.nav-arrow.next{right:max(18px,3vw);}
.nav-arrow svg{width:22px;height:22px;}

/* top shell bar */
.shell{
  position:fixed;top:0;left:0;right:0;z-index:85;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px max(18px,3vw);
  color:var(--cream);
  pointer-events:none;
}
.shell > *{pointer-events:auto;}
.shell-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  opacity:.8;display:flex;align-items:center;gap:10px;
}
.shell-title .dot{width:7px;height:7px;border-radius:50%;background:var(--cat-orange);}
.shell-tools{display:flex;align-items:center;gap:10px;}
.pill{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  padding:7px 12px;border-radius:999px;
  background:rgba(250,246,239,.10);border:1px solid rgba(250,246,239,.22);
  color:var(--cream);transition:.2s;display:flex;align-items:center;gap:7px;
}
.pill:hover{background:rgba(250,246,239,.2);}
.pill.on{background:var(--cat-orange);border-color:var(--cat-orange);color:#241307;}
.lang-toggle{display:flex;border-radius:999px;overflow:hidden;border:1px solid rgba(250,246,239,.22);}
.lang-toggle button{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:7px 12px;color:var(--cream);
  background:rgba(250,246,239,.06);transition:.2s;
}
.lang-toggle button.active{background:var(--cat-orange);background:var(--cat-orange);color:#241307;}

/* page counter */
.page-counter{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:80;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:rgba(250,246,239,.7);
  display:flex;align-items:center;gap:12px;
}
.page-counter .chap{color:var(--cat-orange);text-transform:uppercase;}

/* progress dots */
.chap-dots{display:flex;gap:7px;}
.chap-dots button{width:8px;height:8px;border-radius:50%;background:rgba(250,246,239,.28);transition:.2s;}
.chap-dots button.active{background:var(--cat-orange);transform:scale(1.3);}

@media (prefers-reduced-motion:reduce){
  .flipper{transition:none!important;animation:none!important;}
  .book-closed.opening{animation-duration:.01ms;}
}

/* ---------- Cat walker (roams the desk) ---------- */
.stage.hero-active #welcome-cat-anchor{opacity:0;}
.cat-clickable{pointer-events:auto;cursor:pointer;}
.cat-bubble{
  position:absolute;left:18px;bottom:104px;z-index:64;pointer-events:none;
  font-family:var(--grotesk);font-weight:700;font-size:14px;letter-spacing:.01em;
  background:var(--cream);color:#241307;padding:8px 14px;border-radius:14px;
  border:2px solid #241307;box-shadow:3px 3px 0 rgba(36,19,7,.4);
  animation:bubblePop .26s cubic-bezier(.2,1.4,.4,1) both;white-space:nowrap;
}
.cat-bubble::after{
  content:"";position:absolute;left:22px;bottom:-9px;width:12px;height:12px;
  background:var(--cream);border-right:2px solid #241307;border-bottom:2px solid #241307;
  transform:rotate(45deg);
}
@keyframes bubblePop{from{opacity:0;transform:translateY(6px) scale(.7);}to{opacity:1;transform:none;}}.cat-walker{
  position:fixed;left:0;bottom:8px;z-index:62;
  width:150px;pointer-events:none;will-change:transform;
}
.cat-walker-flip{transition:transform .25s ease;}
.cat-bob.walking{animation:catBob .26s ease-in-out infinite;}
@keyframes catBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.cw-leg{transform-box:fill-box;transform-origin:50% 2%;}
.cat-bob.walking .cw-lA{animation:cwLegSwing .52s linear infinite;}
.cat-bob.walking .cw-lB{animation:cwLegSwing .52s linear infinite;animation-delay:-.26s;}
@keyframes cwLegSwing{0%{transform:rotate(17deg)}50%{transform:rotate(-17deg)}100%{transform:rotate(17deg)}}
.cw-tail{animation:cwTailIdle 2.4s ease-in-out infinite;}
.cat-bob.walking .cw-tail{animation:cwTailWalk 1.04s ease-in-out infinite;}
@keyframes cwTailIdle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(5deg)}}
@keyframes cwTailWalk{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(8deg)}}
.cat-bob.walking .cw-shadow{animation:cwShadow .26s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%;}
@keyframes cwShadow{0%,100%{transform:scaleX(1);opacity:.28}50%{transform:scaleX(.9);opacity:.2}}
@media (prefers-reduced-motion:reduce){
  .cat-bob, .cw-leg, .cw-tail, .cw-shadow{animation:none!important;}
}