/* ============================================================
   OneNav 炫酷动效层 fx.css · v2.0.3 · 2026-09-21 面壁人浮川
   仅动效/装饰，不改布局结构。所有隐藏类动画都依赖 html.fx-js，
   JS 未加载时一切正常显示（不会白屏/丢内容）。
   prefers-reduced-motion 下全面降级为静态。
   回滚：删除 css/fx.css + js/fx.js + functions.php 中「炫酷动效层」段。
   ============================================================ */

:root{
    --fx-red: #f1404b;
    --fx-pink: #db448b;
    --fx-cyan: #22d3ee;
    --fx-violet: #8b5cf6;
    --fx-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   1. 滚动进度条（顶部霓虹线）
   ============================================================ */
/* 进度条：不用 box-shadow（发光会每帧重绘更大区域），
   靠渐变本色保持霓虹感；只变 transform，走合成层。 */
#fx-progress{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2000;
    pointer-events: none;
    background: linear-gradient(90deg, var(--fx-red), var(--fx-pink) 35%, var(--fx-violet) 65%, var(--fx-cyan));
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
    contain: strict;
}

/* ============================================================
   2. 鼠标光斑（仅精确指针设备）
   ============================================================ */
#fx-cursor{
    position: fixed;
    top: 0; left: 0;
    width: 420px; height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .4s ease;
    background: radial-gradient(circle,
        rgba(241,64,76,.16) 0%,
        rgba(139,92,246,.10) 38%,
        rgba(34,211,238,.05) 62%,
        transparent 72%);
    will-change: transform;
}
html.fx-cursor-on #fx-cursor{ opacity: 1; }
.io-black-mode #fx-cursor{
    background: radial-gradient(circle,
        rgba(241,64,76,.22) 0%,
        rgba(139,92,246,.14) 38%,
        rgba(34,211,238,.08) 62%,
        transparent 72%);
}

/* ============================================================
   3. 卡片入场（滚动揭示 + 错峰）
   ============================================================ */
/* 注意：不在此处设置 will-change —— 首屏有上百个卡片，
   常驻 will-change 会一次性创建上百个合成层，反而掉帧。
   仅在 .fx-animating（揭示过程中）临时提升，动画结束由 JS 移除。 */
html.fx-js .fx-reveal{
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.985);
    transition: opacity .55s var(--fx-ease), transform .55s var(--fx-ease);
    transition-delay: var(--fx-d, 0ms);
}
html.fx-js .fx-reveal.fx-animating{
    will-change: opacity, transform;
}
html.fx-js .fx-reveal.fx-in{
    opacity: 1;
    transform: none;
}

/* ============================================================
   4. 站点卡片：3D 倾斜 + 聚光 + 流光扫过
   ============================================================ */
.url-card .url-body{ perspective: 800px; }

.url-card .card{
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .28s var(--fx-ease),
                box-shadow .28s var(--fx-ease),
                border-color .28s var(--fx-ease);
}

/* 聚光：跟随鼠标的柔光（content-visibility 避免未 hover 时参与绘制）*/
.url-card .card::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
        rgba(241,64,76,.14), rgba(139,92,246,.08) 45%, transparent 68%);
}
.url-card .card:hover::before{ opacity: 1; visibility: visible; }

/* 流光：斜向高光扫过 */
.url-card .card::after{
    content: "";
    position: absolute;
    top: -60%; bottom: -60%;
    left: -40%;
    width: 36%;
    z-index: 1;
    pointer-events: none;
    transform: translateX(-160%) rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    opacity: 0;
    visibility: hidden;
}
.io-black-mode .url-card .card::after{
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.url-card .card:hover::after{
    opacity: 1;
    visibility: visible;
    animation: fx-sweep .85s var(--fx-ease);
}
@keyframes fx-sweep{
    0%   { transform: translateX(-160%) rotate(16deg); }
    100% { transform: translateX(420%)  rotate(16deg); }
}

.url-card .card:hover{
    transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.025);
    box-shadow: 0 18px 40px rgba(16,24,40,.16), 0 0 0 1px rgba(241,64,76,.16);
    z-index: 3;
}
.io-black-mode .url-card .card:hover{
    box-shadow: 0 18px 44px rgba(0,0,0,.55),
                0 0 24px rgba(241,64,76,.22),
                0 0 0 1px rgba(241,64,76,.28);
}
.url-card .card-body,
.url-card .url-content{ position: relative; z-index: 2; }

/* 图标：hover 放大 + 轻微回弹 */
.url-card .url-img{
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.url-card .card:hover .url-img{
    transform: scale(1.14) rotate(-4deg);
    filter: drop-shadow(0 4px 10px rgba(241,64,76,.28));
}
/* 标题：hover 渐变文字 */
.url-card .url-info strong{
    transition: color .25s ease, letter-spacing .25s ease;
}
.url-card .card:hover .url-info strong{
    color: var(--fx-red);
    letter-spacing: .01em;
}
/* 右侧跳转箭头：滑入 */
.url-card .togo{
    transition: transform .3s var(--fx-ease), opacity .3s ease;
    opacity: .55;
}
.url-card .card:hover .togo{
    transform: translateX(3px) scale(1.15);
    opacity: 1;
    color: var(--fx-red) !important;
}

/* ============================================================
   5. 点击波纹
   ============================================================ */
.fx-ripple{
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(circle, rgba(241,64,76,.35), rgba(241,64,76,0) 70%);
    transform: translate(-50%, -50%) scale(0);
    animation: fx-ripple .6s ease-out forwards;
}
@keyframes fx-ripple{
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ============================================================
   6. 侧栏菜单：发光指示条 + 图标弹动
   ============================================================ */
.sidebar-item > a{
    position: relative;
    transition: transform .25s var(--fx-ease), color .25s ease, background-color .25s ease;
}
.sidebar-item > a::before{
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 0;
    border-radius: 2px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--fx-red), var(--fx-pink));
    box-shadow: 0 0 10px rgba(241,64,76,.7);
    transition: height .28s var(--fx-ease);
}
.sidebar-item > a:hover::before,
.sidebar-item.active > a::before{ height: 62%; }
.sidebar-item > a:hover{ transform: translateX(5px); }
.sidebar-item > a .iconfont{
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .25s ease;
}
.sidebar-item > a:hover .iconfont{
    transform: scale(1.22) rotate(8deg);
    color: var(--fx-red);
}

/* ============================================================
   7. 搜索框：聚焦光环 + 呼吸
   ============================================================ */
#search-text{
    transition: box-shadow .35s ease, transform .3s var(--fx-ease), background-color .3s ease;
}
#search-text:focus{
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 0 0 3px rgba(241,64,76,.18),
                0 10px 30px rgba(241,64,76,.20),
                0 0 26px rgba(139,92,246,.18) !important;
}
#btn_search{
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .25s ease;
}
#btn_search:hover{ transform: scale(1.18) rotate(-8deg); color: var(--fx-red); }

.super-search-fm{ position: relative; }
.super-search-fm::after{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, var(--fx-red), var(--fx-violet), var(--fx-cyan), var(--fx-red));
    background-size: 300% 100%;
    filter: blur(10px);
    z-index: -1;
    transition: opacity .35s ease;
}
.super-search-fm.fx-focus::after{
    opacity: .55;
    animation: fx-hue 4s linear infinite;
}
@keyframes fx-hue{
    to { background-position: 300% 0; }
}

/* ============================================================
   8. 区块标题：流光渐变 + 展开下划线
   ============================================================ */
.widget-header,
h2.text-gray{
    position: relative;
    display: inline-block;
}
.widget-header::after,
h2.text-gray::after{
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    height: 2px; width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--fx-red), var(--fx-pink), transparent);
    transition: width .5s var(--fx-ease);
}
.widget-header:hover::after,
h2.text-gray:hover::after{ width: 100%; }

.widget-header .iconfont,
h2.text-gray .iconfont{
    display: inline-block;
    transition: transform .4s var(--fx-ease);
}
.widget-header:hover .iconfont,
h2.text-gray:hover .iconfont{
    transform: translateY(-2px) scale(1.15) rotate(-6deg);
}

/* GitHub 精选标题：霓虹渐变文字（静态渐变，不做无限流动——
   文字渐变 + 无限 background-position 动画在长页面上持续重绘，掉帧明显；
   改为 hover 时才流动。 */
#gh-daily-sites > h2{
    background: linear-gradient(90deg, var(--fx-red), var(--fx-pink) 30%, var(--fx-violet) 60%, var(--fx-cyan));
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#gh-daily-sites > h2:hover{
    animation: fx-hue 7s linear infinite;
}
#gh-daily-sites > h2 small{
    -webkit-text-fill-color: initial;
}

/* ============================================================
   9. 徽章 / 热榜 / 按钮 微动效
   ============================================================ */
/* 徽章：只在 hover 时脉动。首屏有 15+ 个徽章，常驻无限动画
   会持续触发重绘，滚动帧率可见下降。 */
.badge.vc-red{
    transition: box-shadow .3s ease, transform .3s var(--fx-ease);
}
.badge.vc-red:hover,
.card:hover .badge.vc-red{
    animation: fx-badge 2.6s ease-in-out infinite;
}
@keyframes fx-badge{
    0%,100% { box-shadow: 0 0 0 0 rgba(241,64,76,.45); }
    50%     { box-shadow: 0 0 0 5px rgba(241,64,76,0); }
}

.hot-body .hot-item,
.hot-card li{
    transition: transform .25s var(--fx-ease), color .25s ease;
}
.hot-body .hot-item:hover,
.hot-card li:hover{ transform: translateX(6px); }

.btn, .mw-btn, .page-link{
    transition: transform .25s var(--fx-ease), box-shadow .25s ease, filter .25s ease;
}
.btn:hover, .mw-btn:hover, .page-link:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(241,64,76,.22);
}

/* 返回顶部 / 悬浮按钮 */
#back-to-top, .io-back-to-top, .go-up{
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
#back-to-top:hover, .io-back-to-top:hover, .go-up:hover{
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 26px rgba(241,64,76,.32);
}

/* ============================================================
   10. 首屏加载：渐隐 + 预载动画增强
   ============================================================ */
#loading{
    transition: opacity .45s ease, visibility .45s ease;
}
#loading.fx-out{ opacity: 0; visibility: hidden; }

/* ============================================================
   11. 移动端降负载：关掉倾斜/流光，保留轻量位移
   ============================================================ */
@media (hover: none), (max-width: 767px){
    .url-card .card::after{ display: none; }
    .url-card .card:hover{ transform: translateY(-3px); }
    #fx-cursor{ display: none; }
}

/* ============================================================
   12. 无障碍：减少动态偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce){
    html.fx-js .fx-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
    .url-card .card::after,
    #fx-cursor,
    #fx-progress{ display: none !important; }
    .badge.vc-red:hover,
    .card:hover .badge.vc-red,
    #gh-daily-sites > h2:hover,
    .super-search-fm.fx-focus::after{ animation: none !important; }
    .url-card .card:hover{ transform: none; }
    *{ scroll-behavior: auto !important; }
}