/* ==========================================================================
   LAYOUT
   Page reset, global typography defaults, and the book/flip mechanics
   (stage, book shell, page turning, nav controls). No content styling here
   — see components.css for how content inside a page looks.
   ========================================================================== */

/* ---------- Reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body{ height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  background:var(--stage-bottom);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  height:100vh; height:100dvh;
}

/* ---------- Stage ---------- */
.stage{
  position:relative; width:100vw; height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 1000px 600px at 50% 0%, rgba(47,75,214,0.10), transparent 60%),
    linear-gradient(180deg, var(--stage-top) 0%, var(--stage-bottom) 100%);
  perspective:2600px;
  padding:20px 20px calc(84px + env(safe-area-inset-bottom, 0px));
}
@media (max-width:700px){
  .stage{ perspective:1400px; padding:14px 8px calc(78px + env(safe-area-inset-bottom, 0px)); }
}

.book-shell{ position:relative; width:min(94vw, 1100px); height:100%; max-height:720px; }

/* soft light the book appears to be resting on */
.book-glow{
  position:absolute; left:4%; right:4%; bottom:-30px; height:90px;
  background:radial-gradient(ellipse 62% 100% at 50% 0%, rgba(120,140,240,0.55) 0%, rgba(47,75,214,0.35) 35%, rgba(47,75,214,0.14) 60%, transparent 78%);
  filter:blur(20px);
  z-index:0; pointer-events:none;
  animation:glowPulse 3.2s ease-in-out infinite;
}
.book-glow::before{
  content:''; position:absolute; left:8%; right:8%; top:-4px; height:10px;
  background:linear-gradient(90deg, transparent, var(--accent) 12%, #c8d2ff 50%, var(--accent) 88%, transparent);
  filter:blur(2px); border-radius:50%;
  box-shadow:0 0 30px 6px rgba(47,75,214,0.35);
}
@keyframes glowPulse{
  0%,100%{ opacity:.75; transform:scaleX(1); }
  50%{ opacity:1; transform:scaleX(1.05); }
}
@media (prefers-reduced-motion:reduce){ .book-glow{ animation:none; } }

/* stacked-paper edge peeking out behind the book = the pages still to come */
.page-stack{
  position:absolute; top:8px; bottom:8px; right:-7px; width:14px;
  border-radius:0 10px 10px 0;
  background:
    repeating-linear-gradient(180deg, rgba(20,26,60,0.06) 0px, rgba(20,26,60,0.06) 1px, transparent 1px, transparent 4px),
    linear-gradient(90deg, #e4e7f2, #d3d7e6);
  box-shadow:2px 4px 18px rgba(20,26,60,0.12);
  z-index:0;
}
.page-stack::before{
  content:''; position:absolute; inset:4px -3px 4px 0; right:-4px;
  background:linear-gradient(90deg, #e9ebf4, #dcdfec);
  border-radius:0 8px 8px 0; box-shadow:2px 4px 14px rgba(20,26,60,0.10); z-index:-1;
}

.book{
  position:relative;
  width:100%;
  height:100%;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(20,26,60,0.18), 0 0 0 1px rgba(20,26,60,0.06), 0 14px 46px rgba(47,75,214,0.14);
  background:var(--paper);
  transform-style:preserve-3d;
  z-index:1;
}
/* spine / binding shadow along the bound edge */
.book::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:34px;
  background:linear-gradient(90deg, rgba(20,26,60,0.10), transparent);
  z-index:60; pointer-events:none;
}

.page{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--paper);
  transform-origin:left center;
  transition:transform var(--flip-speed) var(--flip-ease);
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  overflow-y:auto; overflow-x:hidden;
  box-shadow:3px 0 24px rgba(20,26,60,0.08);
}
.page::-webkit-scrollbar{ width:6px; }
.page::-webkit-scrollbar-thumb{ background:rgba(20,26,60,0.15); border-radius:6px; }

/* shading sweep that sells the paper turning through the light */
.page::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(20,26,60,0.16), rgba(20,26,60,0.02) 40%, transparent 60%);
  opacity:0; transition:opacity var(--flip-speed) ease;
}
.page.turning::after{ opacity:1; }

.page.active{ transform:rotateY(0deg); z-index:50; pointer-events:auto; }
.page.prev{ transform:rotateY(-180deg); z-index:20; pointer-events:none; }
.page.next{ transform:rotateY(0deg); z-index:10; pointer-events:none; }
.page.turning{ z-index:90 !important; pointer-events:none !important; }

/* corner fold hint — an invitation to flip, like a real dog-eared page */
.corner-fold{
  position:absolute; right:0; bottom:0; width:46px; height:46px; z-index:70;
  cursor:pointer;
  background:linear-gradient(135deg, transparent 50%, rgba(47,75,214,.16) 50%);
  border-radius:0 0 14px 0;
  transition:background .2s ease;
}
.corner-fold:hover{ background:linear-gradient(135deg, transparent 45%, rgba(47,75,214,.3) 45%); }
.book-shell.at-end .corner-fold{ opacity:.12; pointer-events:none; }
.book-shell.at-start .flip-zone.left,
.book-shell.at-end .flip-zone.right{ pointer-events:none; }

/* invisible edge zones — tap the margins of a page to turn it, like an e-reader */
.flip-zone{ position:absolute; top:0; bottom:0; width:38px; z-index:65; cursor:pointer; }
.flip-zone.left{ left:0; }
.flip-zone.right{ right:0; }
@media (max-width:700px){ .flip-zone{ width:22px; } }

.page-inner{ padding:56px 64px 40px; flex:1; display:flex; flex-direction:column; }
@media (max-width:700px){ .page-inner{ padding:30px 20px 28px; } }
@media (max-width:420px){ .page-inner{ padding:24px 16px 24px; } }

/* ---------- Nav ---------- */
.nav{
  position:fixed; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px; z-index:100;
  background:rgba(255,255,255,0.85); border:1px solid var(--hairline);
  padding:8px 10px; border-radius:999px; backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(20,26,60,0.12);
  touch-action:manipulation;
}
.nav button{
  background:none; border:1px solid rgba(47,75,214,.35); color:var(--accent-deep);
  width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
  flex-shrink:0;
}
.nav button:hover{ background:rgba(47,75,214,.12); }
.nav button:disabled{ opacity:.3; cursor:default; }
.nav .pg{ font-family:var(--font-display); font-size:.78rem; color:var(--grey); min-width:56px; text-align:center; }
.nav .pg b{ color:var(--ink); }