/* 
 * Journey Page Base Styles
 * 提取自 kinmen_2604.html
 * 更新日期：2026-01-07 23:00
 * 新增：響應式標題排版系統
 */

/* ========================================
 * 📱 響應式標題排版模組 (Responsive Title System)
 * 更新日期：2026-01-07 23:00
 * ======================================== */

/* 
 * 使用 clamp() 實現流體排版
 * 語法: clamp(最小值, 理想值, 最大值)
 * - 最小值: 手機最小顯示字體
 * - 理想值: 根據視窗寬度計算 (vw)
 * - 最大值: 桌面最大顯示字體
 */

/* 主標題 - H1 級別 (適用於頁面主標題) */
.responsive-title-xl {
    font-size: clamp(1.75rem, 5vw + 0.5rem, 3.5rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance; /* CSS 新特性：智能平衡文字避免孤字 */
    word-break: keep-all; /* 避免中文字被強制斷開 */
    hyphens: none; /* 禁用連字符 */
    margin-bottom: 2rem;
}

/* 次標題 - H2 級別 */
.responsive-title-lg {
    font-size: clamp(1.5rem, 4vw + 0.3rem, 2.5rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-wrap: balance;
    word-break: keep-all;
    margin-bottom: 1.5rem;
}

/* 小標題 - H3 級別 */
.responsive-title-md {
    font-size: clamp(1.25rem, 3vw + 0.2rem, 2rem);
    line-height: 1.5;
    text-wrap: balance;
    word-break: keep-all;
    margin-bottom: 1rem;
}

/* 區段標題 - H4 級別 */
.responsive-title-sm {
    font-size: clamp(1.1rem, 2.5vw + 0.2rem, 1.5rem);
    line-height: 1.6;
    text-wrap: balance;
    word-break: keep-all;
}

/* 針對超長標題的特殊處理 */
.responsive-title-extra-long {
    font-size: clamp(1.5rem, 4.5vw + 0.4rem, 3rem);
    line-height: 1.35;
    letter-spacing: -0.025em; /* 稍微緊縮字距節省空間 */
    text-wrap: balance;
    word-break: keep-all;
    max-width: 90%; /* 限制最大寬度避免單行過長 */
    margin-left: auto;
    margin-right: auto;
}

/* 針對極長標題的特殊處理 (16+ 字) */
.responsive-title-ultra-long {
    font-size: clamp(1.3rem, 4vw + 0.3rem, 2.6rem);
    line-height: 1.4;
    letter-spacing: -0.03em; /* 更激進的字距緊縮 */
    text-wrap: balance;
    word-break: keep-all;
    max-width: 95%; /* 允許使用更多寬度 */
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word; /* 緊急斷字保護 */
}

/* 手機特別優化 */
@media (max-width: 480px) {
    .responsive-title-xl,
    .responsive-title-extra-long {
        font-size: clamp(1.5rem, 6vw, 2.2rem);
        line-height: 1.4;
        letter-spacing: -0.01em;
    }
    
    .responsive-title-ultra-long {
        font-size: clamp(1.2rem, 5.5vw, 1.9rem);
        line-height: 1.45;
        letter-spacing: -0.04em; /* 極小螢幕最大緊縮 */
    }
    
    .responsive-title-lg {
        font-size: clamp(1.3rem, 5vw, 1.9rem);
    }
    
    .responsive-title-md {
        font-size: clamp(1.15rem, 4vw, 1.6rem);
    }
}

/* 平板優化 */
@media (min-width: 481px) and (max-width: 768px) {
    .responsive-title-xl,
    .responsive-title-extra-long {
        font-size: clamp(2rem, 5.5vw, 2.8rem);
    }
    
    .responsive-title-ultra-long {
        font-size: clamp(1.7rem, 5vw, 2.4rem);
        letter-spacing: -0.02em;
    }
}

/* 大螢幕優化 */
@media (min-width: 1200px) {
    .responsive-title-xl {
        font-size: 3.5rem;
    }
    
    .responsive-title-extra-long {
        font-size: 3rem;
        max-width: 85%;
    }
    
    .responsive-title-ultra-long {
        font-size: 2.6rem;
        max-width: 90%;
        letter-spacing: -0.02em;
    }
}

/* 瀏覽器降級支援 (不支援 clamp 的舊瀏覽器) */
@supports not (font-size: clamp(1rem, 2vw, 3rem)) {
    .responsive-title-xl,
    .responsive-title-extra-long {
        font-size: 2.5rem;
    }
    
    .responsive-title-ultra-long {
        font-size: 2rem;
    }
    
    @media (max-width: 480px) {
        .responsive-title-xl,
        .responsive-title-extra-long {
            font-size: 1.75rem;
        }
        
        .responsive-title-ultra-long {
            font-size: 1.5rem;
        }
    }
}

/* text-wrap: balance 降級支援 */
@supports not (text-wrap: balance) {
    .responsive-title-xl,
    .responsive-title-lg,
    .responsive-title-md,
    .responsive-title-sm,
    .responsive-title-extra-long,
    .responsive-title-ultra-long {
        text-align: justify; /* 降級方案：使用兩端對齊 */
        text-align-last: center; /* 最後一行置中 */
    }
}

/* ======================================== */

/* ========================================
 * 📝 副標題與描述文字響應式系統 (Subtitle & Description)
 * 更新日期：2026-01-07 23:30
 * 自動判斷字數並套用合適大小，避免文字截斷
 * ======================================== */

/* 超長副標題 (31+ 字) - 日期 + 活動詳情等 */
.responsive-subtitle-long {
    font-size: clamp(0.7rem, 2vw + 0.15rem, 0.9rem);
    letter-spacing: clamp(-0.04em, -0.8vw, -0.01em);
    line-height: 1.5;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
}

/* 中等長度副標題 (21-30 字) - Slogan 等 */
.responsive-subtitle-medium {
    font-size: clamp(0.8rem, 2.5vw + 0.2rem, 1rem);
    letter-spacing: clamp(-0.02em, -0.5vw, 0em);
    line-height: 1.6;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 短副標題 (0-20 字) - 簡短說明 */
.responsive-subtitle-short {
    font-size: clamp(0.9rem, 3vw + 0.2rem, 1.1rem);
    line-height: 1.7;
    text-wrap: balance;
    word-break: keep-all;
}

/* 通用安全保護 - 套用到所有副標題元素 */
.journey-subtitle,
.hero-exclusive,
.hero-slogan,
.journey-description p {
    max-width: min(100%, 50rem);
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
    hyphens: none;
}

/* 手機特別優化 - 更激進的字距緊縮 */
@media (max-width: 375px) {
    .responsive-subtitle-long {
        font-size: clamp(0.65rem, 3vw, 0.8rem);
        letter-spacing: -0.05em; /* 極小螢幕最大緊縮 */
        line-height: 1.4;
    }
    
    .responsive-subtitle-medium {
        font-size: clamp(0.75rem, 3.5vw, 0.9rem);
        letter-spacing: -0.03em;
    }
}

/* 平板優化 - 恢復舒適字距 */
@media (min-width: 768px) {
    .responsive-subtitle-long,
    .responsive-subtitle-medium,
    .responsive-subtitle-short {
        letter-spacing: 0em; /* 平板以上恢復正常字距 */
    }
}

/* 瀏覽器降級支援 */
@supports not (font-size: clamp(1rem, 2vw, 3rem)) {
    .responsive-subtitle-long { font-size: 0.8rem; }
    .responsive-subtitle-medium { font-size: 0.9rem; }
    .responsive-subtitle-short { font-size: 1rem; }
}

/* ======================================== */

.details-content {
    padding-left: 2.5rem;
    border-left: 1px solid rgba(44, 62, 54, 0.15);
    margin-left: 0.5rem;
}

.details-content strong {
    display: inline-block;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    font-size: 1.05rem;
    position: relative;
}

.details-content strong::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2rem;
    height: 2px;
    background-color: var(--aged-gold);
}

.details-content ul {
    list-style: none;
    padding-left: 0;
}

.details-content li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

.details-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background-color: var(--aged-gold);
    border-radius: 50%;
}

.pull-quote {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--burgundy-red);
    border-left: 3px solid var(--aged-gold);
    padding-left: 1.5rem;
    margin-top: 2rem;
    font-style: italic;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Narrative Prologue Section --- */
.narrative-prologue {
    background-color: var(--warm-beige);
    padding: 8rem 0;
}

.narrative-prologue .prologue-part {
    margin-bottom: 8rem;
}

/* 1. Prologue - The Ceremonial Opening */
.narrative-prologue .prologue-opening {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 10rem auto;
    padding: 2rem 1rem; /* 修改：加入左右內距 */
}

.narrative-prologue .journey-title {
    /* 使用響應式標題系統 - 適合長標題 */
    font-size: clamp(1.75rem, 5vw + 0.5rem, 3.5rem);
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-wrap: balance; /* 智能平衡文字避免尷尬斷行 */
    word-break: keep-all; /* 保持中文完整性 */
    margin-bottom: 2.5rem;
    font-weight: 600;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.narrative-prologue .journey-description {
    font-size: 1.1rem;
    line-height: 1.9;
    max-width: 650px;
    margin: 0 auto;
    padding: 0 1.5rem; /* 增加到 1.5rem */
    color: var(--text-secondary);
    text-align: left;
    box-sizing: border-box; /* 確保 padding 計入總寬度 */
}

.narrative-prologue .journey-description p {
    margin-bottom: 2rem;
    /* 修正：移除 keep-all，改為 normal 允許自然換行 */
    word-break: normal; 
    overflow-wrap: break-word;
    /* 保持左對齊，不使用 justify */
}

.narrative-prologue .prologue-questions {
    margin: 4rem 0;
    text-align: center;
    color: var(--ink-green);
}

.narrative-prologue .prologue-questions .question {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--burgundy-red);
}

/* 2. Whispers - The Flowing Asymmetry */
.narrative-prologue .who-this-is-for {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.narrative-prologue .who-this-is-for h3 {
    font-family: var(--font-serif);
    /* 使用響應式標題系統 */
    font-size: clamp(1.25rem, 3vw + 0.2rem, 2rem);
    line-height: 1.5;
    text-wrap: balance;
    word-break: keep-all;
    color: var(--ink-green);
    margin-bottom: 3rem;
    text-align: left;
}

.narrative-prologue .who-this-is-for .prologue-content-body {
     padding-left: 4rem;
}

.narrative-prologue .who-this-is-for ul {
    list-style: none;
    padding: 0;
}

.narrative-prologue .who-this-is-for li {
    margin-bottom: 1.8rem;
    line-height: 2;
    font-size: 1.05rem;
    max-width: 600px;
    position: relative;
    padding-left: 1.5rem;
}

.narrative-prologue .who-this-is-for li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--aged-gold);
}

.narrative-prologue .who-this-is-for .welcome-message {
    color: var(--aged-gold);
    font-weight: 600;
    margin-top: 2.5rem;
}

/* 3. Curator - The Magazine-style Feature */
.narrative-prologue .journey-curator {
     text-align: center;
}

.narrative-prologue .journey-curator h3 {
     font-family: var(--font-serif);
    /* 使用響應式標題系統 */
    font-size: clamp(1.25rem, 3vw + 0.2rem, 2rem);
    line-height: 1.5;
    text-wrap: balance;
    word-break: keep-all;
    color: var(--ink-green);
    margin-bottom: 4rem;
}

.narrative-prologue .journey-curator .curator-content {
   max-width: 900px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 4rem;
   align-items: flex-start;
   text-align: left;
   border: none;
   background: none;
   padding: 0;
}

.narrative-prologue .curator-image img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

.narrative-prologue .curator-text h4 {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    text-align: left;
}

.narrative-prologue .curator-text p {
     line-height: 1.9;
     margin-bottom: 1rem;
}

/* Animation */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
 * 📱 手機排版優化 - 更新日期：2026-01-16 17:00
 * ======================================== */

/* 先設定通用手機版樣式 (適用所有 ≤ 768px) */
@media (max-width: 768px) {
    /* 基礎區塊設定 - 增加呼吸感 */
    .narrative-prologue .prologue-opening {
        padding: 3rem 2rem; /* 增加留白 */
    }
    
    .narrative-prologue .journey-title {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .narrative-prologue .journey-description {
        padding: 0 1rem !important;
        font-size: 1rem; /* 16px */
        line-height: 1.9;
        letter-spacing: 0.05em; /* 增加字距 */
    }
    
    .narrative-prologue .journey-description p {
        margin-bottom: 2rem;
        /* 自然左對齊 */
    }
    
    /* 其他區塊 */
    .narrative-prologue .who-this-is-for .prologue-content-body {
         padding-left: 1rem;
    }
    
    .narrative-prologue .journey-curator .curator-content {
        grid-template-columns: 1fr;
    }

    /* 安然基石區塊 - 增加呼吸感 */
    .serenity-foundation {
        padding: 5rem 2rem; /* 增加兩側留白 */
    }
    .serenity-foundation .section-header {
        margin-bottom: 4rem;
    }
    .serenity-card {
        margin-bottom: 4rem;
        max-width: 100%;
    }
    .serenity-card:nth-child(2) {
        margin-left: 0;
    }
    .serenity-foundation .section-lead,
    .serenity-card .curator-note,
    .serenity-card li {
        word-break: normal;
        overflow-wrap: break-word;
        letter-spacing: 0.05em;
        line-height: 1.9;
    }
}

/* 極小螢幕優化 (iPhone SE: 375px, 小型 Android) */
@media (max-width: 375px) {
    .narrative-prologue .prologue-opening {
        padding: 2.5rem 1.5rem !important;
    }
    
    .narrative-prologue .journey-description {
        font-size: 1rem !important;
        line-height: 1.95 !important;
        padding: 0 0.5rem !important;
    }
    
    .narrative-prologue .journey-description p {
        margin-bottom: 1.5rem;
    }

    .serenity-foundation {
        padding: 4rem 1.5rem !important;
    }
}

/* Serenity Foundation */
.serenity-foundation {
    background-color: var(--off-white);
    padding: 8rem 0;
}
.serenity-foundation .container {
    max-width: 800px;
    margin: 0 auto;
}
.serenity-foundation .section-header {
    text-align: center;
    margin-bottom: 6rem;
}
.serenity-foundation h3 {
    font-family: var(--font-serif);
    /* 使用響應式標題系統 */
    font-size: clamp(1.5rem, 4vw + 0.3rem, 2.5rem);
    line-height: 1.4;
    text-wrap: balance;
    word-break: keep-all;
    color: var(--ink-green);
    margin-bottom: 1.5rem;
}
.serenity-foundation .section-lead {
    font-size: 1.1rem;
    line-height: 2.0;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}
.serenity-foundation .section-lead em {
    font-style: italic;
    color: var(--text-primary);
}
.serenity-grid {
    display: block;
    text-align: left;
}
.serenity-card {
    margin-bottom: 6rem;
    max-width: 650px;
}
.serenity-card:nth-child(2) {
    margin-left: auto;
    margin-right: 0;
}
.serenity-card:last-child {
    margin-bottom: 0;
}

.serenity-card h4 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--burgundy-red);
    margin-bottom: 0.5rem;
}
.serenity-card .card-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-style: italic;
}

.serenity-card .curator-note {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 2.0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--aged-gold);
    margin-bottom: 2.5rem;
}

.serenity-card ul {
    list-style: none;
    padding-left: 0.5rem;
    margin-top: 1.5rem;
}
.serenity-card li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 1.5rem;
    line-height: 2.0;
    font-size: 1rem;
    color: var(--text-secondary);
}
.serenity-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 7px;
    height: 7px;
    background-color: var(--aged-gold);
    border-radius: 50%;
}
.serenity-card li strong {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .serenity-foundation {
        padding: 5rem 1.5rem; /* 修正：增加左右內距，避免文字貼邊 */
    }
    .serenity-foundation .section-header {
        margin-bottom: 4rem;
    }
    .serenity-card {
        margin-bottom: 4rem;
        max-width: 100%;
    }
    .serenity-card:nth-child(2) {
        margin-left: 0;
    }
    /* 修正手機版文字斷行問題 */
    .serenity-foundation .section-lead,
    .serenity-card .curator-note,
    .serenity-card li {
        word-break: normal;
        overflow-wrap: break-word;
        /* 保持自然左對齊，不使用 justify */
    }
}

/* CSS 變數定義 */
:root {
    --ink-green: #2C3E36;
    --warm-beige: #F5F1E8;
    --aged-gold: #B8860B;
    --burgundy-red: #7B2D26;
    --text-primary: #2C3E36;
    --text-secondary: #5A6B5D;
    --off-white: #FEFCF7;
    --font-serif: 'Source Serif Pro', serif;
}

.hero-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--ink-green);
    color: var(--warm-beige);
    position: relative;
}
.hero-logo {
    width: 120px;
    margin-bottom: 2rem;
    opacity: 0.9;
}
.hero-brand-name {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    letter-spacing: 2px;
}
.hero-slogan {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0 0 2rem 0;
    opacity: 0.9;
    max-width: 600px;
    line-height: 1.6;
}
.hero-exclusive {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--aged-gold);
    letter-spacing: 1px;
    margin-bottom: 3rem;
}

.hero-image-section {
    width: 100%;
    min-height: 80vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Placeholder background color */
    background-color: #2C3E36; 
}

/* 滾動指示器 */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 2px solid var(--aged-gold);
    border-radius: 25px;
    cursor: pointer;
    animation: scrollBounce 2s infinite;
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 10px;
    background-color: var(--aged-gold);
    border-radius: 3px;
    animation: scrollWheel 2s infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(10px); }
}

@keyframes scrollWheel {
    0% { opacity: 0; top: 8px; }
    30% { opacity: 1; }
    100% { opacity: 0; top: 20px; }
}

/* Modal Styles */
body.modal-is-open { overflow: hidden; }
.spotlight-container {
    position: fixed; inset: 0; z-index: 1050;
    display: flex; justify-content: center; align-items: center;
    visibility: hidden; pointer-events: none;
}
.spotlight-container.is-visible { visibility: visible; pointer-events: auto; }
.spotlight-backdrop {
    position: absolute; inset: 0; background-color: var(--ink-green);
    opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.spotlight-container.is-visible .spotlight-backdrop { opacity: 0.85; }
.spotlight-content {
    width: 90%; max-width: 800px; max-height: 85vh;
    background-color: var(--warm-beige); border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 3rem 3.5rem; overflow-y: auto; position: relative; opacity: 0;
}
.spotlight-container.is-visible .spotlight-content {
    animation: spotlight-enter 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.spotlight-close-btn {
    position: sticky; top: 1.5rem; right: 1.5rem; float: right;
    width: 30px; height: 30px; border: none; background: transparent;
    font-size: 2.5rem; line-height: 1; color: var(--text-secondary);
    cursor: pointer; z-index: 10;
}
.spotlight-close-btn:hover { color: var(--burgundy-red); }
@keyframes spotlight-enter {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.spotlight-content > strong {
    display: block; font-family: var(--font-serif); font-size: 1.5rem;
    font-weight: 600; color: var(--ink-green); line-height: 1.4;
    margin: 3rem 0 1.5rem 0; padding-top: 2rem;
    border-top: 1px solid rgba(44, 62, 54, 0.15);
}
.spotlight-content > strong:first-of-type {
    margin-top: 0; padding-top: 0; border-top: none;
}

/* 行程圖片區塊優化 */
.journey-chapter {
    min-height: 50vh !important;
}

.chapter-image {
    max-height: 50vh;
}

@media (min-width: 769px) {
    .journey-chapter {
        min-height: 60vh !important;
    }
    
    .chapter-image {
        max-height: 60vh;
    }
}

/* 🎯 圖片載入與效能優化 */
img {
    transform: translateZ(0);
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    max-width: 100%;
    height: auto;
}

.hero-image-section,
.chapter-image img {
    image-rendering: auto;
    transform: scale(0.999);
}

.hero-image-section {
    filter: contrast(1.01);
    background-size: cover !important;
    background-attachment: scroll !important;
}

.curator-image img,
img[src*="zhu_youxun"] {
    max-width: 600px !important;
    height: auto !important;
    object-fit: cover;
}

img[loading="lazy"]:not([src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .chapter-image img,
    .highlight-card img {
        image-rendering: -webkit-optimize-contrast;
    }
}