/* ==========================================================================
   Helsuo 网站焕新 · 全局动效系统 motion.css
   --------------------------------------------------------------------------
   参考对象：Linear（指针聚光灯）、Vercel/Geist（克制弹簧）、Stripe（极光渐变）、
   Cuberto / Locomotive（非线性滚动动效）、Apple（Spring 物理曲线）。
   原则：动效为体验服务——只在 hover / 进入视口 / 用户操作时发生；
        全部尊重 prefers-reduced-motion，绝不造成布局抖动。
   ========================================================================== */

/* ---------- 1. 动效令牌（非线性曲线：回弹 / 指数 / 五次缓入缓出） ---------- */
/* 速度倍率由「管理后台 → 动效管理」下发（--hs-dur-scale），
   轻柔=1.4 倍时长、标准=1、强烈=0.72；总开关关闭时趋近于 0 */
:root {
    --hs-dur-scale: 1;
    --hs-dur-fast: calc(0.18s * var(--hs-dur-scale));
    --hs-dur-med: calc(0.32s * var(--hs-dur-scale));
    --hs-dur-slow: calc(0.55s * var(--hs-dur-scale));
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);        /* 经典回弹（过冲后收敛） */
    --ease-spring-soft: cubic-bezier(0.22, 1.2, 0.36, 1);    /* 柔性回弹 */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);          /* 指数减速（高档入场） */
    --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);     /* 五次对称（大幅位移） */
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* 弹性（点赞/徽章） */

    /* 聚光灯颜色（跟随主题） */
    --hs-spot-color: rgba(73, 177, 245, 0.14);
    --hs-spot-border: rgba(73, 177, 245, 0.45);
}

[data-mode="dark"] {
    --hs-spot-color: rgba(120, 190, 255, 0.10);
    --hs-spot-border: rgba(120, 190, 255, 0.35);
}

/* 速度档位（管理后台可配置） */
html[data-hs-speed="soft"]   { --hs-dur-scale: 1.4; }
html[data-hs-speed="normal"] { --hs-dur-scale: 1; }
html[data-hs-speed="strong"] { --hs-dur-scale: 0.72; }

/* 总开关关闭：全站降级为瞬时切换，并移除装饰性动效（与 prefers-reduced-motion 同款兜底） */
html[data-hs-motion="off"] {
    --hs-dur-scale: 0.001;
}
html[data-hs-motion="off"] .hs-spot::before,
html[data-hs-motion="off"] .hs-spot::after,
html[data-hs-motion="off"] .hs-scroll-progress { display: none !important; }
html[data-hs-motion="off"] .slide-up-hidden { filter: none !important; transform: none !important; opacity: 1 !important; }
html[data-hs-motion="off"] *, html[data-hs-motion="off"] *::before, html[data-hs-motion="off"] *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
}

/* ---------- 2. 滚动滑入：升级为「非线性 + 可组合」显现 ---------- */
/* 覆盖 styles.css 的同名过渡：换成 expo 曲线。
   ⚠️ 不再常驻 filter:blur() 与 will-change：常驻模糊 + 合成层会让每张卡片在滚动时
   持续重绘/占显存，是首页「卡顿」的主要来源之一；显现效果由 opacity + transform 承担即可。 */
.slide-up-hidden {
    transition: opacity 0.7s var(--ease-out-expo),
                transform 0.7s var(--ease-out-expo);
}
.slide-up-hidden.slide-up-visible { opacity: 1; }

/* 方向变体（配合 script.js 动态添加的 from-left / from-right） */
.slide-up-hidden.from-left  { transform: translateX(-56px); }
.slide-up-hidden.from-right { transform: translateX(56px); }

/* 显现后必须把方向位移复位。⚠️ 这条规则必须写在上面「方向变体」之后：
   两者优先级同为 (0,2,0) 时由源码顺序决定胜负；若漏写或写反，卡片会永久偏移 ±56px
   （这正是首页「帖子位置歪了」的根因）。此处用三连类名 (0,3,0) 提升优先级，彻底压过
   方向变体与 styles.css 的 .article-card:hover。 */
.slide-up-hidden.from-left.slide-up-visible,
.slide-up-hidden.from-right.slide-up-visible { transform: translateX(0); }

/* 缩放浮现：zoom-in / zoom-out 两种戏剧化入场 */
.slide-up-hidden.hs-zoom   { transform: translateY(40px) scale(0.92); }
.slide-up-hidden.hs-zoom-out { transform: translateY(24px) scale(1.06); }
.slide-up-hidden.hs-zoom.slide-up-visible,
.slide-up-hidden.hs-zoom-out.slide-up-visible { transform: translateY(0) scale(1); }

/* 3D 翻转登场（英雄卡片 / 轮播） */
.slide-up-hidden.hs-flip { transform: translateY(48px) rotateX(14deg) perspective(900px); transform-origin: center top; }
.slide-up-hidden.hs-flip.slide-up-visible { transform: translateY(0) rotateX(0); }

/* ---------- 3. 指针聚光灯：卡片内一盏跟随鼠标的灯 ---------- */
.hs-spot {
    position: relative;
    isolation: isolate;
}
.hs-spot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity var(--hs-dur-med) ease;
    background: radial-gradient(320px circle at var(--hs-mx, 50%) var(--hs-my, 50%),
                var(--hs-spot-color), transparent 65%);
}
.hs-spot:hover::before { opacity: 1; }
/* 描边高光：内侧 1px 亮边，提升「玻璃质感」 */
.hs-spot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity var(--hs-dur-med) ease;
    padding: 1px;
    background: radial-gradient(260px circle at var(--hs-mx, 50%) var(--hs-my, 50%),
                var(--hs-spot-border), transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
}
.hs-spot:hover::after { opacity: 1; }

/* ---------- 4. 3D 倾斜（指针驱动，弹簧回位） ---------- */
/* 注意：不能用 transform-style: preserve-3d —— 它会使 overflow:hidden 失效，
   导致卡片圆角被封面图等子元素顶爆（方块角）。纯 rotateX/rotateY 无需 3D 上下文。 */
.hs-tilt {
    transition: transform 0.45s var(--ease-spring-soft);
    will-change: transform;
}

/* ---------- 5. 磁吸按钮：指针靠近时被轻轻「拽住」 ---------- */
.hs-magnetic {
    transition: transform 0.35s var(--ease-spring);
    will-change: transform;
}

/* ---------- 6. 涟漪（点击处扩散，水物理感） ---------- */
.hs-ripple-host { position: relative; overflow: hidden; }
.hs-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 60%, transparent 100%);
    animation: hsRipple 0.65s var(--ease-out-expo) forwards;
    z-index: 10;
}
@keyframes hsRipple {
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---------- 7. Toast 轻提示（替代浏览器原生 alert 的页面内反馈） ---------- */
.hs-toast-root {
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.hs-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(86vw, 520px);
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: hsToastIn 0.5s var(--ease-spring) forwards;
}
.hs-toast.hs-toast-out { animation: hsToastOut 0.35s var(--ease-smooth) forwards; }
.hs-toast .hs-toast-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    flex-shrink: 0;
}
.hs-toast.hs-toast-success .hs-toast-dot { background: #34c98e; box-shadow: 0 0 10px #34c98e; }
.hs-toast.hs-toast-error   .hs-toast-dot { background: #f2603c; box-shadow: 0 0 10px #f2603c; }
.hs-toast.hs-toast-warn    .hs-toast-dot { background: #f5a623; box-shadow: 0 0 10px #f5a623; }
@keyframes hsToastIn  { from { opacity: 0; transform: translateY(-22px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hsToastOut { to   { opacity: 0; transform: translateY(-12px) scale(0.94); } }

/* ---------- 8. 顶部滚动进度条（激光条）：渐变流光 ---------- */
.hs-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(var(--hs-scroll, 0));
    z-index: 2147483001;
    pointer-events: none;
    background: linear-gradient(90deg, #49b1f5, #a78bfa 45%, #f472b6 80%, #fbbf24);
    box-shadow: 0 0 12px rgba(73, 177, 245, 0.55);
}

/* ---------- 9. 保留位：不再改动页面既有控件（如回到顶部按钮） ---------- */

/* ---------- 10. 保留位：不再使用颜色遮罩（极光已移除） ---------- */

/* ---------- 11. 保留位：页面过渡幕布已移除（颜色遮罩不需要） ---------- */

/* ---------- 12. 点赞粒子爆发 ---------- */
.hs-burst-particle {
    position: fixed;
    pointer-events: none;
    z-index: 2147483002;
    width: 8px; height: 8px;
    border-radius: 50%;
    will-change: transform, opacity;
}

/* ---------- 13. 通用微交互增强 ---------- */
/* 全局平滑锚点滚动 */
html { scroll-behavior: smooth; }

/* 图片卡片 hover 轻微放大 */
.hs-img-zoom { overflow: hidden; }
.hs-img-zoom img { transition: transform 0.6s var(--ease-out-expo); }
.hs-img-zoom:hover img { transform: scale(1.05); }

/* 键盘可达性：清晰的焦点环（操作逻辑：可发现性） */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 选中色 */
::selection {
    background: rgba(73, 177, 245, 0.28);
    color: inherit;
}

/* 导航/侧栏/按钮的按压回弹（点击时 scale 0.96，松开弹簧回位） */
button, .sidebar-item, .nav-tab, .article-card, .hero-mini-card {
    -webkit-tap-highlight-color: transparent;
}

/* 数字滚动（统计数字） */
.hs-count { font-variant-numeric: tabular-nums; }

/* 骨架屏：更柔的呼吸（覆盖 styles.css 高频闪烁） */
.sk-line, .sk-cover, .sk-avatar, .hsk-badge, .hsk-title, .hsk-desc, .hsk-meta, .detail-skeleton {
    animation-duration: 2.2s !important;
    animation-timing-function: var(--ease-smooth) !important;
}

/* 快捷键提示徽标 */
.hs-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    border-bottom-width: 2px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    line-height: 1.5;
}

/* ---------- 14. 尊重系统「减弱动态效果」偏好：一律降级为瞬时切换 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01s !important;
    }
    .slide-up-hidden { filter: none !important; transform: none !important; opacity: 1 !important; }
    .hs-spot::before, .hs-spot::after { display: none !important; }
    html { scroll-behavior: auto; }
}

/* ---------- 15. 触屏设备：禁用指针类效果（无 hover 则无意义） ---------- */
@media (hover: none) {
    .hs-spot::before, .hs-spot::after { display: none; }
    .hs-tilt { transform: none !important; }
}