/* Flipbook Modal & Fullscreen Styles */
.c-flipbook-modal {
  background-color: #0d0f12 !important;
  width: 100vw;
  height: 100vh;
}

.c-flipbook-modal:fullscreen,
.c-flipbook-modal:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  background-color: #0d0f12 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.c-flipbook-modal:fullscreen .c-flipbook-container.mode-double,
.c-flipbook-modal:-webkit-full-screen .c-flipbook-container.mode-double {
  max-width: 1400px;
  height: min(86vh, 920px);
}

.c-flipbook-modal:fullscreen .c-flipbook-container.mode-single,
.c-flipbook-modal:-webkit-full-screen .c-flipbook-container.mode-single {
  max-width: 650px;
  height: min(88vh, 950px);
}

/* Flipbook Wrapper */
.c-flipbook-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  background-color: transparent;
}

/* Flipbook Base Container (zoom & pan transform target) */
.c-flipbook-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  transform-origin: center center;
}

/* ========================================================
   DOUBLE PAGE SPREAD MODE (Desktop / Landscape >= 768px)
   Page states are driven by JS classes:
   - .is-left / .is-right : side of the spine
   - .is-turned           : flipped away (back-facing, invisible)
   - .is-active           : page of the current spread (visible)
   - .is-turning          : leaf being turned right now (on top)
   - .is-under            : page lying under the turning leaf
   ======================================================== */
.c-flipbook-container.mode-double {
  max-width: 1100px;
  height: min(80vh, 750px);
}

.mode-double .c-flipbook {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  perspective: 2500px;
  /* Flat: pages are composited strictly by z-index, never by 3D depth sorting */
  transform-style: flat;
  transition: left 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.mode-double .c-flipbook.at-front-cover {
  left: -25%;
}

.mode-double .c-flipbook.at-rear-cover {
  left: 25%;
}

.mode-double .c-flipbook__page {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  background: #1e2124;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
  transform: rotateY(0deg);
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  /* Hidden unless explicitly part of the current spread or the running turn */
  visibility: hidden;
  z-index: 0;
}

.mode-double .c-flipbook__page.is-left {
  left: 0;
  transform-origin: 100% 50%;
  border-radius: 4px 0 0 4px;
}

.mode-double .c-flipbook__page.is-right {
  right: 0;
  transform-origin: 0% 50%;
  border-radius: 0 4px 4px 0;
}

.mode-double .c-flipbook__page.is-left.is-turned {
  transform: rotateY(180deg);
}

.mode-double .c-flipbook__page.is-right.is-turned {
  transform: rotateY(-180deg);
}

.mode-double .c-flipbook__page.is-active,
.mode-double .c-flipbook__page.is-under {
  visibility: visible;
  z-index: 1;
}

.mode-double .c-flipbook__page.is-turning {
  visibility: visible;
  z-index: 3;
}

/* Book center spine shadow overlay */
.mode-double .c-flipbook__page.is-left::after,
.mode-double .c-flipbook__page.is-right::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
}

.mode-double .c-flipbook__page.is-left::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent);
}

.mode-double .c-flipbook__page.is-right::after {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
}

/* ========================================================
   SINGLE PAGE MODE (Mobile / Portrait < 768px or toggled)
   ======================================================== */
.c-flipbook-container.mode-single {
  max-width: 540px;
  width: min(92vw, 540px);
  height: min(82vh, 800px);
  aspect-ratio: 415/587;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-single .c-flipbook {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0 !important;
  perspective: none;
}

.mode-single .c-flipbook__page {
  position: absolute;
  top: 0;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  transform: none !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease;
  background: #1e2124;
}

.mode-single .c-flipbook__page.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

.mode-single .c-flipbook__page::after {
  display: none !important;
}

/* Instant state changes (initial render, mode switch, jumps) */
.c-flipbook.is-instant,
.c-flipbook.is-instant .c-flipbook__page {
  transition: none !important;
}

/* ========================================================
   PAGE INNER CONTENT & IMAGES
   ======================================================== */
.c-flipbook__page img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  background-color: #141619;
}

/* Align page images directly to the spine in double spread mode */
.mode-double .c-flipbook__page.is-left img {
  object-position: right center;
}

.mode-double .c-flipbook__page.is-right img {
  object-position: left center;
}

/* ========================================================
   ZOOM & DRAG STATES
   ======================================================== */
.c-flipbook-container.is-zoomed {
  cursor: grab !important;
  touch-action: none;
}

.c-flipbook-container.is-zoomed .c-flipbook {
  perspective: none;
  transition: none !important;
}

.c-flipbook-container.is-zoomed .c-flipbook__page {
  cursor: grab !important;
  transition: none !important;
}

/* Only the current spread is rendered while zoomed */
.c-flipbook-container.is-zoomed .c-flipbook__page:not(.is-active) {
  visibility: hidden !important;
}

.c-flipbook-container.is-zoomed:active,
.c-flipbook-container.is-dragging,
.c-flipbook-container.is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}