/* ============================================================
 * 《密封线》 memetic.css — 全局模因污染效果层
 * 所有页面可复用。按阶段控制强度：表面阶段极微弱 / 里面阶段强烈 / 结局阶段叙事化。
 * 全部为纯 CSS 效果（网页内表达），无 JS 依赖。
 * ============================================================ */

/* ---------- 基础故障：RGB 分离（glitch） ---------- */
.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;overflow:hidden;
  pointer-events:none;opacity:.75;
}
.glitch::before{color:#ff3b30;z-index:-1;animation:glitchA 3.2s infinite steps(1);}
.glitch::after{color:#0af;z-index:-2;animation:glitchB 3.7s infinite steps(1);}
@keyframes glitchA{
  0%,86%,100%{transform:none;opacity:0}
  88%{transform:translate(-3px,1px);opacity:.8}
  90%{transform:translate(2px,-1px);opacity:.6}
  92%{transform:translate(-1px,2px);opacity:.8}
  94%{transform:none;opacity:0}
}
@keyframes glitchB{
  0%,80%,100%{transform:none;opacity:0}
  82%{transform:translate(3px,-1px);opacity:.7}
  84%{transform:translate(-2px,1px);opacity:.5}
  87%{transform:translate(1px,-2px);opacity:.7}
  89%{transform:none;opacity:0}
}

/* ---------- 文字漂移 / 呼吸（缓慢不安） ---------- */
.drift{display:inline-block;animation:drift 6s ease-in-out infinite;}
@keyframes drift{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(1.5px,-1px)}
  40%{transform:translate(-1px,1.5px)}
  60%{transform:translate(1px,1px)}
  80%{transform:translate(-1.5px,-1px)}
}
.breath{animation:breath 3.4s ease-in-out infinite;}
@keyframes breath{0%,100%{opacity:.72}50%{opacity:1}}

/* ---------- 随机文字抖动行（段落级） ---------- */
.jitter-line{animation:jitter 2.2s infinite;}
@keyframes jitter{
  0%,94%,100%{transform:translate(0,0)}
  95%{transform:translate(1px,0)}
  96%{transform:translate(-1px,0)}
  97%{transform:translate(1px,0)}
  98%{transform:translate(-1px,0)}
  99%{transform:translate(.5px,0)}
}

/* ---------- 监视感：角落闪烁标签 ---------- */
.watch-tag{
  position:fixed;top:12px;left:14px;z-index:999996;pointer-events:none;
  font:9px var(--font-mono);letter-spacing:3px;color:rgba(128,128,128,.35);
  animation:watchBlink 5s step-end infinite;
}
@keyframes watchBlink{0%,70%,100%{opacity:.25}75%{opacity:.9}80%{opacity:.25}85%{opacity:.8}}

/* ---------- 全屏轻微噪点/颗粒（氛围） ---------- */
.grain-layer{
  position:fixed;inset:0;z-index:999984;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- 淡入入场（页面级，尊重 reduced-motion） ---------- */
.page-enter{animation:pageEnter .7s ease-out both;}
@keyframes pageEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 阶段强度控制 ---------- */
/* 表面：几乎不可见的氛围（真实官网质感优先） */
html[data-phase="surface"] .grain-layer{opacity:.03}
html[data-phase="surface"] .glitch::before,html[data-phase="surface"] .glitch::after{animation-duration:9s}

/* 里面：强烈模因污染 */
html[data-phase="inner"] .grain-layer{opacity:.08}
html[data-phase="inner"] .watch-tag{color:rgba(0,230,118,.4)}
html[data-phase="inner"] .drift{animation-duration:3.4s}
html[data-phase="inner"] .glitch::before,html[data-phase="inner"] .glitch::after{animation-duration:1.6s}

/* 结局：叙事化、克制但凝重 */
html[data-phase="ending"] .grain-layer{opacity:.06}
html[data-phase="ending"] .watch-tag{display:none}

/* 减少动态偏好 */
@media (prefers-reduced-motion:reduce){
  .glitch::before,.glitch::after,.drift,.breath,.jitter-line{animation:none!important}
}