/* ============================================================
   Gerald & Ingrid — Buku Sakramen Perkawinan
   styles.css — tokens, chrome, book, overlays, states
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --paper: #F5F3EF;
  --paper-deep: #EFECE6;
  --backdrop-edge: #D9D3C8;
  --ink: #2B2926;
  --ink-soft: #6E6A63;
  --line: #C9C4BC;
  --bronze: #9C7E4E;
  --bronze-deep: #7E6238;
  --scrim: rgba(43, 41, 38, 0.55);
  --shadow: rgba(43, 41, 38, 0.28);
  --page-edge: #E4E0D8;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --serif: Didot, "Bodoni MT", "Bodoni 72", "Playfair Display", "Times New Roman", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* set by JS on resize */
  --pw: 300px;   /* single page width  */
  --ph: 424px;   /* single page height */
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: radial-gradient(120% 90% at 50% 38%, #EFECE6 0%, #E6E1D7 55%, #D9D3C8 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* subtle grain — pure CSS, no assets */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(43, 41, 38, 0.02) 0 1px, transparent 1px 3px);
}
button {
  font: inherit;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 2px;
}
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Top bar ---------- */
.topbar {
  flex: 0 0 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s5);
  z-index: 100;
  user-select: none;
  transition: opacity 0.15s ease;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 400;
}
.top-date {
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

/* ---------- Bottom bar ---------- */
.bottombar {
  flex: 0 0 64px;
  height: 64px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s5);
  z-index: 100;
  user-select: none;
  transition: opacity 0.15s ease;
}
.nav-group { display: flex; align-items: center; gap: var(--s2); }
.tools {
  position: absolute;
  right: var(--s5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: var(--s2);
}
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .icon-btn:hover { background: rgba(43, 41, 38, 0.06); }
}
.icon-btn:active { background: rgba(43, 41, 38, 0.12); color: var(--bronze-deep); }
.icon-btn.is-on { color: var(--bronze-deep); }
.icon-btn.is-on::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--bronze-deep);
}
.icon-btn[aria-disabled="true"] { color: var(--line); cursor: default; }
.icon-btn[aria-disabled="true"]:hover { background: transparent; }
.icon-btn[aria-disabled="true"]:active { background: transparent; color: var(--line); }
.ico-compress { display: none; }
body.fs .ico-expand { display: none; }
body.fs .ico-compress { display: block; }

.copyright {
  position: absolute;
  left: var(--s5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  user-select: none;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .copyright .c-rights,
  .copyright .c-dev { display: none; }
}
@media (max-width: 640px) {
  .copyright { display: none; }
}

.indicator {
  min-width: 72px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .topbar { padding: 0 var(--s4); }
  .bottombar { padding: 0 var(--s2); justify-content: space-between; }
  .tools { position: static; transform: none; gap: var(--s1); }
}
@media (max-width: 359px) {
  .indicator { min-width: 48px; }
  .nav-group { gap: 0; }
  .bottombar { padding: 0 var(--s1); }
}

/* ---------- Idle chrome fade ---------- */
body.idle .topbar,
body.idle .bottombar {
  opacity: 0.25;
  transition: opacity 0.4s ease;
}

/* ---------- Immersive fallback (no Fullscreen API) ---------- */
body.immersive .topbar { display: none; }

/* ---------- Stage & book ---------- */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.stage:focus-visible { outline-offset: -4px; }

.book-shift {
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  transition: transform 0.5s cubic-bezier(0.33, 0, 0.15, 1),
              width 0.5s ease, height 0.5s ease;
}
body.mode-single .book-shift { width: var(--pw); }
.book-shift.closed-front { transform: translateX(calc(var(--pw) / -2)); }
.book-shift.closed-back  { transform: translateX(calc(var(--pw) / 2)); }
body.mode-single .book-shift.closed-front,
body.mode-single .book-shift.closed-back { transform: none; }
.book-shift.no-trans { transition: none !important; }

/* under-book ellipse shadow */
.book-shadow {
  position: absolute;
  left: 4%;
  width: 92%;
  height: 26px;
  bottom: -14px;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(43, 41, 38, 0.30), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  transition: left 0.5s ease, width 0.5s ease;
}
.book-shift.closed-front .book-shadow { left: 52%; width: 44%; }
.book-shift.closed-back  .book-shadow { left: 4%;  width: 44%; }
body.mode-single .book-shadow { left: 4%; width: 92%; }

.book {
  position: absolute;
  inset: 0;
  perspective: 2400px;
  perspective-origin: 50% 50%;
  touch-action: pan-y;
}

/* page slots */
.slot { position: absolute; top: 0; height: 100%; z-index: 3; }
.slot-left  { left: 0;   width: 50%; }
.slot-right { left: 50%; width: 50%; }
.slot-single { left: 0; width: 100%; display: none; }
body.mode-single .slot-left,
body.mode-single .slot-right { display: none; }
body.mode-single .slot-single { display: block; }
.slot.has-page {
  box-shadow: 0 30px 60px -20px var(--shadow),
              0 10px 20px -12px rgba(43, 41, 38, 0.18);
}

/* a rendered page face */
.pageface {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: hidden;
}
.pageface img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.gutter { position: absolute; inset: 0; pointer-events: none; }
.gutter-recto { background: linear-gradient(to right, rgba(43, 41, 38, 0.14), transparent 7%); }
.gutter-verso { background: linear-gradient(to left,  rgba(43, 41, 38, 0.14), transparent 7%); }
.page-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* spine line (open spread only) */
.spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(43, 41, 38, 0.18);
  z-index: 4;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.book-shift.closed-front .spine,
.book-shift.closed-back .spine { opacity: 0; }
body.mode-single .spine { display: none; }

/* page-block edge strips */
.edge {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: repeating-linear-gradient(to right, var(--page-edge) 0 1px, #FFFFFF 1px 2px);
  pointer-events: none;
}
.edge-left  { right: 100%; border-radius: 2px 0 0 2px; }
.edge-right { left: 100%;  border-radius: 0 2px 2px 0; }

/* flipping sheet */
.sheet {
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 50;
  will-change: transform;
}
body.mode-single .sheet { left: 0; width: 100%; }
.face {
  position: absolute;
  inset: 0;
  background: var(--paper);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face-back { transform: rotateY(180deg); }
.face-shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(43, 41, 38, 0.22), transparent 30%);
}
.face-back .face-shade {
  background: linear-gradient(to left, rgba(43, 41, 38, 0.22), transparent 30%);
}

/* sweep shadow cast on destination page during a flip */
.sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
.sweep-left  { left: 5%;  background: linear-gradient(to left,  rgba(43, 41, 38, 0.20), transparent); }
.sweep-right { left: 52%; background: linear-gradient(to right, rgba(43, 41, 38, 0.20), transparent); }

/* hot zones + curl affordance */
.hotzone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  z-index: 5;
  cursor: pointer;
}
body.mode-single .hotzone { width: 24%; }
.hotzone-left  { left: 0; }
.hotzone-right { right: 0; }
.hotzone[data-disabled] { cursor: default; }
.curl {
  position: absolute;
  bottom: 0;
  width: 48px;
  height: 48px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.curl-right {
  right: 0;
  background:
    linear-gradient(315deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%, transparent 50%),
    linear-gradient(315deg, var(--paper-deep) 50%, transparent 50%);
}
.curl-left {
  left: 0;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%, transparent 50%),
    linear-gradient(45deg, var(--paper-deep) 50%, transparent 50%);
}
@media (hover: hover) and (pointer: fine) {
  .hotzone:not([data-disabled]):hover .curl { opacity: 1; }
}

/* ---------- Overlays (drawer + grid) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  transition: visibility 0s linear 0.32s;
}
.overlay.open { visibility: visible; transition-delay: 0s; }
.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.overlay.open .scrim { opacity: 1; }

/* Daftar Isi drawer */
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 100vw);
  background: var(--paper);
  box-shadow: -8px 0 32px rgba(43, 41, 38, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
.overlay.open .drawer { transform: none; }
.drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s5) var(--s3) var(--s5) var(--s5);
}
.drawer-title {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 400;
}
.toc-list {
  flex: 1 1 auto;
  overflow-y: auto;
  list-style: none;
}
.toc-list li + li { border-top: 1px solid var(--line); }
.toc-item {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  padding-left: calc(var(--s5) - 2px);
  border-left: 2px solid transparent;
  text-align: left;
  transition: background 0.15s ease;
}
@media (hover: hover) {
  .toc-item:hover { background: rgba(43, 41, 38, 0.05); }
}
li.current .toc-item { border-left-color: var(--bronze); }
li.current .toc-name { font-weight: 500; }
.toc-name { font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
.toc-page {
  font-family: var(--serif);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.drawer-copy {
  flex: 0 0 auto;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  user-select: none;
}

/* Thumbnail grid */
.grid-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: min(960px, calc(100vw - 32px));
  max-height: 84vh;
  background: var(--paper);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.overlay.open .grid-panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.grid-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}
.thumb-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s4);
  padding: var(--s1);
}
.thumb {
  display: block;
  padding: 0;
  text-align: center;
  border-radius: 2px;
}
.thumb img {
  width: 100%;
  aspect-ratio: 421 / 595;
  object-fit: cover;
  display: block;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.thumb.current img { border: 2px solid var(--bronze-deep); }
.thumb-num {
  display: block;
  margin-top: var(--s1);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.thumb.current .thumb-num { color: var(--ink); font-weight: 600; }
@media (hover: hover) {
  .thumb:hover img {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(43, 41, 38, 0.15);
  }
}

/* ---------- First-load hint ---------- */
.hint {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(6px);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--s2);
  max-width: calc(100vw - 32px);
  padding: var(--s3) 20px;
  border-radius: 999px;
  background: rgba(43, 41, 38, 0.85);
  color: #F5F3EF;
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hint.show { opacity: 1; transform: translateX(-50%); }
.hint svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Loading overlay ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  transition: opacity 0.4s ease;
}
.loader.done { opacity: 0; pointer-events: none; }
.loader-logo {
  width: 92px;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.loader-monogram {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--ink);
}
.loader-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s5);
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  user-select: none;
}
.loader-label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.loader-track { width: 160px; height: 2px; background: var(--line); }
.loader-fill { width: 0; height: 100%; background: var(--bronze); transition: width 0.2s ease; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .book-shift { transition: none; }
  .book-shadow { transition: none; }
  .drawer { transform: none; transition: opacity 0.2s ease; opacity: 0; }
  .overlay.open .drawer { opacity: 1; }
  .grid-panel { transform: translate(-50%, -50%); transition: opacity 0.2s ease; }
  .overlay.open .grid-panel { transform: translate(-50%, -50%); }
  .overlay { transition: visibility 0s linear 0.22s; }
  .overlay.open { transition-delay: 0s; }
  .hint { transform: translateX(-50%); transition: opacity 0.25s ease; }
  .thumb img, .icon-btn, .topbar, .bottombar, .curl, .scrim { transition: none; }
}