/* ============================================
   一叶舟 Fursuit - 炫酷增强层 fx-cool.css
   黑白灰专用 · 不引入任何彩色
   依赖 js/fx-cool.js（部分效果）
   ============================================ */

/* ---- 0. 全局质感：噪点颗粒（极低透明度，覆盖全站） ---- */
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}

/* ---- 1. 滚动进度条（顶部黑条） ---- */
#fx-progress{position:fixed;top:0;left:0;height:3px;width:0;background:#000;z-index:10001;pointer-events:none;
  box-shadow:2px 0 6px rgba(0,0,0,.4);transition:width .08s linear}

/* ---- 2. 页面载入淡入 ---- */
@keyframes fxPageIn{from{opacity:0}to{opacity:1}}
body.fx-page-in{animation:fxPageIn .5s ease both}

/* ---- 3. 滚动显现（reveal） ---- */
.fx-reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.22,.9,.32,1),transform .7s cubic-bezier(.22,.9,.32,1)}
.fx-reveal.fx-in{opacity:1}
/* 归位 transform 仅在非悬停时生效——否则会覆盖 comic-fx 的卡片 :hover 歪头 transform */
.fx-reveal.fx-in:not(:hover){transform:none}

/* 容器进入后，内部卡片交错弹入（兼容 JS 动态渲染的卡片） */
@keyframes fxCardIn{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
/* backwards 而非 both：入场动画结束后必须释放 transform，
   否则 forwards 填充的 transform:none 会永远压掉卡片 :hover 歪头和 JS tilt 的内联 transform */
.fx-reveal.fx-in .gallery-card,.fx-reveal.fx-in .service-card{animation:fxCardIn .55s cubic-bezier(.16,1.1,.3,1.05) backwards}
.fx-reveal.fx-in .gallery-card:nth-child(2),.fx-reveal.fx-in .service-card:nth-child(2){animation-delay:.07s}
.fx-reveal.fx-in .gallery-card:nth-child(3),.fx-reveal.fx-in .service-card:nth-child(3){animation-delay:.14s}
.fx-reveal.fx-in .gallery-card:nth-child(4),.fx-reveal.fx-in .service-card:nth-child(4){animation-delay:.21s}
.fx-reveal.fx-in .gallery-card:nth-child(5),.fx-reveal.fx-in .service-card:nth-child(5){animation-delay:.28s}
.fx-reveal.fx-in .gallery-card:nth-child(6),.fx-reveal.fx-in .service-card:nth-child(6){animation-delay:.35s}
.fx-reveal.fx-in .gallery-card:nth-child(n+7),.fx-reveal.fx-in .service-card:nth-child(n+7){animation-delay:.42s}

/* ---- 4. 卡片 3D 悬浮（配合 JS tilt） ---- */
.gallery-card,.service-card{transform-style:preserve-3d;will-change:transform}
.fx-tilting{transition:transform .18s cubic-bezier(.175,.885,.32,1.275)!important;position:relative;z-index:2}
.fx-tilting .card-img div,.fx-tilting .card-img{will-change:transform}
/* tilt 时的内部深度：文字轻微顶出 */
.fx-tilting .card-info{transform:translateZ(18px)}

/* 卡片图片 hover 缩放 */
.gallery-card .card-img{transition:transform .45s cubic-bezier(.22,.9,.32,1),filter .45s}
.gallery-card:hover .card-img{transform:scale(1.06);filter:contrast(1.12) brightness(1.04)}

/* 卡片 hover 时的对角高光扫过 */
.gallery-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,rgba(255,255,255,.35) 52%,transparent 70%);
  transform:translateX(-70%);transition:transform .7s ease,opacity .3s}
.gallery-card:hover::before{opacity:1;transform:translateX(70%)}

/* ---- 5. Hero 区增强 ---- */
/* 背景动态斜向光带扫描（黑白灰） */
@keyframes fxHeroScan{0%{transform:translateX(-30%) skewX(-12deg)}100%{transform:translateX(130%) skewX(-12deg)}}
.hero-banner .hero-bg::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:22%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:fxHeroScan 7s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
/* 透视网格线层 */
.hero-banner::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}

/* 标题 Glitch 抖动（黑白错位，间歇触发） */
.fx-glitch{position:relative}
.fx-glitch::before,.fx-glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0}
.fx-glitch::before{color:#fff;z-index:-1;animation:fxGlitchA 6s steps(1) infinite}
.fx-glitch::after{color:#000;z-index:-2;animation:fxGlitchB 6s steps(1) infinite}
@keyframes fxGlitchA{0%,88.9%,100%{opacity:0;transform:none}
  89%{opacity:.85;transform:translate(-4px,2px)}
  90.5%{opacity:.85;transform:translate(3px,-2px)}
  92%{opacity:.85;transform:translate(-2px,1px)}
  93.5%{opacity:0;transform:none}}
@keyframes fxGlitchB{0%,88.9%,100%{opacity:0;transform:none}
  89%{opacity:.7;transform:translate(4px,-2px)}
  90.5%{opacity:.7;transform:translate(-3px,2px)}
  92%{opacity:.7;transform:translate(2px,-1px)}
  93.5%{opacity:0;transform:none}}

/* 标题条 hover 时阴影抖动加深 */
.hero-title-strip .strip-bg{transition:box-shadow .25s,transform .25s}
.hero-title-strip:hover .strip-bg{box-shadow:10px 10px 0 rgba(0,0,0,.3)}

/* ---- 6. 标题拆字交错弹入（JS 拆分） ---- */
@keyframes fxCharIn{from{opacity:0;transform:translateY(.6em) rotate(4deg) scale(.7)}to{opacity:1;transform:none}}
.fx-char{display:inline-block;white-space:pre;animation:fxCharIn .6s cubic-bezier(.16,1.2,.3,1.05) both}

/* ---- 7. 按钮扫光 ---- */
.fx-shine{position:relative;overflow:hidden}
.fx-shine::after{content:"";position:absolute;top:-60%;left:-90%;width:55%;height:220%;transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none}
@keyframes fxShineMove{0%{left:-90%}55%{left:160%}100%{left:160%}}
.fx-shine:hover::after{animation:fxShineMove .8s ease}
/* 黑底元素上的反白扫光（黑色微光扫过白底按钮） */
.fx-shine-dark::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.18),transparent)}

/* ---- 8. CTA 区动态斜纹背景（黑底慢速流动） ---- */
.cta-section{background-image:repeating-linear-gradient(45deg,#000 0 16px,#111 16px 32px);background-size:46px 46px;
  animation:fxStripeFlow 22s linear infinite}
@keyframes fxStripeFlow{from{background-position:0 0}to{background-position:460px 0}}

/* ---- 9. 光标跟随：已按用户要求移除 ---- */

/* ---- 10. 滚动条 / 选区美化（黑白） ---- */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#f0f0f0;border-left:2px solid #000}
::-webkit-scrollbar-thumb{background:#000;border:2px solid #f0f0f0}
::-webkit-scrollbar-thumb:hover{background:#333}
::selection{background:#000;color:#fff}
::-moz-selection{background:#000;color:#fff}

/* ---- 11. 导航滚动收缩 ---- */
.navbar{transition:height .3s ease,background .3s ease,box-shadow .3s ease}
.navbar.scrolled .nav-inner{height:52px}

/* ---- 12. 页头透视地面线（page-header 底部速度线） ---- */
.page-header{position:relative}
.page-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(0,0,0,.5) 26px 30px);
  -webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}

/* ---- 13. 分隔线滚动发光（黑白） ---- */
.comic-divider{position:relative;overflow:hidden}
.comic-divider::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.9),transparent);
  transform:translateX(-100%);animation:fxDivRun 3.2s ease-in-out infinite}
@keyframes fxDivRun{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---- 降级：减少动态偏好 ---- */
@media (prefers-reduced-motion: reduce){
  .fx-reveal{opacity:1;transform:none;transition:none}
  .fx-reveal.fx-in .gallery-card,.fx-reveal.fx-in .service-card{animation:none}
  .hero-banner .hero-bg::after,.cta-section,.comic-divider::after,
  .fx-glitch::before,.fx-glitch::after,.fx-char{animation:none!important}
  body::after{display:none}
}

/* ---- 移动端：关闭重特效保性能 ---- */
@media (hover:none),(max-width:768px){
  body::after{opacity:.02}
  .hero-banner .hero-bg::after{animation-duration:11s}
  .cta-section{animation-duration:36s}
  .navbar.scrolled .nav-inner{height:64px} /* 移动端不收缩 */
  .fx-reveal{transform:translateY(18px)} /* 移动端位移减半，更轻快 */
}