/* ============================================================
   horror.css — 心理恐怖效果
   无相校规 · 槐川市第七中学档案调查系统
   阶段:恐怖氛围动画增强补丁(增量视觉层)

   原则:
   - 所有效果仅为视觉层,不修改数据/存档/谜题/结局。
   - 强度由 js/horror-effects.js 按 PHASE 曲线控制(body[data-hx])。
   - 只使用 animation/transition/opacity/transform/filter,
     不修改布局,不产生跳点,不影响点击与滚动。
   - 强度必须"几乎察觉不到",测试者可感知即视为强度过高。
   约束:禁止 Jump Scare / 弹窗 / 音频 / 全屏变色。
   ============================================================ */

/* ---------- 无障碍:减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    .hx-scanlines, .hx-corner { display: none !important; }
}

/* ---------- 效果一:网页呼吸(一次只影响一个区域) ---------- */
.hx-breath {
    animation: hx-breath 8s ease-in-out 1;
}
@keyframes hx-breath {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.97; }
}

/* ---------- 效果二:旧照片短暂失焦 ---------- */
.hx-blur {
    animation: hx-blur 0.6s ease-in-out 1;
}
@keyframes hx-blur {
    0%, 100% { filter: blur(0); }
    50%      { filter: blur(0.5px); }
}

/* ---------- 效果三:文字轻微错位(非乱码,无 RGB 分离) ---------- */
.hx-shift {
    animation: hx-shift 0.18s ease-in-out 1;
}
@keyframes hx-shift {
    0%, 100% { transform: translateX(0); }
    33%      { transform: translateX(1px); }
    66%      { transform: translateX(-1px); }
}

/* ---------- 效果九:链接悬停异常(字距轻微变化) ---------- */
body.hx-hover a {
    transition: letter-spacing 0.15s ease;
}
body.hx-hover a:hover {
    letter-spacing: 2px;
}

/* ---------- 效果五:点击延迟(按钮迟钝 + 结果淡入) ---------- */
.hx-busy {
    opacity: 0.55;
    filter: saturate(0.75);
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.hx-reveal {
    animation: hx-reveal 0.5s ease-out 1;
}
@keyframes hx-reveal {
    from { opacity: 0.15; }
    to   { opacity: 1; }
}

/* ---------- 效果七:旧网页扫描线(几乎不可见) ---------- */
.hx-scanlines {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.04;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0px,
        rgba(0, 0, 0, 0.6) 1px,
        transparent 1px,
        transparent 3px
    );
    animation: hx-scan 10s linear infinite;
}
@keyframes hx-scan {
    0%   { transform: translateY(0); }
    100% { transform: translateY(3px); }
}

/* ---------- 效果八:页面角落异常文字(短暂、极小、一次一条) ---------- */
.hx-corner {
    position: fixed;
    z-index: 9999;
    font-family: '宋体', SimSun, serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: rgba(60, 40, 30, 0.75);
    pointer-events: none;
    user-select: none;
    animation: hx-corner 0.2s linear 1;
}
@keyframes hx-corner {
    0%   { opacity: 0; }
    25%  { opacity: 0.9; }
    100% { opacity: 0; }
}

/* ---------- 效果十:局部暗化(一次只影响一个区域) ---------- */
.hx-dim {
    filter: brightness(0.88);
    transition: filter 1.2s ease;
}

/* ---------- 效果十二:照片"停留越久越不安" ---------- */
.hx-unsettle {
    animation: hx-unsettle 2.2s ease-in-out 1;
}
@keyframes hx-unsettle {
    0%, 100% { filter: contrast(1) brightness(1) blur(0); }
    50%      { filter: contrast(1.05) brightness(0.95) blur(0.3px); }
}

/* ---------- 陆界专属:网页身份短暂消失(视觉层) ---------- */
.hx-gone {
    opacity: 0.12 !important;
    transition: opacity 0.15s ease;
}
.hx-flash {
    color: #111 !important;
    font-weight: bold;
    text-decoration: none !important;
}

/* ---------- 移动端:禁止动画引起横向滚动/跳动 ---------- */
@media (max-width: 768px) {
    .hx-scanlines, .hx-corner { display: none !important; }
    body.hx-hover a { letter-spacing: normal !important; }
}

/* ============================================================
   结局动画专用(纯视觉层 · 零素材 · 三结局各有镜头语言)
   使用时机由 pages/phase14/end-*.html 的 inline JS 控制
   ============================================================ */

/* 开场黑幕:从全黑中睁开眼 */
.eg-veil {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    background: #000;
    z-index: 9997;
    pointer-events: none;
    opacity: 1;
    animation: eg-veil-out 1.4s ease-out 1 forwards;
}
@keyframes eg-veil-out { from { opacity: 1; } to { opacity: 0; } }

/* 极淡扫描线:档案还在被读取 */
.eg-scan {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9996;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0px,
        rgba(0, 0, 0, 0.6) 1px,
        transparent 1px,
        transparent 3px
    );
}
.eg-scan.on { opacity: 0.02; animation: hx-scan 10s linear infinite; }

/* 打字机光标 */
.eg-cursor {
    display: inline-block;
    width: 8px; height: 15px;
    background: #333;
    margin-left: 2px;
    vertical-align: -2px;
    animation: eg-blink 0.9s steps(1) infinite;
}
@keyframes eg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 片尾字幕卡(transition 版:最终 opacity 是属性值,.still 不影响) */
.eg-endcard {
    text-align: center;
    font-size: 12px;
    color: #999999;
    letter-spacing: 3px;
    margin-top: 28px;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.eg-endcard.on { opacity: 1; }

/* 处理中(灰字) */
.eg-busy { color: #999999 !important; }

/* 白底闪帧(坏结局唯一破绽) */
.eg-flash {
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    background: #ffffff; color: #111111;
    z-index: 9997;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: bold; letter-spacing: 6px;
    opacity: 0;
    pointer-events: none;
}
.eg-flash.on { animation: eg-flash-frame 0.18s steps(1) 1; }
@keyframes eg-flash-frame { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* 隐藏结局:更慢的呼吸(她还活着,只是很慢) */
.eg-breath-slow { animation: hx-breath 12s ease-in-out 1; }

/* ============================================================
   恐怖增强包(暗角 / 信号丢失 / 照片靠近)—— 纯视觉层
   ============================================================ */

/* 全局暗角:老屏幕压抑感(data-hx 由 horror-effects.js 设置) */
body[data-hx]::after {
    content: '';
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 9995;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.14) 100%);
}

/* 信号丢失:整页短暂灰度闪(停电谜夜感) */
.hx-signal {
    animation: hx-signal 0.12s steps(2) 1;
}
@keyframes hx-signal {
    0%, 100% { filter: grayscale(0); }
    50%      { filter: grayscale(1) brightness(1.15); }
}

/* 照片缓慢靠近(我的秘密花园感) */
.hx-zoom {
    animation: hx-zoom 2.4s ease-in-out 1;
}
@keyframes hx-zoom {
    0%, 100% { transform: scale(1); filter: blur(0); }
    50%      { transform: scale(1.015); filter: blur(0.4px); }
}