* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: #000000;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

.book-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Book ─────────────────────────────────────────────── */
.book {
  position: relative;
  width: 504px;
  height: 768px;
  background: transparent;
  box-shadow:
    0 4px 6px rgba(0,0,0,0.07),
    0 10px 20px rgba(0,0,0,0.12),
    0 30px 60px rgba(0,0,0,0.18);

  perspective: 2800px;
  perspective-origin: 50% 50%;

  cursor: none;
  overflow: visible;
  transition: width 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.book.is-spread {
  width: 1008px;
}

/* ─── Static page slots ─────────────────────────────────── */
.page-slot {
  position: absolute;
  top: 0;
  width: 504px;
  height: 768px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.page-slot::after,
.flip-front::after,
.flip-back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,0.18), rgba(255,255,255,0) 22%),
    radial-gradient(circle at 78% 72%, rgba(0,0,0,0.035), rgba(0,0,0,0) 28%),
    repeating-linear-gradient(
      88deg,
      rgba(255,255,255,0.035) 0,
      rgba(255,255,255,0.035) 1px,
      rgba(0,0,0,0.018) 2px,
      rgba(0,0,0,0.018) 3px
    ),
    linear-gradient(115deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 34%, rgba(0,0,0,0.028) 100%);
  opacity: 0.22;
}

.page-slot.left  { left: 0; }
.page-slot.right { left: 0; }
.book.is-spread .page-slot.right { left: 504px; }

/* ─── Flip page wrapper ─────────────────────────────────── */
.flip-page {
  position: absolute;
  top: 0;
  width: 504px;
  height: 768px;
  display: none;
  z-index: 100;
  transform-style: preserve-3d;
  will-change: transform;
  --bend: 0;
  --fold: 0;
  --curlSize: 0%;
  --paperShadowX: 0px;
  --paperShadowAlpha: 0.12;
  --bendRadius: 0px;
  --insetLightX: 0px;
  --insetLightBlur: 0px;
  --insetShadowX: 0px;
  --insetShadowBlur: 0px;
  --ridgeOpacity: 0;
  --ridgeBlur: 1px;
  --ridgeDark: 42%;
  --ridgeLight: 50%;
  --ridgeWarm: 56%;
  filter:
    drop-shadow(var(--paperShadowX) 18px 20px rgba(0,0,0,var(--paperShadowAlpha)))
    drop-shadow(0 2px 1px rgba(255,255,255,0.22));
}

.flip-page.flip-right {
  left: 504px;
  transform-origin: left top; /* top-left stays fixed, bottom-right peels */
}

.flip-page.flip-left {
  left: 0;
  transform-origin: right top; /* top-right stays fixed, bottom-left peels */
}

/* ─── Front and back faces ──────────────────────────────── */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: var(--bendRadius);
  box-shadow:
    inset var(--insetLightX) 0 var(--insetLightBlur) rgba(255,255,255,0.36),
    inset var(--insetShadowX) 0 var(--insetShadowBlur) rgba(0,0,0,0.16);
}

.flip-back {
  transform: rotateY(180deg);
}

.flip-front::before,
.flip-back::before {
  content: "";
  position: absolute;
  inset: -2% -12%;
  pointer-events: none;
  opacity: var(--ridgeOpacity);
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.13) var(--ridgeDark),
      rgba(255,255,255,0.62) var(--ridgeLight),
      rgba(0,0,0,0.16) var(--ridgeWarm),
      rgba(255,255,255,0) 76%
    );
  filter: blur(var(--ridgeBlur));
}

/* ─── Shade & shine overlays ────────────────────────────── */
.shade,
.shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.shade {
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.10),
    rgba(0,0,0,0.04) 35%,
    rgba(0,0,0,0.0)  70%
  );
}

.shine {
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.0)  0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0.0)  70%
  );
}

/* ─── Curl overlays (the peel triangle) ─────────────────── */
.curl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  --curlSize: 0%;
  --curlTall: 0%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.94), rgba(255,255,255,0.58) 36%, rgba(0,0,0,0.10) 70%, rgba(0,0,0,0.14) 100%),
    linear-gradient(120deg, rgba(255,255,255,0.72), rgba(255,255,255,0.24) 42%, rgba(0,0,0,0.14));
  filter:
    drop-shadow(0 22px 18px rgba(0,0,0,0.36))
    drop-shadow(0 2px 1px rgba(255,255,255,0.44));
  transform: translateZ(2px);
}

.curl--right{
  clip-path: polygon(
    100% 100%,
    calc(100% - var(--curlSize)) 100%,
    100% calc(100% - var(--curlTall))
  );
}

.curl--left{
  clip-path: polygon(
    0% 100%,
    var(--curlSize) 100%,
    0% calc(100% - var(--curlTall))
  );
}

/* ─── Hit areas ─────────────────────────────────────────── */
.hitArea {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 999;
  cursor: none;
}

.hitArea--left  { left: 0; }
.hitArea--right { right: 0; }

/* ─── Custom cursor ─────────────────────────────────────── */
.customCursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(122, 252, 255, 0.7);
  box-shadow:
    0 0 12px 6px rgba(122, 252, 255, 0.8),
    0 0 28px 10px rgba(122, 252, 255, 0.4);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 120ms ease;
  will-change: transform;
}

@media (max-width: 500px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  .book-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Scale cover (504px × 0.46 = ~232px, fits phone) */
  .book {
    transform-origin: center center;
    transform: scale(0.46);
    margin: -210px -138px; /* collapse layout space: (504 * (1-0.46)) / 2 */
  }

  /* Scale spread (1008px × 0.46 = ~464px, fits phone) */
  .book.is-spread {
    transform: scale(0.46);
    margin: -210px -272px; /* collapse layout space: (1008 * (1-0.46)) / 2 */
  }
}