/* ============================================================
   画卷展开模式 — 最小补充样式
   继承详情页全部 CSS（global.css + poetry.css + poetry-detail.css）
   本文件只补充：全屏布局、返回按钮、控制条、逐字动画、鉴赏区淡入
   ============================================================ */

/* ---- 全屏布局（去掉侧边栏，正文居中） ---- */
.scroll-page .scroll-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 24px 60px;
}

/* ---- 返回按钮（浮动左上角，玻璃态） ---- */
.scroll-back-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--ui-glass-bg, rgba(255, 255, 255, 0.22));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ui-glass-border, rgba(255, 255, 255, 0.30));
    color: var(--sidebar-btn-color, #8a6a9a);
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: color 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.scroll-back-btn:hover {
    color: var(--sidebar-btn-hover-color, #9b6bff);
    transform: scale(1.03);
}
.scroll-back-btn:active {
    transform: scale(0.97);
}
.scroll-back-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* ---- 播放控制条（玻璃态，悬浮在正文上方） ---- */
.scroll-controls {
    position: sticky;
    top: 16px;
    z-index: 50;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 16px;
    background: var(--ui-glass-bg, rgba(255, 255, 255, 0.22));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ui-glass-border, rgba(255, 255, 255, 0.30));
    margin-bottom: 20px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.scroll-ctrl-btn {
    padding: 6px 16px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--sidebar-btn-color, #8a6a9a);
    font-size: 13px;
    font-family: inherit;
    transition: color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}
.scroll-ctrl-btn:hover {
    color: var(--sidebar-btn-hover-color, #9b6bff);
}
.scroll-ctrl-btn:active {
    transform: scale(0.96);
}
.scroll-ctrl-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- 逐字动画（初始隐藏，揭示时淡入） ---- */
.scroll-char {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-char.scroll-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---- 鉴赏区（播放完成后淡入） ---- */
.scroll-extra {
    opacity: 0;
    transition: opacity 1.5s ease;
}
.scroll-extra.scroll-extra-visible {
    opacity: 1;
}

/* ---- 移动端 ---- */
@media (max-width: 640px) {
    .scroll-page .scroll-content {
        padding: 12px 14px 40px;
    }
    .scroll-back-btn {
        top: 10px;
        left: 10px;
        padding: 6px 10px;
        font-size: 12px;
    }
    .scroll-back-btn svg {
        width: 14px;
        height: 14px;
    }
    .scroll-controls {
        gap: 6px;
        padding: 6px 12px;
    }
    .scroll-ctrl-btn {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* ---- 无障碍：减弱动画 ---- */
@media (prefers-reduced-motion: reduce) {
    .scroll-char {
        transition: opacity 0.2s ease;
        transform: none;
    }
    .scroll-char.scroll-revealed {
        transform: none;
    }
}