/* Reusable interactive sketchbook viewer — shared across Studio Peri sketchbook
   projects. Pairs with book-viewer.js. Keep this visually neutral (no colors)
   so each book page controls its own light/dark palette via CSS variables. */

.sketchbook-stage {
  --turn-ms: 700ms;
  --page-radius: 3px;
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2600px;
  touch-action: pan-y;
  /* a closed book slides a page-width sideways to sit centred; on a phone its
     empty half must not widen the page (clip, unlike hidden, adds no scrolling) */
  overflow-x: clip;
  /* no background here — the book sits directly on the page's own
     day/night background (white/black), not a boxed panel */
}

.sketchbook-book {
  position: relative;
  transform: translateX(0);
  transition: transform var(--turn-ms) ease;
}
/* Shadows follow the paper's own outline (the page images have transparent
   margins), never a rectangle. The resting spread's shadow lives on a wrapper
   that doesn't move during a turn, so it's drawn once instead of every frame. */
.sk-spread { position: absolute; inset: 0; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.22)); }
.sketchbook-book.shift-left { transform: translateX(-25%); }
.sketchbook-book.shift-right { transform: translateX(25%); }

.sk-slot {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
.sk-slot.sk-left { left: 0; border-radius: var(--page-radius) 0 0 var(--page-radius); }
.sk-slot.sk-right { right: 0; border-radius: 0 var(--page-radius) var(--page-radius) 0; }
.sk-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-slot.sk-left { cursor: w-resize; }
.sk-slot.sk-right { cursor: e-resize; }
.sk-slot.sk-empty { visibility: hidden; }

.sk-leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform var(--turn-ms) ease;
  z-index: 10;
  cursor: pointer;
  visibility: hidden;
}
.sk-leaf.is-active { visibility: visible; }

.sk-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.22));   /* the turning sheet's own shadow, in its outline */
}
.sk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-face.sk-front { border-radius: 0 var(--page-radius) var(--page-radius) 0; }
.sk-face.sk-back { transform: rotateY(180deg); border-radius: var(--page-radius) 0 0 var(--page-radius); }

@media (prefers-reduced-motion: reduce) {
  .sketchbook-book,
  .sk-leaf {
    transition: none !important;
  }
}

/* Minimal, text-only rapid-flip controls (Return to front / Flip to end) —
   deliberately not styled like buttons, one shared look so they read as a
   single navigation system with two directions. Color/font come from the
   page via `color: inherit` and normal inheritance, keeping this file
   visually neutral. Both are absolutely positioned, so toggling [hidden]
   on either one never shifts the book's own layout. */
.sk-flip {
  position: absolute;
  bottom: 14px;
  background: none;
  border: none;
  padding: 4px 2px;
  margin: 0;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.sk-flip:hover { opacity: 0.9; }
.sk-flip[hidden] { display: none; }
.sk-flip-front { left: 16px; }
.sk-flip-end { right: 16px; }