/* ==========================================================
   STYLE.CSS - 3D 實體書引擎 & 描圖紙「重力貼合」引擎
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    /* 【重要】圖檔比例 = (單張圖片寬度 * 2) / 單張圖片高度 */
    --spread-ratio: 2000 / 1414; 
}

body {
    background-color: #080808; margin: 0; padding: 0;
    width: 100vw; height: 100vh; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    background-image: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #030303 80%);
}

.book-scene {
    width: 100vw; height: 100vh; display: flex; 
    justify-content: center; align-items: center; perspective: 3000px;
}

.book { 
    height: 85vh; max-height: 900px; max-width: 95vw;
    aspect-ratio: var(--spread-ratio); 
    position: relative; transform-style: preserve-3d; 
}

.book::after {
    content: ""; position: absolute; top: 0; left: 50%; width: 60px; height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%);
    pointer-events: none; z-index: 9999;
}

.leaf {
    position: absolute; right: 0; width: 50%; height: 100%;
    transform-style: preserve-3d; transform-origin: left center;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.3, 1); cursor: pointer;
}
.leaf.flipped { transform: rotateY(-180deg); }

.page {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; background-color: #fdfcf7; 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05);
}
.page.front { transform: rotateY(0deg); }
.page.back { transform: rotateY(180deg); }

.page::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 15%);
    pointer-events: none; transition: opacity 1s ease; opacity: 0; z-index: 10;
}
.leaf.flipped .page.front::after { opacity: 1; }
.leaf:not(.flipped) .page.back::after { opacity: 1; }

.base-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1; 
}

/* ==========================================================
   究極物理描圖紙 (Tracing Paper Material Engine)
   ========================================================== */
.tracing-wrapper {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 5; pointer-events: none; overflow: hidden;
    
    /* 加入柔和的物理彈性，讓「蓋下去」的動作有緩衝感 */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.4, 1), filter 0.8s ease;
}

.tracing-texture {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(235, 238, 240, 0.25); 
    backdrop-filter: blur(1px) brightness(0.95); 
    -webkit-backdrop-filter: blur(1px) brightness(0.95);
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)" opacity="0.08"/></svg>');
}

.tracing-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

.tracing-gloss {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 80%);
    background-size: 250% 100%; mix-blend-mode: overlay;
    transition: background-position 0.8s ease;
}

/* ==========================================================
   重力貼合引擎 (Gravity Cover Animation)
   ========================================================== */

/* ── 裝訂與動畫基礎 ── */
.tracing-wrapper.bound-left {
    right: 0; left: auto; transform-origin: center right;
    animation: gravity-cover-left 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.tracing-wrapper.bound-right {
    left: 0; right: auto; transform-origin: center left;
    /* 秒數故意設得跟左邊一模一樣，讓它們像翅膀一樣「同時蓋下去」 */
    animation: gravity-cover-right 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ── 觸覺互動：滑鼠移入掀開，移出時重力蓋下 ── */
/* 當滑鼠移到左半頁/右半頁時，暫停自動播放，改為手動掀起 */
.page.back:hover .tracing-wrapper.bound-left,
.page.front:hover .tracing-wrapper.bound-right {
    animation: none; 
}
.page.back:hover .tracing-wrapper.bound-left {
    transform: perspective(1500px) rotateY(-15deg) skewY(1deg);
    filter: drop-shadow(-15px 10px 15px rgba(0,0,0,0.3));
}
.page.front:hover .tracing-wrapper.bound-right {
    transform: perspective(1500px) rotateY(15deg) skewY(-1deg);
    filter: drop-shadow(15px 10px 15px rgba(0,0,0,0.3));
}

/* ── 定義「蓋下去」的自動動畫節奏 ── */
@keyframes gravity-cover-left {
    0%, 15% { 
        /* 初始狀態：被輕輕掀起 */
        transform: perspective(1500px) rotateY(-12deg) skewY(1deg); 
        filter: drop-shadow(-12px 8px 12px rgba(0,0,0,0.25)); 
    }
    40%, 75% { 
        /* 核心動作：完全蓋下、貼平底頁、陰影消失 */
        transform: perspective(1500px) rotateY(0deg) skewY(0deg); 
        filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)); 
    }
    100% { 
        /* 再次掀起 */
        transform: perspective(1500px) rotateY(-12deg) skewY