/* ===== XFeed 首页 v8 A「流光」叠加层：只加视觉和动效，不改内容 ===== */
@property --v8-a{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --v8-e:cubic-bezier(.2,.7,.2,1);
  --v8-blue:#2160E6;--v8-cyan:#22D3EE;--v8-violet:#7C5CFF;
  --v8-grad:linear-gradient(90deg,#2160E6,#22D3EE 52%,#7C5CFF);
  --v8-grad2:linear-gradient(135deg,#2160E6,#7C5CFF 60%,#22D3EE);
  --v8-glass:rgba(255,255,255,.72);
  --v8-aur:1;
  --v8-dot:rgba(60,90,160,.26);
  --v8-rowbg:rgba(33,96,230,.07);
  --v8-pill:rgba(33,96,230,.10);
  --v8-spot:rgba(33,96,230,.10);
  --v8-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px -8px rgba(33,60,140,.16),0 26px 56px -22px rgba(33,60,140,.20);
  --v8-hdr-shadow:0 8px 24px -16px rgba(16,24,40,.20);
  --v8-grain-op:.035;
  --v8-grain-inv:0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --v8-glass:rgba(15,20,32,.72);--v8-aur:.5;--v8-dot:rgba(140,170,230,.22);
    --v8-rowbg:rgba(91,155,240,.10);--v8-pill:rgba(91,155,240,.16);--v8-spot:rgba(91,155,240,.16);
    --v8-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -8px rgba(0,0,0,.6),0 28px 60px -24px rgba(0,0,0,.7);
    --v8-hdr-shadow:0 8px 24px -16px rgba(0,0,0,.6);--v8-grain-op:.05;--v8-grain-inv:1;
  }
}
:root[data-theme="dark"]{
  --v8-glass:rgba(15,20,32,.72);--v8-aur:.5;--v8-dot:rgba(140,170,230,.22);
  --v8-rowbg:rgba(91,155,240,.10);--v8-pill:rgba(91,155,240,.16);--v8-spot:rgba(91,155,240,.16);
  --v8-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -8px rgba(0,0,0,.6),0 28px 60px -24px rgba(0,0,0,.7);
  --v8-hdr-shadow:0 8px 24px -16px rgba(0,0,0,.6);--v8-grain-op:.05;--v8-grain-inv:1;
}

/* ---------- 1. 顶部滚动进度条 ---------- */
.v8-prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:200;pointer-events:none}
.v8-prog i{display:block;height:100%;background:var(--v8-grad);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---------- 2. 顶栏：顶部透明，滚动后毛玻璃 ---------- */
html.v8-hdr .hdr{
  background:rgba(255,255,255,0);
  -webkit-backdrop-filter:blur(0px) saturate(100%);backdrop-filter:blur(0px) saturate(100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0),0 8px 24px -16px rgba(0,0,0,0);
  transition:background-color .3s var(--v8-e),-webkit-backdrop-filter .3s var(--v8-e),backdrop-filter .3s var(--v8-e),box-shadow .3s var(--v8-e);
}
html.v8-hdr .hdr-in{border-bottom-color:transparent}
html.v8-hdr.v8-scrolled .hdr{
  background:var(--v8-glass);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 -1px 0 var(--line),var(--v8-hdr-shadow);
}
@media (prefers-color-scheme:dark){
  html.v8-hdr:not([data-theme="light"]):not(.v8-scrolled) .hdr{background:rgba(15,20,32,0)}
}
html.v8-hdr[data-theme="dark"]:not(.v8-scrolled) .hdr{background:rgba(15,20,32,0)}

/* 导航滑动胶囊 */
.hdr .nav{position:relative}
.hdr .nav a{position:relative;z-index:1}
.v8-pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:8px;background:var(--v8-pill);pointer-events:none;opacity:0;z-index:0;
  transition:transform .45s var(--v8-e),width .45s var(--v8-e),height .45s var(--v8-e),opacity .3s}
.v8-pill.on{opacity:1}
.v8-pill.nt{transition:none}
@media (min-width:1024px){
  .hdr .nav.v8p a,.hdr .nav.v8p a:hover,.hdr .nav.v8p a.on{background:transparent}
  .hdr .nav.v8p.v8-hov a.on:not(:hover){color:var(--fg)}
}

/* ---------- 3. 首屏背景：极光＋颗粒＋点阵 ---------- */
.v8-bg{position:absolute;top:0;left:0;width:100%;height:780px;overflow:hidden;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 52%,transparent);mask-image:linear-gradient(#000 52%,transparent)}
.v8-blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.v8-blob.b1{left:-8vw;top:-230px;width:clamp(280px,46vw,660px);aspect-ratio:1/1;background:#2160E6;opacity:calc(.21*var(--v8-aur));animation:v8-d1 22s ease-in-out infinite alternate}
.v8-blob.b2{right:-8vw;top:-210px;width:clamp(260px,40vw,580px);aspect-ratio:1/1;background:#1FBDF6;opacity:calc(.19*var(--v8-aur));animation:v8-d2 27s ease-in-out infinite alternate}
.v8-blob.b3{left:34vw;top:-70px;width:clamp(240px,34vw,500px);aspect-ratio:1/1;background:#7C5CFF;opacity:calc(.15*var(--v8-aur));animation:v8-d3 30s ease-in-out infinite alternate}
@keyframes v8-d1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,64px,0) scale(1.12)}100%{transform:translate3d(-3vw,22px,0) scale(.94)}}
@keyframes v8-d2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vw,70px,0) scale(.92)}100%{transform:translate3d(3vw,10px,0) scale(1.1)}}
@keyframes v8-d3{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,50px,0) scale(1.15)}100%{transform:translate3d(8vw,-10px,0) scale(.9)}}
.v8-grid{position:absolute;inset:0;background-image:radial-gradient(circle,var(--v8-dot) 1px,transparent 1.5px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 54% 250px at 58% 175px,#000,transparent 74%);mask-image:radial-gradient(ellipse 54% 250px at 58% 175px,#000,transparent 74%)}
.v8-grain{position:absolute;inset:0;opacity:var(--v8-grain-op);filter:invert(var(--v8-grain-inv));
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* 原有点阵和柔光让位给新背景 */
.gm .gm-dots{opacity:0}
.gm .gm-glow{opacity:.55}

/* ---------- 4. 大标题入场 ---------- */
@keyframes v8-rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes v8-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes v8-flow{from{background-position:0 0}to{background-position:200% 0}}
.gm h1 .gm-x,.gm h1 .gm-ai,.gm h1 .v8c{display:inline-block;animation:v8-rise .95s var(--v8-e) backwards;animation-delay:calc(var(--k,0)*60ms + 120ms)}
.gm h1 .gm-x{--k:0}
.gm h1 .gm-ai{--k:1;
  background-image:linear-gradient(100deg,#1F8BFF 0%,#6B5BFF 24%,#22D3EE 50%,#7C5CFF 76%,#1F8BFF 100%);
  background-size:200% 100%;background-repeat:repeat-x;
  animation:v8-rise .95s var(--v8-e) backwards,v8-flow 6s linear infinite;
  animation-delay:calc(var(--k,0)*60ms + 120ms),0s}
.gm .gm-sub{animation:v8-fade .9s var(--v8-e) backwards;animation-delay:.52s}
.gm .gm-strip{animation:v8-fade .9s var(--v8-e) backwards;animation-delay:.68s}

/* ---------- 5. Logo 墙 ---------- */
@media (min-width:768px){
  .gm .gwall{padding:20px 0 24px;margin-top:-14px;margin-bottom:-14px}
}
.gm .gwall{perspective:1000px}
.gm .grow{overflow:visible}
.v8-tilt{display:flex;flex-direction:column;gap:var(--rg);width:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.v8-tilt .grow.r1{transform:translate3d(calc(var(--px,0)*-4px),0,-40px)}
.v8-tilt .grow.r2{transform:translate3d(calc(var(--px,0)*-12px),0,0)}
.v8-tilt .grow.r3{transform:translate3d(calc(var(--px,0)*-22px),0,40px)}
.gm .gt{position:relative;isolation:isolate;transition:opacity .35s var(--v8-e),transform .45s var(--v8-e);
  animation:v8-float var(--fd,7s) ease-in-out var(--fp,0s) infinite alternate}
.gm .gt::before{content:"";position:absolute;inset:-16px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(33,96,230,.36),rgba(34,211,238,.14) 60%,transparent);opacity:0;transition:opacity .35s var(--v8-e)}
.gm .gt:nth-child(7n+1){--fd:6s;--fp:-.5s}
.gm .gt:nth-child(7n+2){--fd:7.2s;--fp:-2.1s}
.gm .gt:nth-child(7n+3){--fd:8.4s;--fp:-3.3s}
.gm .gt:nth-child(7n+4){--fd:6.6s;--fp:-4.6s}
.gm .gt:nth-child(7n+5){--fd:9s;--fp:-1.7s}
.gm .gt:nth-child(7n+6){--fd:7.8s;--fp:-5.2s}
.gm .gt:nth-child(7n+7){--fd:6.9s;--fp:-2.8s}
@keyframes v8-float{from{translate:0 -4px}to{translate:0 4px}}
@keyframes v8-pop{from{opacity:0;transform:scale(.6)}to{opacity:.9;transform:scale(1)}}
.gm .gt.v8-pop{
  animation-name:v8-pop,v8-float;
  animation-duration:.85s,var(--fd,7s);
  animation-timing-function:cubic-bezier(.34,1.56,.64,1),ease-in-out;
  animation-delay:calc(var(--dl,0)*1ms + 320ms),var(--fp,0s);
  animation-iteration-count:1,infinite;
  animation-direction:normal,alternate;
  animation-fill-mode:backwards,none;
}
@media (hover:hover){
  .gm .gt:hover{opacity:1;transform:scale(1.18)}
  .gm .gt:hover::before{opacity:1}
}
html.v8-pause .gm .gt,html.v8-pause .v8-blob,html.v8-pause .gm h1 .gm-ai,html.v8-pause .gm .gtrack{animation-play-state:paused}

/* ---------- 6. 栏目标题：擦出＋渐变短线 ---------- */
/* 11-09 起内页的栏目标题也走这套 */
:is(.sec-h,.qa-grp-h,.tp3-h,.kp-h,.tp-list-h) h2{position:relative;clip-path:inset(-6px -6px -16px 0);transition:clip-path .85s var(--v8-e)}
:is(.sec-h,.qa-grp-h,.tp3-h,.kp-h,.tp-list-h) h2::after{content:"";position:absolute;left:0;bottom:-6px;width:28px;height:3px;border-radius:3px;background:var(--v8-grad);
  transform-origin:0 50%;transition:transform .6s var(--v8-e) .35s}
html.v8-js :is(.sec-h,.qa-grp-h,.tp3-h,.kp-h,.tp-list-h) h2:not(.v8-in){clip-path:inset(-6px 100% -16px 0)}
html.v8-js :is(.sec-h,.qa-grp-h,.tp3-h,.kp-h,.tp-list-h) h2:not(.v8-in)::after{transform:scaleX(0)}

/* 内页卡片（教程、工具、专题、问答）滚动浮现 */
html.v8-js .v8-rv:not(.v8-in){opacity:0;translate:0 20px}
html.v8-js .v8-rv.v8-in{opacity:1;translate:0 0;transition:opacity .6s var(--v8-e),translate .6s var(--v8-e),transform .35s var(--v8-e),box-shadow .35s var(--v8-e),border-color .35s;transition-delay:calc(var(--i,0)*60ms),calc(var(--i,0)*60ms),0s,0s,0s}

/* ---------- 7. 推文列表 ---------- */
html.v8-js .item:not(.v8-in){opacity:0;translate:0 16px}
html.v8-js .item.v8-in{opacity:1;translate:0 0;transition:opacity .48s var(--v8-e),translate .48s var(--v8-e);transition-delay:calc(var(--i,0)*50ms)}
.row{transition:transform .35s var(--v8-e)}
.row::before{inset:-4px -14px;border-radius:16px;z-index:-1;box-shadow:var(--v8-shadow);transition:opacity .3s var(--v8-e);
  background:radial-gradient(280px circle at calc(var(--mx,50%) + 14px) calc(var(--my,50%) + 4px),var(--v8-spot),transparent 68%),var(--card)}
.item .sep{transition:opacity .3s var(--v8-e)}
@media (hover:hover){
  .gl .row:hover{transform:translateY(-2px)}
  .item:hover .sep{opacity:0}
}
/* 「X 原帖」按钮 */
.row a.xo.xo{overflow:hidden;background-color:var(--soft);background-image:linear-gradient(120deg,rgba(33,96,230,.16),rgba(34,211,238,.16));
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
  transition:background-size .5s var(--v8-e),color .2s}
@keyframes v8-arrow{
  0%{transform:translate(0,0);opacity:1}
  42%{transform:translate(11px,-11px);opacity:0}
  43%{transform:translate(-11px,11px);opacity:0}
  100%{transform:translate(0,0);opacity:1}
}
@media (hover:hover){
  .row a.xo.xo:hover{background-color:var(--soft);background-size:100% 100%}
  .row a.xo.xo:hover .xa{animation:v8-arrow .6s var(--v8-e);transform:none;opacity:1}
}

/* ---------- 8. 「我是」身份胶囊 ---------- */
.rbar .rb-c{position:relative;overflow:hidden;transition:transform .3s var(--v8-e),background-color .2s,color .2s,border-color .2s,box-shadow .3s var(--v8-e)}
@media (hover:hover){
  .rbar .rb-c:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(33,60,140,.35)}
}
.rbar .rb-c[aria-pressed="true"]{
  border:1.5px solid transparent;color:var(--hl);font-weight:600;
  background:
    linear-gradient(135deg,rgba(33,96,230,.12),rgba(124,92,255,.12) 55%,rgba(34,211,238,.12)) padding-box,
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(135deg,#2160E6,#7C5CFF 55%,#22D3EE) border-box;
}
.rbar .rb-c[aria-pressed="true"]::before{color:var(--p)}
.v8-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(33,96,230,.30);transform:scale(0);opacity:.7;animation:v8-rip .65s var(--v8-e) forwards}
@keyframes v8-rip{to{transform:scale(1);opacity:0}}

/* ---------- 9. 按模型看页签 ---------- */
#mpane{position:relative}
.mtabs{position:relative}
.v8-ink{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:var(--v8-grad);pointer-events:none;
  transition:transform .45s var(--v8-e),width .45s var(--v8-e)}
.v8-ink.nt{transition:none}
html.v8-ink-on .mtab[aria-selected="true"]{border-bottom-color:transparent}
.v8-ghost{position:absolute;pointer-events:none;animation:v8-out .26s var(--v8-e) forwards}
@keyframes v8-out{to{opacity:0;transform:translateY(-4px)}}

/* ---------- 10. 教程卡 ---------- */
html.v8-js .acard:not(.v8-in){opacity:0;translate:0 20px}
html.v8-js .acard.v8-in{opacity:1;translate:0 0}
.agrid .acard{transition:opacity .6s var(--v8-e),translate .6s var(--v8-e),transform .4s var(--v8-e),border-color .15s;
  transition-delay:calc(var(--i,0)*70ms),calc(var(--i,0)*70ms),0s,0s}
.a-cv::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s var(--v8-e);
  background:linear-gradient(105deg,transparent calc(var(--hx,50%) - 22%),rgba(255,255,255,.34) var(--hx,50%),transparent calc(var(--hx,50%) + 22%))}
.a-cv img{transition:transform .8s var(--v8-e)}
@media (hover:hover){
  .agrid .acard:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-3px)}
  .agrid .acard:hover .a-cv img{transform:scale(1.06)}
  .agrid .acard:hover .a-cv::after{opacity:1}
}

/* ---------- 11. 右栏卡片 ---------- */
@media (min-width:1024px){
  .hm-side .sec{position:relative;border-color:transparent}
  .hm-side .sec::before{content:"";position:absolute;inset:-1px;border-radius:14px;padding:1px;pointer-events:none;
    background:linear-gradient(160deg,rgba(33,96,230,.30),rgba(33,96,230,.07) 38%,rgba(124,92,255,.07) 62%,rgba(34,211,238,.28));
    -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)}
}
.hm-side .qa-home a,.hm-side .tl-row{position:relative;isolation:isolate}
.hm-side .qa-home a::after{content:"";position:absolute;inset:1px -12px 0;border-radius:8px;background:var(--v8-rowbg);opacity:0;z-index:-1;transition:opacity .3s var(--v8-e)}
.hm-side .qa-home a::before,.hm-side .tl-row::before{content:"";position:absolute;top:22%;bottom:22%;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#2160E6,#7C5CFF 60%,#22D3EE);opacity:0;transform:translateX(-8px);transition:transform .35s var(--v8-e),opacity .3s var(--v8-e)}
.hm-side .qa-home a::before{left:-12px}
.hm-side .tl-row::before{left:0}
.hm-side .tl-row{transition:background-color .3s var(--v8-e)}
@media (hover:hover){
  .hm-side .qa-home a:hover::after{opacity:1}
  .hm-side .qa-home a:hover::before,.hm-side .tl-row:hover::before{opacity:1;transform:none}
  .hm-side .tl-row:hover{background:var(--v8-rowbg)}
  .hm-side .hub-t:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(33,60,140,.35)}
}
.hm-side .hub-t{transition:border-color .15s,background-color .15s,transform .3s var(--v8-e),box-shadow .3s var(--v8-e)}
.tl-rk.top{background:linear-gradient(135deg,#2160E6,#7C5CFF 70%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tl-home li:nth-child(2) .tl-rk.top{background-image:linear-gradient(135deg,#2160E6,#22D3EE)}
.tl-home li:nth-child(3) .tl-rk.top{background-image:linear-gradient(135deg,#7C5CFF,#22D3EE)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tl-rk.top{background-image:linear-gradient(135deg,#8DB6F4,#A99BFF 70%)}
  :root:not([data-theme="light"]) .tl-home li:nth-child(2) .tl-rk.top{background-image:linear-gradient(135deg,#8DB6F4,#67E3F7)}
  :root:not([data-theme="light"]) .tl-home li:nth-child(3) .tl-rk.top{background-image:linear-gradient(135deg,#A99BFF,#67E3F7)}
}
:root[data-theme="dark"] .tl-rk.top{background-image:linear-gradient(135deg,#8DB6F4,#A99BFF 70%)}
:root[data-theme="dark"] .tl-home li:nth-child(2) .tl-rk.top{background-image:linear-gradient(135deg,#8DB6F4,#67E3F7)}
:root[data-theme="dark"] .tl-home li:nth-child(3) .tl-rk.top{background-image:linear-gradient(135deg,#A99BFF,#67E3F7)}

/* ---------- 12. 页脚订阅卡：流动渐变边框 ---------- */
.gfoot .xfa-card{position:relative;border:1.5px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--v8-a),#2160E6,#22D3EE,#7C5CFF,#2160E6) border-box;
  animation:v8-spin 7s linear infinite}
@keyframes v8-spin{to{--v8-a:360deg}}
.gfoot.v8-off .xfa-card{animation-play-state:paused}

/* ---------- 13. English 提示条：弹簧升起 ---------- */
@keyframes v8-spring{from{opacity:0;transform:translate(-50%,46px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.lang-hint{animation:v8-spring .95s cubic-bezier(.34,1.56,.64,1) .5s backwards}

/* ---------- 手机：降级 ---------- */
@media (max-width:767px){
  .v8-blob{filter:blur(70px)}
  .v8-bg{height:620px}
  .v8-grid{-webkit-mask-image:radial-gradient(ellipse 90% 200px at 50% 150px,#000,transparent 74%);mask-image:radial-gradient(ellipse 90% 200px at 50% 150px,#000,transparent 74%)}
}

/* ---------- 减少动效：全部关掉，内容直接可见 ---------- */
@media (prefers-reduced-motion:reduce){
  .v8-blob,.gm .gt,.gm .gt.v8-pop,.gm h1 .gm-x,.gm h1 .gm-ai,.gm h1 .v8c,.gm .gm-sub,.gm .gm-strip,.gm .gtrack,.lang-hint,.gfoot .xfa-card,.v8-ghost,.row a.xo.xo .xa{animation:none!important}
  .gm h1 .gm-ai{background-size:100% 100%}
  .v8-pill,.v8-ink,.hdr,.sec-h h2,.sec-h h2::after,.v8-rv,.item,.acard,.row,.row::before,.a-cv img,.a-cv::after,.gm .gt,.gm .gt::before,.rbar .rb-c,.hm-side *{transition:none!important}
  .v8-tilt{transform:none!important}
  .v8-tilt .grow{transform:none!important}
  .agrid .acard:hover,.gl .row:hover,.gm .gt:hover{transform:none}
}