/* ==================================
   3D BOOK FLIP - Responsive CSS
   ================================== */

/* 基本設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  background: #fff;
  -webkit-tap-highlight-color: transparent;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: auto;
    background: #fbf2fa;
  }
  
  .book {
    transform: scale(0.6);  /* 表示を60%に縮小 */
    transform-origin: center center;
  }
  

/* パラメータ */
:root {
    --page-width: 1080px;
    --page-height: 1080px;
    --page-color: #fff;
    --page-radius: 4px;
    --flip-speed: 1.4s;
    --darkness: 20%;
  }

/* 本全体 */
.book {
  transition: opacity 0.6s 0.3s;
}

.pages {
  width: calc(var(--page-width) * 2);
  height: var(--page-height);
  position: relative;
  transform: rotateX(12deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: var(--page-radius);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* 各ページ共通 */
.page {
  position: absolute;
  top: 0;
  width: var(--page-width);
  height: var(--page-height);
  background-color: var(--page-color);
  transform-origin: 0 0;
  transition: transform var(--flip-speed);
 backface-visibility: hidden;
  transform-style: preserve-3d;
  cursor: pointer;
  user-select: none;
  color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
  border-radius: var(--page-radius);
}

.page::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background: rgba(0,0,0,0);
  transition: background calc(var(--flip-speed)/2);
  z-index: 2;
}

/* 奇数ページ（右側） */
.page:nth-child(odd) {
  pointer-events: all;
  transform: rotateY(0deg);
  right: 0;
  border-radius: 0 var(--page-radius) var(--page-radius) 0;
}

.page:nth-child(odd):hover::before {
  background: rgba(0,0,0,0.03);
}

/* 偶数ページ（左側） */
.page:nth-child(even) {
  pointer-events: none;
  transform: rotateY(180deg);
  transform-origin: 100% 0;
  left: 0;
  border-radius: var(--page-radius) 0 0 var(--page-radius);
}

.page:nth-child(even)::before {
  background: rgba(0,0,0,0.03);
}

/* flipped 状態 */

.page.flipped {
  z-index: 0 !important; /* ← 裏返ったページを奥に送る */
}

.page.flipped:nth-child(odd) {
  pointer-events: none;
  transform: rotateY(-180deg);
}


.page.flipped:nth-child(odd)::before {
  background: rgba(0,0,0,0.2);
}

.page.flipped:nth-child(even) {
  pointer-events: all;
  transform: rotateY(0deg);
}

.page.flipped:nth-child(even):hover::before {
  background: rgba(0,0,0,0.03);
}

.page.grabbing {
  transition: none;
}

/* 左右ページの背景位置調整 */
.page:nth-child(odd) {
  background-position: right top;
}

.page:nth-child(even) {
  background-position: left top;
}



/* ==================================
   レスポンシブ（スマホ対応）
   ================================== */
   /* --- スマホ専用（確実にリセットする） --- */
   @media (max-width: 768px) {
    :root {
      --page-width: 90vw;
      --page-height: 90vw;
    }
  
    .pages {
      width: var(--page-width);
      height: var(--page-height);
      transform: none;
      perspective: none;
      position: relative;
    }
  
    .page {
      position: absolute;
      top: 0;
      left: 0;
      width: var(--page-width);
      height: var(--page-height);
      transform-origin: right center; /* ★右から左にめくる★ */
      transition: transform 0.8s ease;
      background-position: center top;
      z-index: 0;
    }
  
    .page.flipped {
      transform: rotateY(-180deg);
    }
  
    /* 前後関係を正しく描画 */
    .page:nth-child(n) {
      z-index: calc(100 - var(--i));
    }
  
    body {
      background: #fbf2fa;
    }
  }