/* 第六轮：只加效果。借来的效果（BlurText、ScrollReveal、SpotlightCard）的样式在前半，自己写的雨、雾在后半。
   来源和许可见 borrowed.js 文件头。 */

/* ---------- 拆开的字 ---------- */
.ch { display: inline-block; }

/* ---------- BlurText：逐字从糊到清、从下方一点点升上来（去掉了原版的弹簧回弹） ---------- */
.blurtext .ch { opacity: 0; filter: blur(10px); transform: translateY(.35em); transition: opacity var(--bt-step) linear var(--d), filter var(--bt-step) cubic-bezier(.33,1,.68,1) var(--d), transform calc(var(--bt-step) * 1.2) cubic-bezier(.22,1,.36,1) var(--d); }
.blurtext.blur-in .ch { opacity: 1; filter: none; transform: none; }
/* 标题本身的整段淡入交给逐字，不再叠一层 */
.motion-on #world .wrap > h2 { opacity: 1; transform: none; }

/* ---------- ScrollReveal：逐字的 opacity、blur 由 JS 按滚动写 ---------- */
.scrubbing .ch { will-change: opacity, filter; }
/* 结尾那句：显形交给滚动，不再整段淡入 */
.motion-on .end .end-line { opacity: 1; transform: none; }

/* ---------- SpotlightCard → 灯笼光 ---------- */
.lantern { position: absolute; z-index: 2; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(circle closest-side, rgba(240,194,122,.55), rgba(240,170,90,.26) 45%, rgba(240,160,80,.08) 75%, transparent); }
.wcard-mist { z-index: 1; }
/* 光在雾的上面（screen 叠上去，像灯透过雾），字在光的上面 */
.wcard-body { z-index: 3; }
.wcard.wmore .wcard-more { z-index: 3; }
/* 雾里的卡：手碰到的地方露出不糊的画（同一张图叠一层，用光的位置做遮罩） */
.m-clear { opacity: var(--clear, 0); filter: brightness(.66) saturate(.6) !important;
  -webkit-mask-image: radial-gradient(circle 110px at var(--lx, 50%) var(--ly, 50%), #000 30%, transparent 100%);
  mask-image: radial-gradient(circle 110px at var(--lx, 50%) var(--ly, 50%), #000 30%, transparent 100%); }
/* 原来的悬停变清楚保留，灯笼在上面加 */

/* ---------- 自己写的：入梦一段，雾散开走进去 ---------- */
.dream { --lift: 0; }
.dream .m-soft { filter: blur(14px) brightness(.8) saturate(.7); opacity: calc(1 - var(--lift)); }
.m-veil { position: absolute; inset: 0; pointer-events: none; opacity: calc(.85 * (1 - var(--lift)));
  background: radial-gradient(ellipse 90% 60% at 50% 55%, rgba(205,214,222,.42), rgba(205,214,222,.18) 60%, transparent 100%), linear-gradient(rgba(190,200,210,.18), rgba(190,200,210,.18)); }

/* ---------- 自己写的：雨、雾（入梦、结尾） ---------- */
.m-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 雾沿用首屏 .fog 的画法（两团横向拉长的灰白），换位置、换速度，两层错开 */
.m-fog { inset: -10% -40% 0; opacity: .9; }
.m-fog-b { animation-duration: 46s; animation-direction: alternate-reverse; opacity: .7; top: 30%; }
.m-fog-end { top: 20%; }

@media (prefers-reduced-motion: reduce) {
  .m-rain, .lantern, .m-clear { display: none; }
  .m-veil, .dream .m-soft { opacity: 0; }
}