/* VOID-FMU Motion —— 飞行层与页面接管样式 */

.vfmm-layer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2147483000;
    overflow: hidden;
    pointer-events: none;
    contain: layout style paint;
}

.vfmm-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.vfmm-el {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

.vfmm-frame {
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .14);
}

.vfmm-cover {
    background: rgba(0, 0, 0, .04);
}

/* 复刻卡片自身的颜色遮罩（style-2 的 .content-wrap 用 rgba(0,0,0,.4) 压暗头图） */
.vfmm-scrim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vfmm-cover img,
.vfmm-cover video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.vfmm-title {
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

.vfmm-title h1 {
    margin: 0;
    padding: 0;
    width: 100%;
    word-break: break-word;
}

.vfmm-title a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
}

/* 标题压到头图上时转白（由脚本按几何相交切换） */
.vfmm-title.vfmm-on-cover,
.vfmm-title.vfmm-on-cover h1,
.vfmm-title.vfmm-on-cover a {
    color: #fff !important;
    transition: color .12s linear;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.vfmm-excerpt,
.vfmm-meta {
    color: inherit;
}

/* 点击瞬间把卡片从 :hover 状态压回常态色：主题的悬停规则带 !important，
   这里用更高优先级 + !important 反向覆盖，并把过渡清零让颜色瞬间落定，
   否则随后读取 computed style 会拿到过渡中的中间值。 */
section#index-list > ul > li.vfmm-frozen,
section#index-list > ul > li.vfmm-frozen * {
    transition: none !important;
}

@media screen and (min-width: 1024.5px) {
    section#index-list > ul > li.vfmm-frozen:hover {
        border-color: rgba(0, 0, 0, .86);
    }

    .theme-dark section#index-list > ul > li.vfmm-frozen:hover {
        border-color: rgba(255, 255, 255, .05);
    }

    section#index-list > ul > li.vfmm-frozen:hover.style-2 article .content-wrap {
        background: rgba(0, 0, 0, .4);
    }

    section#index-list > ul > li.vfmm-frozen:hover:not(.style-2):not(.full-content) article .title,
    section#index-list > ul > li.vfmm-frozen.full-content article .title:hover {
        color: rgba(0, 0, 0, .98) !important;
    }

    .theme-dark section#index-list > ul > li.vfmm-frozen:hover:not(.style-2):not(.full-content) article .title,
    .theme-dark section#index-list > ul > li.vfmm-frozen.full-content article .title:hover {
        color: #cececf !important;
    }
}

/* 加载标记：超时后出现在视口上方 */
.vfmm-spinner {
    position: absolute;
    left: 50%;
    top: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(127, 127, 127, .28);
    border-top-color: currentColor;
    color: inherit;
    transform: translate(-50%, 0);
    animation: vfmm-spin .8s linear infinite;
}

@keyframes vfmm-spin {
    from { transform: translate(-50%, 0) rotate(0deg); }
    to { transform: translate(-50%, 0) rotate(360deg); }
}

/* 新页接管：content-replace 会换掉内联样式，所以必须用选择器规则 */
html.vfmm-active #pjax-container {
    opacity: 0 !important;
}

html.vfmm-active #post.float-up,
html.vfmm-settling #post.float-up {
    animation: none !important;
}

/* 动效期间锁住滚动，但**保留滚动条本身**：把滚动条藏掉会让视口宽出十几像素，
   结束后滚动条回来，整页内容（尤其头图）会横向跳一下。
   这里改成继续保留纵向滚动条、同时用 scrollbar-gutter 预留槽位，
   再用 JS 拦掉滚轮/触摸/翻页键进行输入层的锁定。 */
html.vfmm-lock {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

/* 原本就有滚动条时改成"继续显示滚动条"，这样视口宽度前后一致，头图不会横向跳。
   本来没有滚动条（短页面）时不能强开，否则反倒会凭空多出一条。 */
html.vfmm-lock.vfmm-lock-bar {
    overflow-y: scroll !important;
}

html.vfmm-lock body {
    overflow: visible !important;
}

/* 动效期间导航栏始终可见：压过 .vfmm-layer 的层级，并压住 headroom 的上滑隐藏 */
html.vfmm-flying body > header {
    z-index: 2147483001 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .vfmm-spinner { animation-duration: 1.6s; }
}

/* 接管阶段：文章页真实的 .post-title / p.post-meta 被搬进飞行层，
   脱离 .lazy-wrap / .banner-title 后主题那几条颜色与下划线规则不再命中，这里按有无头图补齐 */
.vfmm-layer.vfmm-has-banner > .post-meta a {
    color: #fff;
    border-bottom: 1px solid #fff;
    text-decoration: none;
}

.vfmm-layer.vfmm-nobanner > .post-meta a {
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    text-decoration: none;
}

.theme-dark .vfmm-layer.vfmm-nobanner > .post-meta a {
    color: #b0b0b0;
    border-bottom-color: rgba(255, 255, 255, .05);
}

/* 搬进来的标题/信息行不再吃主题的入场动画 */
.vfmm-layer > .post-title,
.vfmm-layer > .post-meta {
    animation: none !important;
}

/* 页面残影：飞行层的底图，位置按点击时的滚动量对齐视口 */
.vfmm-ghost {
    position: fixed;
    margin: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    z-index: 0;
}

.vfmm-ghost script { display: none !important; }

/* 残影是"静态快照"：cloneNode 出来的节点会让 CSS 动画从头再播一遍
   （页面加载时的入场动效会在残影里重演），所以整棵子树压掉动画与过渡 */
.vfmm-ghost,
.vfmm-ghost * {
    animation: none !important;
    transition: none !important;
}