/* ==========================================================================
   Do Sushi Haus – Flip-book menu (js/book.js)
   Closed book with a designed cover → opens on page 1 → flip by tap, drag,
   swipe, arrows or keyboard → closes on the back cover at the end.
   Desktop: two-page spread. Mobile: single page.
   ========================================================================== */

.book { --ph: min(76vh, 760px); --pw: calc(var(--ph) * .711); position: relative; user-select: none; -webkit-user-select: none; }
@media (max-width: 899px) { .book { --pw: min(84vw, 400px); --ph: calc(var(--pw) / .711); } }

.book__stage {
  position: relative; margin-inline: auto; height: var(--ph);
  width: calc(var(--pw) * 2); perspective: 2600px; outline: none;
}
@media (max-width: 899px) { .book__stage { width: var(--pw); } }

.book__inner {
  position: absolute; top: 0; left: 0; width: calc(var(--pw) * 2); height: 100%;
  transform-style: preserve-3d; transition: transform 1s var(--ease-in-out, ease);
}
/* Desktop: the spine stays fixed while a page turns. A closed book is centred
   only AFTER the last turn has finished (delay), and slides back BEFORE the
   first turn (book.js waits for the slide). */
@media (min-width: 900px) {
  .book__inner { transition: transform .45s var(--ease-in-out, ease); }
  .book__inner[data-state="closed"] { transform: translateX(calc(var(--pw) * -.5)); transition-delay: 1s; }
  .book__inner[data-state="end"]    { transform: translateX(calc(var(--pw) * .5));  transition-delay: 1s; }
}
@media (max-width: 899px) {
  .book__inner { left: calc(var(--pw) * -1); }
  .book__inner[data-state] { transform: none; }
  .book__inner[data-side="L"], .book__inner[data-state="end"] { transform: translateX(var(--pw)); }
  .book__inner { transition: transform .7s var(--ease-in-out, ease); }
}

/* Soft shadow under the book; widens when open */
.book__inner::before {
  content: ""; position: absolute; left: 50%; right: 0; bottom: -28px; height: 40px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.75), transparent 70%);
  filter: blur(6px); transition: left 1s var(--ease-in-out, ease), right 1s var(--ease-in-out, ease);
}
.book__inner[data-state="open"]::before { left: 0; }
.book__inner[data-state="end"]::before { left: 0; right: 50%; }

/* ---------- Leaves ---------- */
.leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.645,.045,.355,1);
  will-change: transform;
}
.leaf.is-flipped { transform: rotateY(-180deg); }
.leaf.is-dragging { transition: none; }
.leaf__face {
  position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #151515; border-radius: 2px 6px 6px 2px;
}
.leaf__back { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; }
.leaf__face img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* spine shading + page-turn light */
.leaf__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.leaf__front::after { background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.08) 6%, transparent 14%, transparent 92%, rgba(255,255,255,.05)); }
.leaf__back::after  { background: linear-gradient(270deg, rgba(0,0,0,.45), rgba(0,0,0,.08) 6%, transparent 14%); }
.leaf__face::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--shade, 0);
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
}
.leaf__back::before { background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(255,255,255,.06)); }
.leaf.is-turning .leaf__face::before { animation: turn-light 1s ease-in-out; }
@keyframes turn-light { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }

/* page-edge thickness on the closed stack */
.book__edges {
  position: absolute; top: 4px; bottom: 4px; right: -6px; width: 6px; border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, #d9d2c4 0 1px, #9a9488 1px 2px);
  opacity: .55; transition: opacity .6s, width .6s;
}
.book__inner[data-state="end"] .book__edges { opacity: 0; }

/* ---------- Designed covers ---------- */
.cover {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(212,167,44,.08), transparent 60%),
    url("../assets/img/slate.webp") center / 520px,
    linear-gradient(135deg, #1b1712, #0d0c0b);
  color: var(--ink);
}
.cover::before { /* double gold frame */
  content: ""; position: absolute; inset: 7%; border: 1px solid var(--gold-line);
  box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(212,167,44,.22);
}
.cover > div:first-child { width: 100%; }
.cover__logo { position: relative; width: 52%; aspect-ratio: 1; margin: 0 auto 7%; }
.cover__logo img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: cover; border-radius: 50%; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.cover__logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cover__logo svg path { fill: none; stroke-linecap: round; }
.cover__kicker { font-size: clamp(.55rem, 1.6vw, .72rem); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 0; }
.cover__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.8rem, 6vw, 3rem); margin: .2em 0 .1em; color: var(--ink); }
.cover__sub { font-family: var(--font-serif); font-style: italic; color: var(--muted); margin: 0; font-size: clamp(.85rem, 2vw, 1.05rem); }
.cover__hint {
  position: absolute; left: 0; right: 0; bottom: 11%; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
@media (prefers-reduced-motion: no-preference) { .cover__hint { animation: hint 2.4s ease-in-out infinite; } }
@keyframes hint { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.cover--back .cover__body { width: 72%; }
.cover--back p { font-size: clamp(.78rem, 1.8vw, .95rem); color: var(--muted); margin: 0 0 .35em; }
.cover--back .cover__title { font-size: clamp(1.4rem, 4.4vw, 2.2rem); }
.cover--back a { color: var(--gold); text-decoration: none; font-weight: 700; }
.cover__restart { margin-top: 1.2em; pointer-events: auto; }

/* ---------- Controls ---------- */
.book__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.book__btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(17,17,17,.8); border: 1px solid var(--gold-line); color: var(--gold);
  font: 400 1.6rem/1 var(--font-serif); padding-bottom: 3px; cursor: pointer; transition: background-color .25s, opacity .25s;
}
.book__btn:hover:not(:disabled) { background: var(--gold); color: #111; }
.book__btn:disabled { opacity: .3; cursor: default; }
.book__count { min-width: 9.5rem; text-align: center; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.book__progress { width: min(320px, 70%); height: 2px; margin: var(--s-3) auto 0; background: var(--line); border-radius: 2px; overflow: hidden; }
.book__progress span { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--bp, 0)); transition: transform .6s var(--ease-out, ease); }
.book__tip { text-align: center; color: var(--muted); font-size: var(--fs-small); margin-top: var(--s-3); }

.book__stage { cursor: pointer; touch-action: pan-y; }
.book__stage.is-grabbing { cursor: grabbing; }
@media (max-width: 899px) { .book__stage { overflow: hidden; border-radius: 6px; } }




/* ---------- Mobile "pad": a single stack of pages, each turn = one page ---------- */
.book--pad .book__stage { width: var(--pw); overflow: hidden; border-radius: 6px; }
.book--pad .book__inner, .book--pad .book__inner[data-state] { left: 0; width: var(--pw); transform: none !important; }
.book--pad .leaf { left: 0; width: 100%; }
.book--pad .leaf__back { background: #0d0d0d; }
.book--pad .book__inner::before { left: 0 !important; right: 0 !important; }
.book--pad .book__edges { display: none; }