/* ---
敘事區塊完全重新設計 - 真正體現「一期一會」品牌精神
設計師: UI 設計大師
更新日期: 2025-09-30 23:45
參考: 品牌視覺識別系統指南
核心原則: 靜謐 (Quietude) | 呼吸感 (Breathability) | 真實感 (Authenticity)
--- */

.narrative-section {
    background: linear-gradient(180deg, 
        #FFFFFF 0%, 
        #FEFDF8 30%,
        #F5F5DC 100%
    );
    padding: 15vh 2rem 18vh;
    position: relative;
    overflow: hidden;
}

/* 添加微妙的、溫暖的紙質紋理氛圍 */
.narrative-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 35%, transparent 0%, rgba(44, 62, 54, 0.015) 100%),
        radial-gradient(circle at 75% 75%, transparent 0%, rgba(123, 45, 38, 0.01) 100%);
    pointer-events: none;
    opacity: 0.6;
}

.narrative-content {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* 基礎段落樣式 - 強調「從容不迫」的閱讀體驗 */
.narrative-item {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    line-height: 2.5; /* 品牌指南要求 1.7x-2.0x，這裡給更多呼吸感 */
    color: rgba(44, 62, 54, 0.82);
    margin-bottom: 0;
    padding: 1rem 0;
    text-align: justify; /* 兩端對齊，更有雜誌感 */
    text-justify: inter-character;
    letter-spacing: 0.02em;
    
    /* 動畫初始狀態 */
    opacity: 0;
    transform: translateY(35px) scale(0.98);
    transition: opacity 1.4s cubic-bezier(0.19, 1, 0.22, 1), 
                transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 非同步、漸進式的出現 - 創造「輕微的、非同步的」層次感 */
.narrative-item:nth-child(1) { transition-delay: 0.2s; }
.narrative-item:nth-child(2) { transition-delay: 0.45s; }
.narrative-item:nth-child(3) { transition-delay: 0.7s; }
.narrative-item:nth-child(4) { transition-delay: 0.95s; }
.narrative-item:nth-child(5) { transition-delay: 1.3s; }  /* h2 - 延遲加大，製造停頓感 */
.narrative-item:nth-child(6) { transition-delay: 1.7s; }  /* 新段落，刻意拉開 */
.narrative-item:nth-child(7) { transition-delay: 1.9s; }
.narrative-item:nth-child(8) { transition-delay: 2.15s; }
.narrative-item:nth-child(9) { transition-delay: 2.4s; }
.narrative-item:nth-child(10) { transition-delay: 2.65s; }
.narrative-item:nth-child(11) { transition-delay: 2.9s; }

.narrative-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ===== 第一段：引子 ===== */

/* 開場句 - 簡潔有力 */
.narrative-item:nth-child(1) {
    font-size: 1.65rem;
    font-weight: 500;
    color: var(--ink-green);
    line-height: 2;
    padding-top: 0;
    margin-bottom: 5vh; /* 使用視窗高度單位，更有呼吸感 */
    letter-spacing: 0.05em;
}

/* 描述段落組 (2-4) */
.narrative-item:nth-child(2),
.narrative-item:nth-child(3),
.narrative-item:nth-child(4) {
    font-size: 1.28rem;
    color: rgba(44, 62, 54, 0.72);
    line-height: 2.3;
    padding: 0.75rem 0;
}

/* 第二句 - 鋪陳 */
.narrative-item:nth-child(2) {
    padding-top: 0;
}

/* 第四句後 - 創造段落群組的呼吸空間 */
.narrative-item:nth-child(4) {
    margin-bottom: 6vh;
}

/* ===== 核心標語 (h2) - 情感最高潮 ===== */
.narrative-content h2.narrative-item {
    font-size: 2.3rem;
    font-weight: 600;
    line-height: 1.8;
    color: var(--burgundy-red);
    letter-spacing: 0.03em;
    text-align: center; /* 核心句居中，增加儀式感 */
    margin: 8vh 0 10vh; /* 上下留出大量空間 */
    padding: 3.5rem 1.5rem;
    position: relative;
    text-justify: auto; /* 取消兩端對齊 */
}

/* 裝飾性引號 - 古銅金色，低調奢華 */
/*
.narrative-content h2.narrative-item::before,
.narrative-content h2.narrative-item::after {
    font-family: var(--font-serif);
    font-size: 4rem;
    color: var(--aged-gold);
    opacity: 0.2;
    position: absolute;
    line-height: 1;
}
*/
/*
.narrative-content h2.narrative-item::before {
    content: '「';
    left: -0.5em;
    top: 2.5rem;
}

.narrative-content h2.narrative-item::after {
    content: '」';
    right: -0.5em;
    bottom: 2.5rem;
}
*/

/*
.narrative-content h2.narrative-item::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background-color: var(--aged-gold);
    border-radius: 50%;
    opacity: 0.35;
}
*/

/* ===== 第二段：品牌起源 ===== */

/* 段落開頭 - 轉折 */
.narrative-item.narrative-lead {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink-green);
    line-height: 2.2;
    margin-top: 0;
    margin-bottom: 4vh;
    padding-top: 0;
}

/* 平鋪句 */
.narrative-item:nth-child(7) {
    font-size: 1.3rem;
    color: rgba(44, 62, 54, 0.75);
    margin-bottom: 4.5vh;
}

/* 關鍵揭示句 - 核心洞察 */
.narrative-item.narrative-revelation {
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 2;
    color: var(--burgundy-red);
    font-style: italic;
    text-align: center;
    margin: 6vh 0;
    padding: 2.5rem 2rem;
    position: relative;
}

/* 為關鍵句添加側邊裝飾線 */
.narrative-item.narrative-revelation::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 55%;
    background: linear-gradient(to bottom, 
        transparent, 
        rgba(184, 134, 11, 0.5) 30%, 
        rgba(184, 134, 11, 0.5) 70%, 
        transparent
    );
}

/* 延續句 */
.narrative-item:nth-child(9) {
    font-size: 1.32rem;
    color: rgba(44, 62, 54, 0.78);
    line-height: 2.4;
    margin-bottom: 4vh;
}

/* 承諾句 */
.narrative-item.narrative-promise {
    font-size: 1.42rem;
    font-style: italic;
    color: rgba(44, 62, 54, 0.82);
    line-height: 2.3;
    margin: 3.5vh 0;
}

/* 信念句 - 收尾，力量感 */
.narrative-item.narrative-belief {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.1;
    color: var(--ink-green);
    text-align: center;
    margin-top: 6vh;
    padding: 2rem 1rem 0;
}

/* ===== 響應式調整 ===== */

/* 平板 */
@media (max-width: 992px) {
    .narrative-section {
        padding: 12vh 2rem 14vh;
    }

    .narrative-content {
        max-width: 680px;
    }

    .narrative-item {
        font-size: 1.3rem;
        line-height: 2.3;
    }

    .narrative-item:nth-child(1) {
        font-size: 1.5rem;
        margin-bottom: 4vh;
    }

    .narrative-content h2.narrative-item {
        font-size: 2rem;
        margin: 6vh 0 8vh;
        padding: 2.5rem 1rem;
    }

    .narrative-item.narrative-revelation {
        font-size: 1.85rem;
        margin: 5vh 0;
    }

    .narrative-item.narrative-belief {
        font-size: 1.6rem;
        margin-top: 5vh;
    }
}

/* 手機版 */
@media (max-width: 768px) {
    .narrative-section {
        padding: 10vh 1.5rem 12vh;
    }

    .narrative-content {
        max-width: 100%;
    }

    .narrative-item {
        font-size: 1.15rem;
        line-height: 2.2;
        padding: 0.8rem 0;
        text-align: left; /* 手機版改回左對齊，更易讀 */
    }

    .narrative-item:nth-child(1) {
        font-size: 1.35rem;
        margin-bottom: 3.5vh;
        line-height: 1.9;
    }

    .narrative-item:nth-child(2),
    .narrative-item:nth-child(3),
    .narrative-item:nth-child(4) {
        font-size: 1.08rem;
        line-height: 2.1;
    }

    .narrative-item:nth-child(4) {
        margin-bottom: 4.5vh;
    }

    .narrative-content h2.narrative-item {
        font-size: 1.6rem;
        line-height: 1.75;
        margin: 5vh 0 6vh;
        padding: 2rem 0.5rem;
    }

    .narrative-content h2.narrative-item::before,
    .narrative-content h2.narrative-item::after {
        font-size: 2.5rem;
        opacity: 0.15;
    }

    .narrative-content h2.narrative-item::before {
        left: -0.3em;
        top: 1.5rem;
    }

    .narrative-content h2.narrative-item::after {
        right: -0.3em;
        bottom: 1.5rem;
    }

    .narrative-item.narrative-lead {
        font-size: 1.28rem;
        margin-bottom: 3vh;
        line-height: 2.1;
    }

    .narrative-item:nth-child(7) {
        font-size: 1.12rem;
        margin-bottom: 3.5vh;
    }

    .narrative-item.narrative-revelation {
        font-size: 1.5rem;
        line-height: 1.9;
        margin: 4vh 0;
        padding: 2rem 1rem;
        text-align: left;
    }

    .narrative-item.narrative-revelation::before {
        left: -0.8rem;
        width: 2px;
        height: 50%;
    }

    .narrative-item:nth-child(9) {
        font-size: 1.12rem;
        line-height: 2.2;
        margin-bottom: 3vh;
    }

    .narrative-item.narrative-promise {
        font-size: 1.18rem;
        line-height: 2.1;
        margin: 2.5vh 0;
    }

    .narrative-item.narrative-belief {
        font-size: 1.4rem;
        line-height: 2;
        margin-top: 4.5vh;
        padding: 1.5rem 0.5rem 0;
        text-align: left;
    }
}

/* 超小螢幕 */
@media (max-width: 480px) {
    .narrative-section {
        padding: 8vh 1.25rem 10vh;
    }

    .narrative-item {
        font-size: 1.08rem;
        line-height: 2.1;
    }

    .narrative-item:nth-child(1) {
        font-size: 1.25rem;
    }

    .narrative-content h2.narrative-item {
        font-size: 1.45rem;
        padding: 1.5rem 0.25rem;
    }

    .narrative-item.narrative-revelation {
        font-size: 1.35rem;
    }

    .narrative-item.narrative-belief {
        font-size: 1.28rem;
    }
}


/* ---
電影感過場效果 (Cinematic Parallax Transition)
設計師: UI 設計大師
更新日期: 2025-09-30
目的: 為 .moment-section 添加視差滾動效果，提升敘事沉浸感。
--- */

.moment-background {
    background-attachment: fixed;
    /* 確保背景圖片在所有設備上都能盡可能地覆蓋整個視窗，
       同時保持其比例，這對於視差效果至關重要。 */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* --- 2025-10-01: 新增電影轉場動畫 --- */
.moment-section .moment-background {
    opacity: 0.8;
    transform: scale(1.1);
    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.moment-section .moment-quote {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out 0.4s, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

.moment-section.is-visible .moment-background {
    opacity: 1;
    transform: scale(1);
}

.moment-section.is-visible .moment-quote {
    opacity: 1;
    transform: translateY(0);
}