/* ════════════════════════════════════════════════════════════════════════════
   sdx-flipbook.css
   Sections:
     1. Reset & design tokens
     2. Page shell  (body, header, controls, hints)
     3. FlipBook library internals  (.fb-*)
     4. Page content layouts  (.page, .page-cover, .page-inner …)
     5. Typography helpers
     6. Responsive scaling
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 1. Reset & Design Tokens ─────────────────────────────────────────────── */

/* NOTE: No global reset here. global.css owns box-model and reset rules.
   sdx-flipbook.css is a shared engine file — it MUST NOT touch *, body, or
   any element selector outside .fb-container scope. */

:root {
  /* Brand palette — change here to retheme everything */
  --fb-ink:       #1a1209;
  --fb-paper:     #fffdf7;
  --fb-amber:     #c8872a;
  --fb-rust:      #8b3a1e;
  --fb-sage:      #4a6741;
  --fb-cream:     #f5f0e8;
  --fb-blank:     #e8e0d0;

  /* Named backgrounds */
  --fb-cover-bg:  #1a0e05;
  --fb-illus-bg:  #2a1f12;
  --fb-illus2-bg: #1e2a18;
}


/* ── 2. Page Shell ────────────────────────────────────────────────────────── */
/*
   REMOVED — body, header, .logo, .tagline, .book-stage, .spine, .controls,
   .btn, .page-counter, .hint were standalone-page chrome written for
   unseen-hands.html. They have no place in a shared engine file.
   body { font-family / display:flex / align-items:center } was overriding
   header, footer, and hero width on every page that loads this stylesheet.
   Page-level shell styles belong in the standalone page's own CSS.
*/


/* ── 3. FlipBook Library Internals (.fb-*) ───────────────────────────────── */

/* Outer container — JS also sets width, height, perspective inline */
/* .fb-container shell properties removed — standalone demo chrome only.
   Engine container sizing is set by JS inline styles (width/height/perspective).
   No padding, no flex, no min-height on the engine container. */

/* ── Header ── */
.fb-container header {
  text-align: center;
  margin-bottom: 48px;
}

.fb-container .logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fb-paper);
  line-height: 1;
}
.fb-container .logo span {
  color: var(--fb-amber);
  font-style: italic;
}

.fb-container .tagline {
  font-size: 0.75rem;
  color: rgba(255, 253, 247, 0.55);
  margin-top: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Book stage wrapper ── */
.fb-container .book-stage {
  position: relative;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7));
}
.fb-container .book-stage::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: linear-gradient(135deg,
    rgba(200, 135,  42, 0.4),
    rgba(139,  58,  30, 0.2),
    rgba( 74, 103,  65, 0.3));
  border-radius: 4px;
  z-index: -1;
}

/* ── Spine ── */
.fb-container .spine {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 100%;
  background: linear-gradient(to right,
    rgba(  0,   0,   0, 0.25)  0%,
    rgba(200, 135,  42, 0.30) 40%,
    rgba(  0,   0,   0, 0.25) 100%);
  z-index: 30;
  pointer-events: none;
}

/* ── Controls ── */
.fb-container .controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.fb-container .btn {
  background: none;
  border: 1px solid rgba(200, 135, 42, 0.4);
  color: var(--fb-amber);
  padding: 10px 28px;
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  border-radius: 2px;
}
.fb-container .btn:hover  { background-color: rgba(200, 135, 42, 0.12); border-color: var(--fb-amber); }
.fb-container .btn:active { transform: scale(0.97); }

.fb-container .page-counter {
  font-family: 'Playfair Display', serif;
  font-size: 0.9rem;
  color: rgba(255, 253, 247, 0.4);
  letter-spacing: 0.08em;
  min-width: 80px;
  text-align: center;
}

.fb-container .hint {
  margin-top: 20px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(255, 253, 247, 0.22);
  text-transform: uppercase;
  text-align: center;
}


/* ── 3. FlipBook Library Internals (.fb-*) ───────────────────────────────── */
/*
   The JS sets ONLY values it cannot know statically (pixel widths / offsets
   derived from the width/height options) as inline styles.
   Everything structural lives here so it is inspectable and overridable.
*/

/* Outer container ─ JS also sets width, height, perspective inline */
.fb-container {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 2px;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* 3-D scene */
.fb-scene {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

/* Closed-book frame — first module + book core + last module */
.fb-closed-book {
  position: absolute;
  inset: 0;
  display: none;
  grid-template-columns:
    var(--fb-closed-first-width, 0.68fr)
    var(--fb-book-core-width, 0.12fr)
    var(--fb-closed-last-width, 1.48fr);
  align-items: stretch;
  z-index: 5;
  pointer-events: none;
}

.fb-closed-book[data-cover-module="first"] {
  grid-template-columns:
    var(--fb-closed-active-width, 1.48fr)
    var(--fb-book-core-width, 0.12fr)
    var(--fb-closed-passive-width, 0.68fr);
}

.fb-closed-book[data-cover-module="last"] {
  grid-template-columns:
    var(--fb-closed-passive-width, 0.68fr)
    var(--fb-book-core-width, 0.12fr)
    var(--fb-closed-active-width, 1.48fr);
}

.fb-closed-module,
.fb-book-core {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.fb-closed-module {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(0, 0, 0, 0.12) 100%),
    var(--fb-closed-shell-surface, #3a2413);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.fb-closed-module.fb-blank {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.16) 100%),
    var(--fb-closed-passive-surface, var(--fb-closed-shell-surface, #3a2413));
}

.fb-closed-module--first {
  border-radius: var(--fb-closed-radius, 2px) 0 0 var(--fb-closed-radius, 2px);
  box-shadow: inset -1.25rem 0 2rem rgba(0, 0, 0, 0.22);
}

.fb-closed-module--last {
  border-radius: 0 var(--fb-closed-radius, 2px) var(--fb-closed-radius, 2px) 0;
  box-shadow:
    0 1.5rem 3.5rem rgba(0, 0, 0, 0.24),
    inset 1rem 0 1.5rem rgba(0, 0, 0, 0.18);
}

.fb-book-core {
  background:
    linear-gradient(90deg,
      rgba(52, 34, 17, 0.85) 0%,
      rgba(235, 220, 190, 0.95) 18%,
      rgba(247, 240, 224, 0.98) 48%,
      rgba(222, 205, 174, 0.94) 82%,
      rgba(66, 42, 22, 0.82) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(120, 84, 42, 0.18),
    inset 0 0 1.5rem rgba(0, 0, 0, 0.14);
}

/* Static page slots — JS sets `width` and `left` (right slot) inline */
.fb-page-slot {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--fb-cream);
}

.fb-page-slot--hidden {
  visibility: hidden;
  pointer-events: none;
  box-shadow: none !important;
}

.fb-page-left { left: 0; }

/* Blank slot (no page assigned to this side of a spread) */
.fb-blank {
  background-color: var(--fb-blank);
}

/* Click-zone cursors */
.fb-page-left  { cursor: w-resize; }
.fb-page-right { cursor: e-resize; }

/* Shadow overlays — JS toggles opacity inline during the flip only */
.fb-shadow {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s;
}
.fb-shadow-left  { left: 0; background: linear-gradient(to right, rgba(0,0,0,0.18), transparent); }
.fb-shadow-right {          background: linear-gradient(to left,  rgba(0,0,0,0.18), transparent); }

/* Animating leaf — JS sets width, left, transform, transition inline during flip */
.fb-leaf {
  position: absolute;
  top: 0;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 20;
  display: none;
  cursor: default;
}

.fb-leaf--hidden {
  visibility: hidden;
  pointer-events: none;
}

.fb-leaf-front,
.fb-leaf-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  transform-style: preserve-3d;
}
.fb-leaf-back { transform: rotateY(180deg); }

/* Responsive scale wrapper — JS sets transform: scale() inline */
.fb-responsive-wrap {
  transform-origin: top center;
}

/* Image-only page fill */
.fb-page-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── 4. Page Content Layouts ──────────────────────────────────────────────── */

/* Base — every page div carries this class */
.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
}

/* ── Cover ── */
.page-cover {
  background-color: var(--fb-cover-bg);
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(200, 135, 42, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(139,  58, 30, 0.15) 0%, transparent 50%);
}
.page-cover .ornament {
  font-size: 2.2rem;
  color: var(--fb-amber);
  margin-bottom: 16px;
  opacity: 0.8;
}
.page-cover .title {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--fb-paper);
  text-align: center;
  line-height: 1.15;
}
.page-cover .subtitle {
  margin-top: 12px;
  font-style: italic;
  color: rgba(255, 253, 247, 0.55);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-align: center;
}
.page-cover .rule {
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--fb-amber), transparent);
  margin: 20px auto;
}
.page-cover .author {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 135, 42, 0.7);
}

/* ── Inner (text) page ── */
.page-inner {
  background-color: var(--fb-paper);
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 28px,
      rgba(0, 0, 0, 0.03) 28px,
      rgba(0, 0, 0, 0.03) 29px);
  align-items: flex-start;
  padding: 44px 40px;
}

/* Top-aligned variant — chapter openings, TOC */
.page-inner.top {
  justify-content: flex-start;
  padding-top: 52px;
}

/* ── Page numbers ── */
.page-num {
  position: absolute;
  bottom: 18px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(26, 18, 9, 0.3);
  font-style: italic;
}
.page-num.left  { left:  28px; }
.page-num.right { right: 28px; }

/* ── Illustration page ── */
.page-illustration {
  background-color: var(--fb-illus-bg);
}
.page-illustration.variant-2 {
  background-color: var(--fb-illus2-bg);
}
.illus-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.glyph {
  font-size: 5rem;
  margin-bottom: 16px;
  filter: sepia(1) saturate(0.6);
}
.illus-caption {
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(255, 253, 247, 0.45);
  text-align: center;
  max-width: 180px;
}

/* ── Back cover ── */
.page-back-cover {
  background-color: var(--fb-cover-bg);
  background-image:
    radial-gradient(ellipse at 50% 60%, rgba(74, 103, 65, 0.2) 0%, transparent 60%);
  justify-content: flex-end;
  padding-bottom: 56px;
}
.page-back-cover .back-text {
  font-style: italic;
  color: rgba(255, 253, 247, 0.45);
  font-size: 0.9rem;
  text-align: center;
  max-width: 200px;
  line-height: 1.7;
}
.page-back-cover .back-logo {
  font-family: 'Playfair Display', serif;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(200, 135, 42, 0.5);
  margin-top: 20px;
}


/* ── 5. Typography Helpers ────────────────────────────────────────────────── */

.chapter-num {
  font-family: 'EB Garamond', serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fb-amber);
  margin-bottom: 14px;
}

.chapter-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fb-ink);
  line-height: 1.2;
  margin-bottom: 20px;
}
.chapter-title.sm {
  font-size: 1.2rem;
  margin-bottom: 24px;
}

.chapter-body {
  font-family: 'EB Garamond', serif;
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(26, 18, 9, 0.78);
}
.chapter-body + .chapter-body { margin-top: 16px; }

.drop-cap::first-letter {
  float: left;
  font-family: 'Playfair Display', serif;
  font-size: 3.4rem;
  line-height: 0.82;
  margin-right: 6px;
  color: var(--fb-rust);
  font-weight: 700;
}

/* Section-break fleuron */
.fleuron {
  margin-top: 28px;
  text-align: center;
  color: var(--fb-rust);
  font-size: 1.1rem;
}

/* Table of contents */
.toc-body { width: 100%; }

.toc-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted rgba(26, 18, 9, 0.15);
  padding: 6px 0;
}
.toc-row:last-child { border-bottom: none; }
.toc-page { color: var(--fb-rust); }


/* ── 6. Responsive Scaling ────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* Responsive shell rules removed — no padding on engine container. */
  .fb-container header        { margin-bottom: 28px; }
  .fb-container .controls     { margin-top: 20px; }
}