/* ==========================================================================
   专注模式 (Focus Mode)
   --------------------------------------------------------------------------
   类似 Typora 的阅读专注模式：当前焦点块正常显示，其余块弱化。
   ========================================================================== */

/* --- 1. CSS 变量 --- */
:root {
    --focus-dim-opacity: 0.25;
    --focus-transition-duration: 0.3s;
}

/* --- 2. 专注模式容器：定义过渡 --- */
[data-focus-mode] > p,
[data-focus-mode] > h1,
[data-focus-mode] > h2,
[data-focus-mode] > h3,
[data-focus-mode] > h4,
[data-focus-mode] > h5,
[data-focus-mode] > h6,
[data-focus-mode] > blockquote,
[data-focus-mode] > pre,
[data-focus-mode] > figure,
[data-focus-mode] > table,
[data-focus-mode] > hr,
[data-focus-mode] > .markdown-alert,
[data-focus-mode] > ul > li,
[data-focus-mode] > ol > li {
    transition: opacity var(--focus-transition-duration) ease,
                filter var(--focus-transition-duration) ease;
}

/* --- 3. 弱化状态：所有块默认弱化 --- */
[data-focus-mode="active"] > p,
[data-focus-mode="active"] > h1,
[data-focus-mode="active"] > h2,
[data-focus-mode="active"] > h3,
[data-focus-mode="active"] > h4,
[data-focus-mode="active"] > h5,
[data-focus-mode="active"] > h6,
[data-focus-mode="active"] > blockquote,
[data-focus-mode="active"] > pre,
[data-focus-mode="active"] > figure,
[data-focus-mode="active"] > table,
[data-focus-mode="active"] > hr,
[data-focus-mode="active"] > .markdown-alert,
[data-focus-mode="active"] > ul > li,
[data-focus-mode="active"] > ol > li {
    opacity: var(--focus-dim-opacity);
    filter: saturate(0.5);
}

/* --- 4. 焦点状态：当前块正常显示 --- */
[data-focus-mode="active"] > .focus-active,
[data-focus-mode="active"] > ul > li.focus-active,
[data-focus-mode="active"] > ol > li.focus-active {
    opacity: 1;
    filter: none;
}

[data-focus-mode="active"] > ul.focus-active > li,
[data-focus-mode="active"] > ol.focus-active > li {
    opacity: 1;
    filter: none;
}

/* --- 4.1 锁定焦点视觉提示：虚线框（使用 outline 避免布局偏移） --- */
[data-focus-mode="active"] > .focus-locked {
    opacity: 1;
    filter: none;
    outline: 1px dashed var(--color-border, #ddd);
    outline-offset: 12px;
}

/* 列表项：缩小 offset 避免遮挡 */
[data-focus-mode="active"] > ul > li.focus-locked,
[data-focus-mode="active"] > ol > li.focus-locked {
    opacity: 1;
    filter: none;
    outline: 1px dashed var(--color-border, #ddd);
    outline-offset: 4px;
}

/* --- 4.2 目录跳转高亮闪烁 --- */
@keyframes toc-highlight-blink {
    0%, 100% { outline-color: transparent; }
    50% { outline-color: var(--color-border, #ddd); }
}

.toc-jump-highlight {
    outline: 1px dashed transparent;
    outline-offset: 16px;
    animation: toc-highlight-blink 0.6s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
    .toc-jump-highlight {
        animation: none;
        outline-color: var(--color-border, #ddd);
    }
}

/* --- 5. 专注模式切换按钮 --- */
.focus-mode-zone {
    position: fixed;
    bottom: 30px;
    right: calc(30px + 44px + 10px);
    width: 140px;
    height: 90px;
    z-index: 100;
}

.focus-mode-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--color-text-subtle);
    font-family: var(--font-family-mono, ui-monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.4s;
}

.focus-mode-zone:hover .focus-mode-btn,
.focus-mode-btn:focus-visible,
.focus-mode-zone.is-revealed .focus-mode-btn {
    opacity: 1;
    pointer-events: auto;
}

.focus-mode-btn:hover {
    background-color: var(--color-code-bg);
    border-color: var(--color-text-subtle);
}

.focus-mode-btn .focus-mode-label {
    line-height: 1;
}

/* 激活状态 */
.focus-mode-btn.is-active {
    background-color: var(--color-code-bg);
    border-color: var(--color-text-subtle);
    color: var(--color-text-strong);
}

.focus-mode-btn.is-active:hover {
    background-color: #ededed;
    border-color: var(--color-text-subtle);
}

/* --- 5.1 演示模式切换按钮 --- */
.presentation-mode-zone {
    position: fixed;
    top: calc(18px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    width: 180px;
    height: 70px;
    z-index: 100;
}

.presentation-mode-btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 32px;
    padding: 0 12px;
    gap: 6px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    color: var(--color-text-subtle);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s, opacity 0.4s;
}

.presentation-mode-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.presentation-mode-zone:hover .presentation-mode-btn,
.presentation-mode-btn:focus-visible,
.presentation-mode-zone.is-revealed .presentation-mode-btn {
    opacity: 1;
    pointer-events: auto;
}

.presentation-mode-btn:hover {
    background-color: var(--color-code-bg);
    border-color: var(--color-text-subtle);
}

.presentation-mode-btn.is-active {
    background-color: var(--color-code-bg);
    border-color: var(--color-text-subtle);
    color: var(--color-text-strong);
}

.presentation-mode-btn.is-active:hover {
    background-color: #ededed;
    border-color: var(--color-text-subtle);
}

.presentation-mode-label {
    line-height: 1;
}

/* --- 5.2 演示模式：隐藏头部导航 --- */
.is-presentation .site-header {
    display: none;
}

.is-presentation .container {
    padding-top: 0;
}

.is-presentation .post-full-header {
    min-height: 100vh;
    min-height: 100svh;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- 6. 减少动画偏好支持 --- */
@media (prefers-reduced-motion: reduce) {
    [data-focus-mode] > p,
    [data-focus-mode] > h1,
    [data-focus-mode] > h2,
    [data-focus-mode] > h3,
    [data-focus-mode] > h4,
    [data-focus-mode] > h5,
    [data-focus-mode] > h6,
    [data-focus-mode] > blockquote,
    [data-focus-mode] > pre,
    [data-focus-mode] > figure,
    [data-focus-mode] > table,
    [data-focus-mode] > hr,
    [data-focus-mode] > .markdown-alert,
    [data-focus-mode] > ul > li,
    [data-focus-mode] > ol > li {
        transition: none;
    }
    
    .action-btn-focus {
        transition: none;
    }
}

/* --- 7. 响应式 --- */
@media (max-width: 600px) {
    .focus-mode-zone {
        bottom: 30px;
        right: calc(30px + 44px + 10px);
        width: 120px;
        height: 80px;
    }

    .focus-mode-btn {
        width: 40px;
        height: 40px;
        font-size: 10px;
    }

    .presentation-mode-zone {
        top: calc(14px + env(safe-area-inset-top));
        right: calc(14px + env(safe-area-inset-right));
        width: 160px;
        height: 60px;
    }

    .presentation-mode-btn {
        height: 30px;
        padding: 0 10px;
        font-size: 10px;
    }

    .is-presentation .container {
        padding-top: 0;
    }
}