/* =====================================================================
   effects.css — 动态交互叠加层（不改版式 / 不覆盖现有布局样式）
   仅新增类、keyframes 与 fixed overlay；复用 styles.css 的设计令牌。
   ===================================================================== */
:root{
  /* spatial rhythm: every entrance shares the same origin */
  --fx-shift-x:-10px;
  --fx-shift-y:16px;
  --fx-stagger:80ms;

  /* easing family */
  --fx-ease:cubic-bezier(.22,.61,.36,1);
  --fx-ease-out:cubic-bezier(.16,1,.3,1);
  --fx-ease-linear:linear;

  /* timing layers: hover < transition < reveal < ambient */
  --fx-duration-instant:.12s;  /* progress bar */
  --fx-duration-fast:.2s;      /* hovers, buttons, focus */
  --fx-duration-base:.35s;     /* reveals, transitions, lightbox */
  --fx-duration-slow:.7s;      /* large reveals, hero transitions */
  --fx-duration-ambient:5s;    /* silk sweep */
  --fx-duration-marquee:30s;   /* partners loop */
}

/* ---------- 首页痛点钩子（叠加，复用 token，不占新增 flex 子项） ---------- */
.intro-hook{margin-top:14px;font-size:16px;line-height:1.7;color:var(--ink);font-weight:600;border-left:3px solid var(--blue);padding-left:14px}
.intro-hook small{display:block;margin-top:6px;font-size:12px;font-weight:400;color:var(--muted);letter-spacing:.3px}

/* ---------- 二级页模块标题链接（人物名等可跳转） ---------- */
.module-title-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--fx-duration-fast) var(--fx-ease),color var(--fx-duration-fast) var(--fx-ease);cursor:pointer;}
.module-title-link:hover,.module-title-link:focus{color:var(--blue);border-bottom-color:var(--blue);}

/* ---------- 全局排版：避免末行孤字/寡行 ---------- */
p{text-wrap:balance;}
@supports (text-wrap:pretty){p{text-wrap:pretty;}}

/* ---------- 阅读进度条 ---------- */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  box-shadow:0 0 8px rgba(61,147,230,.6);
  transition:width var(--fx-duration-instant) var(--fx-ease-linear);will-change:width;pointer-events:none;}

/* ---------- 页眉蓝色丝线波动（从左向右、可持续、无缝循环） ---------- */
.fx-silk-thread{position:absolute;top:0;left:0;width:100%;height:22px;overflow:hidden;z-index:41;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);}
.fx-silk-thread svg{position:absolute;top:0;left:0;height:100%;width:100%;display:block;}
.fx-silk-thread__base{stroke:rgba(19,104,215,.26);stroke-width:2.2;stroke-linecap:round;}
.fx-silk-thread__light{transform:translateX(0);animation:fx-silk-sweep var(--fx-duration-ambient) var(--fx-ease-linear) infinite;will-change:transform}
@keyframes fx-silk-sweep{from{transform:translateX(0)}to{transform:translateX(1500px)}}
@media(prefers-reduced-motion:reduce){.fx-silk-thread__light{animation:none}}

/* ---------- 首屏 loader ---------- */
.fx-loader{position:fixed;inset:0;z-index:10000;
  background:radial-gradient(130% 130% at 50% 28%,#0b2a55 0%,var(--deep) 72%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity var(--fx-duration-base) var(--fx-ease),visibility var(--fx-duration-base) var(--fx-ease);
  animation:fx-loader-failsafe 0s linear 1.2s forwards;}
.fx-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.fx-loader__logo{width:56px;height:56px;border-radius:50%;
  border:3px solid rgba(255,255,255,.22);border-top-color:var(--sky);
  animation:fx-spin 1s linear infinite;}
.fx-loader__text{color:#bcd6f2;font-size:11px;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;}
@keyframes fx-spin{to{transform:rotate(360deg);}}
@keyframes fx-loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}

/* ---------- 灯箱 ---------- */
.fx-lightbox{position:fixed;inset:0;z-index:10001;
  background:rgba(6,24,48,.94);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity var(--fx-duration-fast) var(--fx-ease),visibility var(--fx-duration-fast) var(--fx-ease);pointer-events:none;}
.fx-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto;}
.fx-lightbox__img{max-width:92vw;max-height:86vh;border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);transform:scale(.96);
  transition:transform var(--fx-duration-base) var(--fx-ease);}
.fx-lightbox.is-open .fx-lightbox__img{transform:scale(1);}
.fx-lightbox__btn{position:absolute;width:46px;height:46px;border:none;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background var(--fx-duration-fast) var(--fx-ease),transform var(--fx-duration-fast) var(--fx-ease);}
.fx-lightbox__btn:hover{background:rgba(255,255,255,.26);transform:scale(1.08);}
.fx-lightbox__close{top:18px;right:20px;}
.fx-lightbox__prev{left:18px;top:50%;transform:translateY(-50%);}
.fx-lightbox__next{right:18px;top:50%;transform:translateY(-50%);}
.fx-lightbox__prev:hover,.fx-lightbox__next:hover{transform:translateY(-50%) scale(1.08);}
.fx-lightbox__caption{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#cfe2f7;font-size:13px;letter-spacing:.04em;}

/* ---------- 按钮涟漪 ---------- */
.fx-ripple{position:relative;overflow:hidden;}
.fx-ripple__circle{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);
  transform:translate(-50%,-50%) scale(0);animation:fx-ripple var(--fx-duration-slow) var(--fx-ease-out) forwards;pointer-events:none;}
@keyframes fx-ripple{to{transform:translate(-50%,-50%) scale(2.6);opacity:0;}}

/* 能力标签点击增强：涟漪延长 + 卡片上浮回弹（仅交互层，不改版式/配色） */
.cap-tab .fx-ripple__circle{background:rgba(8,40,79,.22);animation:fx-ripple 1.4s var(--fx-ease-out) forwards;}
.cap-tab.is-pressing{animation:cap-press .6s var(--fx-ease);}
@keyframes cap-press{0%{transform:translateY(0)}25%{transform:translateY(-7px)}55%{transform:translateY(-7px)}100%{transform:translateY(0)}}

/* ---------- 页面切换幕布 ---------- */
.fx-curtain{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:linear-gradient(135deg,var(--navy),var(--deep));
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--fx-duration-base) var(--fx-ease);}
.fx-curtain.is-active{transform:scaleY(1);}

/* 锚点偏移由 styles.css 的 scroll-padding-top 统一处理（160px / 72px），此处不覆盖 */

/* ---------- 悬停增强（复用令牌，仅加细节，不改结构） ---------- */
.case-card,.module-item,.wardrobe-card,.metric,.intro-pillars article{
  transition:transform var(--fx-duration-fast) var(--fx-ease),box-shadow var(--fx-duration-fast) var(--fx-ease);}
.case-card:hover,.module-item:hover,.wardrobe-card:hover{
  transform:translateY(-6px);box-shadow:0 18px 42px rgba(8,40,79,.16);}
.outline-btn,.submit-btn,.footer-inquiry,.hero-secondary-link{
  transition:transform var(--fx-duration-fast) var(--fx-ease),box-shadow var(--fx-duration-fast) var(--fx-ease),background var(--fx-duration-fast) var(--fx-ease),color var(--fx-duration-fast) var(--fx-ease);}

/* ---------- 阶梯式 reveal（fx-enhanced 后启用初态，避免脚本失败时内容不可见 / 首屏闪烁） ---------- */
.fx-enhanced .reveal>*,
.fx-enhanced .intro-pillars>*,
.fx-enhanced .metric-grid>*,
.fx-enhanced .case-grid>*,
.fx-enhanced .product-strip>*,
.fx-enhanced .footer-main>*,
.fx-enhanced .module-list>*,
.fx-enhanced .page-stats>*,
.fx-enhanced .wardrobe-grid>*,
.fx-enhanced .cap-tabs>*{
  opacity:0;transform:translateY(var(--fx-shift-y)) translateX(var(--fx-shift-x));
  transition:opacity var(--fx-duration-slow) var(--fx-ease-out),transform var(--fx-duration-slow) var(--fx-ease-out);
  transition-delay:calc(var(--i,0)*var(--fx-stagger));}
.fx-enhanced .reveal.is-visible>*,
.fx-enhanced .is-in>*{opacity:1;transform:none;}

/* ---------- 丝线流动式下划线：导航 / 页脚 / 文本链接共享同一交互语言 ---------- */
.main-nav a,.footer-nav a,.footer-contact a,.footer-inquiry,.text-link{position:relative;}
.main-nav a::after,.footer-nav a::after,.footer-contact a::after,.footer-inquiry::after,.text-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--sky));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--fx-duration-fast) var(--fx-ease-out);
  pointer-events:none;border-radius:1px;}
.main-nav a:hover::after,.main-nav a:focus-visible::after,.main-nav a.is-active::after,
.footer-nav a:hover::after,.footer-nav a:focus-visible::after,
.footer-contact a:hover::after,.footer-contact a:focus-visible::after,
.footer-inquiry:hover::after,.footer-inquiry:focus-visible::after,
.text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1);}

/* ---------- 产品主图平滑切换 ---------- */
.wardrobe-main{transition:opacity var(--fx-duration-base) var(--fx-ease);}

/* ---------- 移动端菜单展开动效（复用现有 .is-open，不改开关逻辑） ---------- */
@keyframes fx-menu-in{from{opacity:0;transform:translateY(calc(var(--fx-shift-y)*-.6))}to{opacity:1;transform:none}}
@media(max-width:760px){.main-nav.is-open .shell{animation:fx-menu-in var(--fx-duration-base) var(--fx-ease);}}

/* ---------- 减弱动效偏好：全部关闭 ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-loader{display:none!important;}
  .fx-progress{display:none!important;}
  .fx-ripple__circle{animation:none;display:none;}
  .cap-tab.is-pressing{animation:none!important;}
  .fx-lightbox__btn,.case-card,.module-item,.wardrobe-card,.outline-btn,.submit-btn,.footer-inquiry,.hero-secondary-link{transition:none!important;}
  .main-nav.is-open .shell{animation:none!important;}
  .fx-enhanced .reveal>*,.fx-enhanced .intro-pillars>*,.fx-enhanced .metric-grid>*,.fx-enhanced .case-grid>*,
  .fx-enhanced .product-strip>*,.fx-enhanced .footer-main>*,.fx-enhanced .module-list>*,.fx-enhanced .page-stats>*,
  .fx-enhanced .wardrobe-grid>*,.fx-enhanced .cap-tabs>*{opacity:1!important;transform:none!important;transition:none!important;}
  .fx-curtain{display:none!important;}
  .fx-silk-thread{display:none!important;}
}