/* ══════════════════════════════════════════════════════
   整页动效  motion.css(2026-07)—— "月的引力 / 潮汐节律"
   三层结构:进场层(GSAP ScrollTrigger,只播一次,脚本 assets/js/motion.js)
            氛围层(循环漂浮/视差,GSAP 驱动)
            hover 层(纯 CSS,本文件)
   门控:html.has-motion 由 head 内联脚本按 prefers-reduced-motion 决定;
        无 JS / reduce 时本文件的隐藏规则全部不生效,页面保持静态终态。
   必须在所有 sections/*.css 之后加载(扫光靠源顺序覆盖标题背景)。
   ══════════════════════════════════════════════════════ */

/* ── 进场初始态 + 安全阀 ──
   只隐藏 opacity(位移由 GSAP from 提供),不影响 ScrollTrigger 布局测量;
   安全阀:若 motion.js 加载失败,2.4s 后自动淡入,内容绝不永久隐藏 */
.has-motion [data-reveal] {
  opacity: 0;
  animation: reveal-safety var(--motion-dur-m) var(--motion-ease-tide) 2.4s forwards;
}
.has-motion [data-reveal].is-in { opacity: 1; animation: none; }
/* GSAP 成功接管(motion.js 同步加 motion-ready)后撤掉安全阀 */
html.has-motion.motion-ready [data-reveal] { animation: none; }
@keyframes reveal-safety { to { opacity: 1; } }

/* ── 签名动效:渐变标题"月光扫过" ──
   在标准母题渐变(90deg #EEEEEE→#D1A1FF)上叠一层高光带,只动高光层
   background-position,一次性扫过;原渐变完整保留为第二层(遗漏会变白条)。
   background-clip:text 会把所有背景层一起裁进文字,故多重背景可行 */
.has-motion [data-shine] {
  background-image:
    linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%),
    linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  background-size: 60% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0, 0 0; /* 高光初始在字面左外侧 */
}
/* html 前缀抬高 type 位,压过上面两条 animation:none(is-in / motion-ready) */
html.has-motion [data-shine].is-shine {
  animation: title-shine 1.1s ease-in-out 0.25s 1 forwards;
  will-change: background-position; /* 老 Safari 偶发不重绘的兜底 */
}
/* about 信条:扫光延迟拉长,节奏更庄重 */
html.has-motion .about__creed.is-shine { animation-delay: 0.5s; }
@keyframes title-shine {
  from { background-position: -150% 0, 0 0; }
  to   { background-position: 250% 0, 0 0; } /* no-repeat 百分比定位,250% 已完全滑出右侧 */
}

/* ── 氛围层:星空视差 ──
   .site-bg 是 fixed,本体加 transform 会毁掉 fixed 定位,只动 ::after;
   伪元素 GSAP 选不中,经 CSS 变量 --star-y 桥接(JS quickSetter 写入,
   位移量 clamp 在 -160px 内);inset 上下外扩兜住位移不露边 */
.has-motion .site-bg::after {
  inset: -170px 0;
  transform: translateY(var(--star-y, 0px));
  will-change: transform;
}

/* ── hover 层:卡片浮起 + 辉光(与进场解耦:进场结束 clearProps 后由这里接管)──
   A 类有卡底(好评卡/洞察卡):浮起 + 紫辉光 + 描边环 */
.reviews__card,
.insights__card {
  transition: transform var(--motion-dur-s) var(--motion-ease-tide),
              box-shadow var(--motion-dur-s) ease,
              border-color var(--motion-dur-s) ease;
}
.reviews__card:hover,
.insights__card:hover {
  transform: translateY(var(--motion-hover-lift));
  box-shadow: 0 14px 44px rgba(120, 70, 200, 0.28),
              0 0 0 1px rgba(197, 184, 237, 0.16);
}
/* 封面缩放:动整个 __media(图 + 压暗渐变 + 徽章同一子树一起缩放),
   越界部分由卡片自身的 overflow:hidden 裁掉。
   不能只缩放 __cover——图片会被提升为独立合成层,它的裁切边缘与上层
   渐变在亚像素处对不齐,过渡期间图底会闪出 1px 亮缝。
   媒体区不加 overflow:hidden——裁切线正压在图底,任何 DPR 下抗锯齿行
   都可能漏亮(浅色封面尤其明显) */
.insights__media { transition: transform var(--motion-dur-s) var(--motion-ease-tide); }
.insights__card:hover .insights__media { transform: scale(1.03); }
/* 压暗渐变下探 2px,把封面底边的抗锯齿像素行整行盖死(下方卡体是深色,
   多出的 2px 不可见);亮缝在浅底封面(第一张卡)上才看得出来 */
.insights__media::after { bottom: -2px; }

/* B 类无卡底(阶段卡/生活方式/图谱卡):只浮起,辉光加在视觉件上
   (无边界元素上矩形阴影会穿帮) */
.cycle__phase,
.lifestyle__item,
.atlas__card {
  transition: transform var(--motion-dur-s) var(--motion-ease-tide);
}
.cycle__phase:hover,
.lifestyle__item:hover,
.atlas__card:hover {
  transform: translateY(var(--motion-hover-lift));
}
.cycle__phase-icon { transition: filter var(--motion-dur-s) ease; }
.cycle__phase:hover .cycle__phase-icon { filter: drop-shadow(0 0 14px rgba(209, 161, 255, 0.55)); }
.atlas__visual { transition: filter var(--motion-dur-s) ease; }
.atlas__card:hover .atlas__visual { filter: brightness(1.08); }

/* ── 层叠修正:好评卡 transform 会创建层叠上下文,可能盖过 DOM 在前的压边图;
   deco 已是 pointer-events:none,提层无副作用 ── */
.reviews__deco { z-index: 2; }

/* ── reduced-motion:门控脚本此时不加 has-motion(隐藏/扫光/视差天然失效),
   这里是双保险 + 管辖 hover 层(保留辉光反馈,去掉位移) ── */
@media (prefers-reduced-motion: reduce) {
  [data-shine] { animation: none !important; }
  .site-bg::after { transform: none !important; }
  .reviews__card:hover,
  .insights__card:hover,
  .cycle__phase:hover,
  .lifestyle__item:hover,
  .atlas__card:hover { transform: none; }
  .insights__card:hover .insights__media { transform: none; }
}