/* =============================
   Failure Reader — Diary View
   ============================= */

body {
  background: #fff7f2;
  color: #2b1b18;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

/* Book container */
.book {
  position: relative;
  width: min(90vw, 720px);
  height: 520px;
  margin: 2rem auto;
  perspective: 1800px;
  transform-style: preserve-3d;
}

/* Each page — lined paper */
.page {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(#fffdf9 0px, #fffdf9 22px, #f7f3e8 23px),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  border: 1px solid #e8dac1;
  border-radius: 12px;
  padding: 2rem 1.5rem 4.8rem; /* 👈 extra bottom padding so text never hits nav */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  color: #2b1b18;

  width: 100%;
  height: 100%;
  overflow-y: auto;

  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform;
  transform: rotateY(0deg);

  /* 💫 softer, slower flip */
  transition:
    transform 1.4s cubic-bezier(.33, .01, .18, .99),
    box-shadow 0.4s ease;
}

/* When flipped */
.page.flipped {
  transform: rotateY(-180deg);
}

/* subtle bottom fade so text never "touches" nav */
.page::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3.2rem;
  background: linear-gradient(to bottom, rgba(255,247,242,0), #fff7f2);
  pointer-events: none;
  z-index: 1;
}

/* tiny page-curl hint in the bottom-right corner */
.page::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
  background:
    radial-gradient(120px 120px at 100% 100%, rgba(0,0,0,.12), transparent 60%),
    conic-gradient(from 225deg at 100% 100%, rgba(255,255,255,.9), rgba(255,255,255,0) 45%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .22;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 2;
}

.page:hover::after { opacity: .35; }

/* corner flip + curl micro animations */
@keyframes cornerNext {
  0%   { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
  40%  { transform: rotateY(-8deg) rotateX(1deg) rotateZ(0.3deg); }
  100% { transform: rotateY(0deg); }
}

@keyframes cornerPrev {
  0%   { transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg); }
  40%  { transform: rotateY(-172deg) rotateX(1deg) rotateZ(-0.3deg); }
  100% { transform: rotateY(-180deg); }
}

.page.corner-next {
  transform-origin: 100% 100%; /* bottom-right */
  animation: cornerNext .30s ease-out;
}

.page.corner-prev {
  transform-origin: 0% 100%; /* bottom-left */
  animation: cornerPrev .28s ease-out;
}

/* optional stronger curl pulse when turning */
@keyframes curlHint {
  0%   { opacity: .35; transform: translate(-4px, -4px) scale(1); }
  60%  { opacity: .9;  transform: translate(-6px, -6px) scale(1.12); }
  100% { opacity: .4;  transform: translate(0, 0) scale(1); }
}

.page.turning-next::after {
  animation: curlHint 0.5s ease-out;
}

/* inline chip style */
.nav-chip {
  background: linear-gradient(#fffdf9, #fffaf0);
  border: 1px solid #e8dac1;
  border-radius: 12px;
  padding: .45rem .85rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(0,0,0,.06);
}

/* =====================
   Navigation buttons
   ===================== */

/* container INSIDE the page, stuck to bottom-right */
.page-nav {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  gap: 0.75rem;
  z-index: 3;           /* above fade + content */
  pointer-events: none; /* buttons re-enable events */
}

/* actual buttons */
.page-nav .nav-btn {
  pointer-events: auto;
  background: linear-gradient(#fffdf9, #fffaf0);
  border: 1px solid #e8dac1;
  border-radius: 9999px;
  padding: .8rem .9rem;
  font-size: .85rem;
  line-height: 1;
  color: #765442;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(0,0,0,.06);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.page-nav .nav-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(#fffefb, #fff6df);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 8px rgba(0,0,0,.08);
}

.nav-btn.hidden {
  display: none;
}

/* Empty state */
#emptyBox {
  text-align: center;
  margin-top: 4rem;
  color: #8b6b47;
  font-style: italic;
}

/* Write more button */
#writeMoreBtn {
  border: 1px solid #e6c98a;
  background: #ffeec7;
  border-radius: 12px;
  padding: 0.6rem 1.1rem;
  transition: all 0.25s ease;
}

#writeMoreBtn:hover {
  background: #ffeec7;
}