/* Luxe 质感层（全部 50 套模板共用，在 Finesse 之后加载）
   在 Finesse 的“编排 + 反馈”之上补充材质与触感：
   胶片颗粒、卡片聚光描边与微倾、按钮文字翻滚、图片滚动景深、
   长句随阅读点亮、带阅读进度环的动效开关、手机菜单逐项展开。
   不播放开场动画、不替换系统光标。所有颜色取自模板自身变量；无 JS、减少动态效果或手动暂停时，页面保持完整静态。 */
:root{
  --lx-ease:cubic-bezier(.16,1,.3,1);
  --lx-ease-io:cubic-bezier(.76,0,.24,1);
  --lx-glow:color-mix(in srgb,var(--accent,#888) 14%,transparent);
}

/* ── 胶片颗粒：极轻的纸面/胶片质感，让纯色大面积不再“塑料” ── */
html::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ── 卡片：随光标移动的柔光与描边高光（叠在内容上方，透明度很低，不影响阅读） ── */
.lx-card{--lx-mx:50%;--lx-my:50%}
.lx-spot{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--lx-mx) var(--lx-my),var(--lx-glow),transparent 62%);
  transition:opacity .5s var(--lx-ease)}
.lx-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(260px circle at var(--lx-mx) var(--lx-my),color-mix(in srgb,var(--accent,#888) 85%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lx-card.lx-lit>.lx-spot{opacity:1}
.lx-row>.lx-spot{background:radial-gradient(520px circle at var(--lx-mx) var(--lx-my),color-mix(in srgb,var(--accent,#888) 9%,transparent),transparent 65%)}
.lx-row>.lx-spot::before{display:none}
@media (hover:hover) and (min-width:900px){.lx-row>.lx-spot{inset:-14px -18px;border-radius:16px}}
.lx-tilt{transform-style:flat;will-change:transform}

/* ── 按钮与导航：悬停时文字向上翻出，同一文字从下方接上 ── */
.lx-roll{display:inline-grid;overflow:hidden;vertical-align:bottom;margin-block:-.16em}
.lx-roll>span,.lx-roll::after{grid-area:1/1;padding-block:.16em;transition:transform .7s var(--lx-ease)}
.lx-roll::after{content:attr(data-text);transform:translateY(105%)}
@media (hover:hover){
  :is(a,button):hover .lx-roll>span,:is(a,button):focus-visible .lx-roll>span{transform:translateY(-105%)}
  :is(a,button):hover .lx-roll::after,:is(a,button):focus-visible .lx-roll::after{transform:none}
}

/* ── 图片滚动景深：图片在自身画框内缓慢位移 ── */
.lx-par{transform:translate3d(0,var(--lx-py,0%),0) scale(1.1);will-change:transform}

/* ── 长句随阅读逐词点亮 ── */
.lx-scrub .lx-sw{opacity:var(--lx-o,.2);transition:opacity .25s linear}

/* ── 分组内容进入视口时的预备态（仅脚本确认可播放时） ── */
.lx-on .lx-pre{opacity:0}

/* ── 首屏柔光：在已定位的首屏区域内随光标漂移 ── */
.lx-hero-glow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .9s var(--lx-ease)}
.lx-hero-glow::before{content:"";position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent,#888) 22%,transparent),transparent);
  transform:translate3d(var(--lx-gx,50vw),var(--lx-gy,30vh),0);mix-blend-mode:soft-light}
.lx-hero-glow.is-on{opacity:1}

/* ── 动效开关：收拢为圆形玻璃按钮，外圈即阅读进度；悬停时展开文字 ── */
.motion-control{gap:0;padding:0 !important;width:auto;min-width:46px;height:46px;min-height:46px;justify-content:center;border-radius:999px !important;
  border-color:color-mix(in srgb,var(--text,#111) 14%,transparent) !important;
  background:color-mix(in srgb,var(--bg,#fff) 70%,transparent) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 12px 30px -14px color-mix(in srgb,var(--text,#111) 40%,transparent) !important}
.motion-control>svg:not(.lx-ring){flex:none;margin-inline:17px 17px}
.motion-control>span{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width .6s var(--lx-ease),opacity .35s var(--lx-ease),margin .6s var(--lx-ease)}
.motion-control:is(:hover,:focus-visible)>span{max-width:140px;opacity:1;margin-right:18px;margin-left:-6px}
.motion-control .lx-ring{position:absolute;left:-1px;top:-1px;width:46px;height:46px;rotate:-90deg;fill:none;pointer-events:none;overflow:visible;transition:opacity .3s}
.motion-control:is(:hover,:focus-visible) .lx-ring{opacity:0}
.motion-control .lx-ring circle{stroke:var(--accent,#888);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:var(--lx-ring-len,138);stroke-dashoffset:calc(var(--lx-ring-len,138) * (1 - var(--lx-read,0)));transition:stroke-dashoffset .2s linear}

/* ── 细滚动条，随模板色彩 ── */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--lx-accent,#888) 55%,transparent) transparent}

/* ── 手机菜单：展开时链接逐项浮现 ── */
@media (prefers-reduced-motion:no-preference){
  body:not(.motion-paused) .site-header.menu-open .nav-links a{animation:lx-menu-in .7s var(--lx-ease) both}
  body:not(.motion-paused) .site-header.menu-open .nav-links a:nth-child(2){animation-delay:.05s}
  body:not(.motion-paused) .site-header.menu-open .nav-links a:nth-child(3){animation-delay:.1s}
  body:not(.motion-paused) .site-header.menu-open .nav-links a:nth-child(4){animation-delay:.15s}
  body:not(.motion-paused) .site-header.menu-open .nav-links a:nth-child(5){animation-delay:.2s}
}
@keyframes lx-menu-in{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ── 键盘焦点：统一为模板强调色的双层描边 ── */
:is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent,#888);outline-offset:3px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent,#888) 18%,transparent)}

/* 减少动态效果或手动暂停：移除全部 Luxe 位移，内容保持完整 */
@media (prefers-reduced-motion:reduce){
  .lx-roll>span,.lx-roll::after{transition:none;transform:none !important}
  .lx-roll::after{display:none}
  .lx-par{transform:none !important}
  .lx-scrub .lx-sw{opacity:1 !important}
  .lx-hero-glow,.lx-spot{display:none}
}
.motion-paused :is(.lx-roll>span,.lx-roll::after){transform:none !important;transition:none}
.motion-paused .lx-roll::after{display:none}
.motion-paused .lx-par{transform:none !important}
.motion-paused .lx-scrub .lx-sw{opacity:1 !important}
.motion-paused :is(.lx-hero-glow,.lx-spot){display:none}
.motion-paused .lx-tilt{transform:none !important}
@media print{
  html::after,.lx-spot,.lx-hero-glow,.motion-control{display:none !important}
  .lx-on .lx-pre{opacity:1}.lx-scrub .lx-sw{opacity:1 !important}.lx-par{transform:none !important}
}