/* ============================================================
   夜航书 · Tome — the book, its spine, plate, leaves and ribbons
   ============================================================ */

.stage{
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  height: 100%;
  padding: clamp(12px, 2vh, 32px) clamp(10px, 3vw, 48px);
}

/* the ribbon rail lives in the stage's right padding, so the book
   centres in what's left instead of pushing them off-screen */
@media (min-width: 901px){
  .stage{ padding-right: clamp(112px, 11vw, 156px); }
}

.tome{
  position: relative;
  width: min(1220px, 100%);
  height: min(780px, 88vh);
  display: grid;
  grid-template-columns: 40% var(--spine-w) 1fr;
  perspective: 2600px;
  perspective-origin: 50% 46%;
  filter: drop-shadow(0 42px 70px rgba(0,0,0,.62));
  animation: tomeArrive 1.1s var(--ease-soft) both;
}
@keyframes tomeArrive{
  from{ opacity: 0; transform: translateY(34px) scale(.965) rotateX(6deg); }
  to  { opacity: 1; transform: none; }
}

/* Warm glow bleeding out of the pages onto the night */
.tome::before{
  content: '';
  position: absolute;
  inset: -14% -8%;
  background: radial-gradient(58% 52% at 50% 50%, rgba(255,226,190,.20), transparent 68%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

/* ── Left plate: the illustration page ───── */
.plate{
  position: relative;
  border-radius: var(--r-lg) 4px 4px var(--r-lg);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.62), transparent 55%),
    linear-gradient(255deg, var(--vellum-3) 0%, var(--vellum-2) 22%, var(--vellum) 62%);
  box-shadow:
    inset -22px 0 34px -20px rgba(70,48,40,.42),
    inset 0 0 0 1px rgba(255,255,255,.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Paper fibre */
.plate::after,
.leaf::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(97deg, rgba(150,120,90,.035) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(3deg,  rgba(150,120,90,.028) 0 3px, transparent 3px 7px);
}

.plate__art{
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: end center;
  padding: 6% 6% 0;
}
.plate__art svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: plateBreathe 7s ease-in-out infinite alternate;
}
@keyframes plateBreathe{
  from{ transform: translateY(0)    rotate(-.35deg); }
  to  { transform: translateY(-9px) rotate(.35deg); }
}
.plate__art.swapping svg{ animation: plateSwap .62s var(--ease-soft) both; }
@keyframes plateSwap{
  from{ opacity: 0; transform: translateY(22px) scale(.94); filter: blur(6px); }
  to  { opacity: 1; transform: none; filter: none; }
}

/* Guide's speech — handwritten in the margin */
.plate__speech{
  position: relative;
  margin: 0 clamp(16px, 6%, 34px) clamp(16px, 4%, 30px);
  padding: 14px 16px 14px 20px;
  border-left: 2px solid var(--sakura-ink);
  background: linear-gradient(90deg, rgba(255,183,213,.16), transparent 88%);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.plate__name{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sakura-ink);
  margin-bottom: 5px;
}
.plate__line{
  font-family: var(--f-display);
  font-size: clamp(.86rem, .78rem + .3vw, 1rem);
  line-height: 1.72;
  color: var(--ink);
  min-height: 3.4em;
}
.plate__line .cursor{
  display: inline-block;
  width: .5em;
  color: var(--sakura-ink);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret{ 50%{ opacity: 0; } }

/* ── Spine ───────────────────────────────── */
.spine{
  position: relative;
  background:
    linear-gradient(90deg,
      rgba(60,38,30,.52) 0%,
      rgba(30,18,16,.72) 22%,
      rgba(18,10,12,.85) 50%,
      rgba(30,18,16,.72) 78%,
      rgba(60,38,30,.52) 100%);
  box-shadow: 0 0 22px rgba(0,0,0,.5);
  z-index: 4;
}
/* stitching */
.spine::before{
  content: '';
  position: absolute;
  inset: 8% 50% 8% 50%;
  border-left: 1px dashed rgba(255,214,175,.32);
  transform: translateX(-.5px);
}

/* ── Right leaves: the turning pages ─────── */
.leaves{
  position: relative;
  transform-style: preserve-3d;
}

.leaf{
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: 4px var(--r-lg) var(--r-lg) 4px;
  background:
    radial-gradient(120% 90% at 92% 4%, rgba(255,255,255,.6), transparent 52%),
    linear-gradient(105deg, var(--vellum) 0%, var(--vellum) 62%, var(--vellum-2) 100%);
  box-shadow:
    inset 22px 0 32px -22px rgba(70,48,40,.46),
    inset 0 0 0 1px rgba(255,255,255,.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.leaf[hidden]{ display: none; }
.leaf--under{ z-index: 1; }
.leaf--over { z-index: 2; }

/* the sweeping shadow while a page lifts */
.leaf__shade{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg, rgba(38,22,45,.55) 0%, rgba(38,22,45,.14) 34%, transparent 62%);
  z-index: 9;
}

/* flip: current page peels away toward the spine */
.leaf.is-turning{
  animation: leafTurn .78s var(--ease-page) forwards;
  z-index: 3;
}
.leaf.is-turning .leaf__shade{ animation: leafShade .78s var(--ease-page) forwards; }
@keyframes leafTurn{
  0%  { transform: rotateY(0deg)    translateZ(0); }
  55% { transform: rotateY(-104deg) translateZ(24px); }
  100%{ transform: rotateY(-176deg) translateZ(0); opacity: 0; }
}
@keyframes leafShade{
  0%{ opacity: 0; } 40%{ opacity: 1; } 100%{ opacity: 0; }
}

/* flip backwards: previous page swings back in */
.leaf.is-returning{
  animation: leafReturn .78s var(--ease-page) forwards;
  z-index: 3;
}
@keyframes leafReturn{
  0%  { transform: rotateY(-176deg); opacity: 0; }
  45% { opacity: 1; }
  100%{ transform: rotateY(0deg); opacity: 1; }
}

/* the incoming page rises into place */
.leaf.is-arriving{ animation: leafArrive .78s var(--ease-page) both; }
@keyframes leafArrive{
  0%  { filter: brightness(.82); }
  100%{ filter: none; }
}

/* ── Leaf content ────────────────────────── */
.leaf__body{
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--leaf-pad) var(--leaf-pad) 56px;
}
.leaf__head{ margin-bottom: 6px; }

/* folio number, centred at the foot — the outer corner is the dog-ear's */
.leaf__folio{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 3;
  font-family: var(--f-latin);
  font-style: italic;
  font-size: var(--t-small);
  color: var(--ink-faint);
  letter-spacing: .1em;
  pointer-events: none;
}

/* dog-ear: click the corner to turn */
.dogear{
  position: absolute;
  right: 0; bottom: 0;
  width: 76px; height: 76px;
  z-index: 6;
  cursor: pointer;
  background: linear-gradient(315deg, var(--vellum-3) 0%, var(--vellum-2) 44%, transparent 45%);
  border-radius: 0 0 var(--r-lg) 0;
  transition: width .3s var(--ease-soft), height .3s var(--ease-soft);
}
.dogear::after{
  content: '›';
  position: absolute;
  right: 14px; bottom: 4px;
  font-family: var(--f-latin);
  font-size: 1.5rem;
  color: var(--ink-faint);
  transition: color .3s;
}
.dogear:hover{ width: 106px; height: 106px; }
.dogear:hover::after{ color: var(--sakura-ink); }

/* ── Ribbon bookmarks ────────────────────── */
.ribbons{
  position: absolute;
  top: 8%;
  right: 0;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 7;
  padding-left: 2px;
}

.ribbon{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 15px 13px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: linear-gradient(90deg, var(--rc, #7c5aa8) 0%, color-mix(in srgb, var(--rc, #7c5aa8) 72%, #100a1e) 100%);
  color: #fff8f0;
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 3px 4px 12px rgba(0,0,0,.42);
  transform: translateX(-13px);
  transition: transform .3s var(--ease-soft), filter .3s, box-shadow .3s;
}
/* forked ribbon tail */
.ribbon::after{
  content: '';
  position: absolute;
  right: -11px; top: 0; bottom: 0;
  width: 12px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%);
}
.ribbon:hover{ transform: translateX(2px); filter: brightness(1.12); }
.ribbon[aria-current="true"]{
  transform: translateX(10px);
  box-shadow: 5px 6px 18px rgba(0,0,0,.5), 0 0 22px -4px var(--rc, #7c5aa8);
}
.ribbon__idx{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: .95em;
  opacity: .72;
}
.ribbon__lock{ font-size: .9em; opacity: .9; }
.ribbon.is-locked{ filter: grayscale(.72) brightness(.72); }
.ribbon.is-locked:hover{ filter: grayscale(.5) brightness(.85); }

/* new-content pip */
.ribbon.has-news::before{
  content: '';
  position: absolute;
  left: 5px; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lumen);
  box-shadow: 0 0 8px var(--lumen);
  animation: pip 1.6s ease-in-out infinite;
}
@keyframes pip{ 50%{ opacity: .3; transform: scale(.7); } }

/* ── Turn arrows (keyboard hint) ─────────── */
.turn-hint{
  position: fixed;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  z-index: 20;
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  color: rgba(255,240,230,.42);
  pointer-events: none;
  transition: opacity .5s;
}
.turn-hint kbd{
  font-family: var(--f-mono);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 5px;
  padding: 1px 6px;
  margin: 0 2px;
}

/* ============================================================
   Responsive — below 900px the spread collapses to one page
   ============================================================ */
@media (max-width: 900px){
  .stage{ padding: 8px 8px 0; align-items: start; }
  .tome{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: calc(100dvh - 74px);
    perspective: none;
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .spine{ display: none; }

  .plate{
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: clamp(112px, 17vh, 168px);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding: 8px 12px;
    box-shadow: inset 0 -18px 24px -20px rgba(70,48,40,.4);
  }
  .plate__art{ width: 34%; flex: 0 0 34%; height: 100%; padding: 4px 0 0; place-items: center; }
  .plate__speech{ margin: 0; flex: 1; padding: 8px 10px 8px 13px; }
  .plate__line{ font-size: .8rem; min-height: 0; line-height: 1.6; }

  .leaves{ min-height: 0; }
  .leaf{ border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .leaf.is-turning{ animation: leafSlideOut .42s var(--ease-page) forwards; }
  .leaf.is-returning{ animation: leafSlideBack .42s var(--ease-page) forwards; }
  @keyframes leafSlideOut { to{ opacity: 0; transform: translateX(-16%); } }
  @keyframes leafSlideBack{ from{ opacity: 0; transform: translateX(-16%); } to{ opacity: 1; transform: none; } }

  .dogear{ display: none; }
  .turn-hint{ display: none; }

  /* ribbons become a bottom rail */
  .ribbons{
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    transform: none;
    flex-direction: row;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    overflow-x: auto;
    scrollbar-width: none;
    background: linear-gradient(180deg, transparent, rgba(11,8,24,.92) 34%);
    backdrop-filter: blur(10px);
  }
  .ribbons::-webkit-scrollbar{ display: none; }
  .ribbon{
    transform: none;
    border-radius: var(--r-sm);
    padding: 9px 13px;
    font-size: var(--t-micro);
  }
  .ribbon::after{ display: none; }
  .ribbon:hover{ transform: none; }
  .ribbon[aria-current="true"]{ transform: translateY(-3px); }
}