@charset "UTF-8";
/* 屏幕内外 · 动态与交互增强层
   仅使用外部样式表（CSP style-src 'self'），全部动效在 reduced-motion 下自动关闭。 */

/* ---------- 顶部阅读进度 ---------- */
.fx-progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:90;pointer-events:none}
.fx-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#c7fc8c,#83a8ff);box-shadow:0 0 16px rgba(199,252,140,.5)}

/* ---------- 首屏：文字逐行揭幕 ---------- */
.fx-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;padding-top:.04em;margin-top:-.04em}
.fx-line-inner{display:inline-block;will-change:transform}
html.fx-armed .fx-line-inner{opacity:0;transform:translate3d(0,110%,0)}
html.fx-armed .fx-lines-in .fx-line-inner{opacity:1;transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s ease;transition-delay:var(--fx-d,0s)}

/* 首屏其余元素依次入场 */
html.fx-armed .hero .eyebrow,
html.fx-armed .hero-prelude,
html.fx-armed .hero-description,
html.fx-armed .hero-actions,
html.fx-armed .hero-bottom{opacity:0}
html.fx-armed.fx-ready .hero .eyebrow,
html.fx-armed.fx-ready .hero-prelude,
html.fx-armed.fx-ready .hero-description,
html.fx-armed.fx-ready .hero-actions,
html.fx-armed.fx-ready .hero-bottom{animation:fx-fade-up .95s cubic-bezier(.16,1,.3,1) both}
html.fx-armed.fx-ready .hero .eyebrow{animation-delay:.05s}
html.fx-armed.fx-ready .hero-prelude{animation-delay:.2s}
html.fx-armed.fx-ready .hero h1{animation:none}
html.fx-armed.fx-ready .hero-description{animation-delay:.62s}
html.fx-armed.fx-ready .hero-actions{animation-delay:.74s}
html.fx-armed.fx-ready .hero-bottom{animation-delay:.9s}

@keyframes fx-fade-up{
  from{opacity:0;transform:translate3d(0,26px,0);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* ---------- 滚动进入 ---------- */
html.fx-armed .fx-io{opacity:0}
html.fx-armed .fx-io.is-visible{animation:fx-fade-up .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--fx-i,0) * 70ms)}
html.fx-armed .fx-row{opacity:0}
html.fx-armed .fx-row.is-visible{animation:fx-row-in .75s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--fx-i,0) * 55ms)}
@keyframes fx-row-in{
  from{opacity:0;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:none}
}

/* ---------- 星球背景：粒子星图与指针视差 ---------- */
.fx-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:.9;mix-blend-mode:screen;pointer-events:none}
.fx-spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .7s ease;
  background:radial-gradient(380px circle at var(--fx-sx,50%) var(--fx-sy,42%),rgba(131,168,255,.14),rgba(199,252,140,.06) 46%,transparent 72%)}
.hero:hover .fx-spotlight,.hero:focus-within .fx-spotlight{opacity:1}
.hero{--fx-mx:0;--fx-my:0}
.hero-art{transform:translate3d(calc(var(--fx-mx) * 12px),calc(var(--fx-my) * 9px),0);transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}
.hero-copy{transform:translate3d(calc(var(--fx-mx) * -5px),calc(var(--fx-my) * -4px),0);transition:transform .8s cubic-bezier(.16,1,.3,1)}

/* 标题里那个浅色词：缓慢流光 */
.outline-word{background:linear-gradient(100deg,#a7b1c0 20%,#e8f6d9 42%,#a7b1c0 62%,#9fb2d8 84%,#a7b1c0 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fx-shimmer 9s linear infinite}
@keyframes fx-shimmer{from{background-position:0% 50%}to{background-position:240% 50%}}

/* ---------- 横向标语可循环滚动 ---------- */
.thought-strip{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:0;padding:0;white-space:nowrap}
.fx-marquee-track{display:flex;flex:0 0 auto;align-items:stretch;animation:fx-marquee calc(var(--fx-copies,2) * 20s) linear infinite;will-change:transform}
.fx-marquee-seg{display:flex;align-items:center;gap:40px;flex:0 0 auto;padding:25px 3%}
.thought-strip:hover .fx-marquee-track,.thought-strip:focus-within .fx-marquee-track{animation-play-state:paused}
@keyframes fx-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-100% / var(--fx-copies,2)),0,0)}}

/* ---------- 文章行的跟随光斑 ---------- */
.article-row:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--fx-hx,50%) var(--fx-hy,50%),rgba(199,252,140,.10),transparent 72%)}
.article-row:hover:before,.article-row:focus-visible:before{opacity:1}
.article-row>*{position:relative;z-index:1}

/* ---------- 自定义光标（仅精确指针设备） ---------- */
.fx-cursor,.fx-cursor-dot{position:fixed;left:0;top:0;z-index:95;pointer-events:none;opacity:0;will-change:transform}
.fx-cursor{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(199,252,140,.55);border-radius:50%;transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),margin .28s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s,opacity .3s}
.fx-cursor.is-hot{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:rgba(199,252,140,.95);background:rgba(199,252,140,.07)}
.fx-cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#c7fc8c;box-shadow:0 0 12px rgba(199,252,140,.85);transition:opacity .3s}
body.fx-pointer .fx-cursor,body.fx-pointer .fx-cursor-dot{opacity:1}

/* ---------- 点击涟漪 ---------- */
.fx-rip{position:relative;overflow:hidden;isolation:isolate}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(199,252,140,.42),rgba(199,252,140,0) 70%);transform:translate(-50%,-50%) scale(0);animation:fx-ripple .7s ease-out forwards}
@keyframes fx-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- 触点反馈（手机） ---------- */
@media (hover:none){
  .button:active,.filter:active,.article-row:active,.admin-link:active{transform:scale(.985)}
  .fx-spotlight{display:none}
  .hero-art,.hero-copy{transform:none!important}
}

/* ---------- 小屏适配 ---------- */
@media (max-width:700px){
  .hero{min-height:auto;padding-bottom:6px}
  .hero-bottom{margin-top:84px}
  .fx-canvas{opacity:.62}
  .fx-progress span{box-shadow:none}
  .fx-marquee-seg{gap:28px;padding:19px 7%}
}
@media (max-width:420px){
  .hero h1{font-size:clamp(40px,11.6vw,56px);letter-spacing:-1.6px}
  .hero-description{max-width:88%}
  .planet{width:270px;height:270px}
  .fx-marquee-seg{gap:22px}
}
@media (min-width:1600px){
  .fx-marquee-seg{gap:56px}
}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion:reduce){
  html.fx-armed .fx-io,
  html.fx-armed .fx-row,
  html.fx-armed .fx-line-inner,
  html.fx-armed .hero .eyebrow,
  html.fx-armed .hero-prelude,
  html.fx-armed .hero-description,
  html.fx-armed .hero-actions,
  html.fx-armed .hero-bottom{opacity:1!important;transform:none!important;animation:none!important;filter:none!important}
  .fx-marquee-track{animation:none!important}
  .outline-word{animation:none!important;-webkit-text-fill-color:currentColor;background:none}
  .fx-cursor,.fx-cursor-dot,.fx-spotlight,.fx-canvas{display:none!important}
  .hero-art,.hero-copy{transform:none!important}
  html{scroll-behavior:auto}
}

/* ---------- 星球、卫星与光束的缓慢呼吸 ---------- */
.planet{animation:fx-planet-float 15s ease-in-out infinite alternate}
@keyframes fx-planet-float{
  from{transform:rotate(-25deg) translate3d(0,0,0)}
  to{transform:rotate(-25deg) translate3d(0,-16px,0)}
}
.orbit-one:after{animation:fx-satellite 4.2s ease-in-out infinite alternate}
@keyframes fx-satellite{
  from{box-shadow:0 0 14px 2px rgba(143,174,255,.35)}
  to{box-shadow:0 0 26px 7px rgba(196,222,255,.75)}
}
.light-line{animation:fx-beam 7.5s ease-in-out infinite alternate}
@keyframes fx-beam{from{opacity:.35}to{opacity:1}}
.star-field{will-change:opacity}

/* ---------- 导航当前所在位置 ---------- */
.main-nav a.is-active{color:var(--accent)}
.main-nav a.is-active span{color:var(--accent);opacity:.7}
.main-nav a{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 calc(100% + 2px);background-size:0% 1px;transition:color .2s,background-size .4s cubic-bezier(.16,1,.3,1)}
.main-nav a.is-active{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .planet,.orbit-one:after,.light-line,.star-field{animation:none!important}
}

/* ---------- 回到顶部（带阅读进度环） ---------- */
.fx-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(199,252,140,.28);background:rgba(10,14,22,.78);backdrop-filter:blur(10px);color:var(--accent);font-size:15px;line-height:1;display:grid;place-items:center;z-index:88;opacity:0;transform:translate3d(0,14px,0);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s}
.fx-top.is-on{opacity:1;transform:none;pointer-events:auto}
.fx-top:hover{border-color:rgba(199,252,140,.8);background:rgba(199,252,140,.12)}
.fx-top:before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;background:conic-gradient(var(--accent) calc(var(--fx-read,0) * 360deg),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
.fx-top span{position:relative;top:-1px}
@media (max-width:700px){.fx-top{right:16px;bottom:16px;width:42px;height:42px}}
@media (prefers-reduced-motion:reduce){.fx-top{transition:none}}

/* ---------- 刘海屏 / 安全区域 ---------- */
@supports (padding: env(safe-area-inset-left)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .fx-top{bottom:calc(22px + env(safe-area-inset-bottom))}
}
@media (max-width:700px){
  @supports (padding: env(safe-area-inset-bottom)){
    .fx-top{bottom:calc(16px + env(safe-area-inset-bottom))}
  }
}