/* ============================================================
   effects.css — 动态特效系统（Design-System 合规）
   · 自动幻灯片 / 自动大图切换（Hero Slider + Auto Big Image）
   · 文字动态特效（打字机 / 滚动入场淡入上移 / 数字滚动计数）
   · 鼠标动态特效（自定义光标 / 鼠标视差 / 卡片悬浮光晕）
   · 图片动态特效（视差滚动 / 缩放揭示 / 粒子光斑背景）
   所有特效尊重 prefers-reduced-motion，颜色/间距复用 tokens.css。
   ============================================================ */

/* ---------- 1. 自动幻灯片 Hero Slider ---------- */
.hero-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-on-primary);
  min-height: 420px;
}
.hero-slider__track {
  display: flex;
  width: 100%;
  transition: transform 800ms cubic-bezier(.65,.05,.36,1);
  will-change: transform;
}
.hero-slider__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 560px;
  padding: var(--sp-12) var(--sp-10);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}
/* 幻灯片整图全屏宽度背景：绝对定位铺满 slide，文字叠加其上 */
.hero-slider__slide .slide-visual {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 0; border: none; background-color: transparent;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-slider__slide .slide-visual svg { width:62%; height:62%; opacity:.92; }
/* 暗色渐变遮罩（左深右浅，文字居左），保证文字可读且图片作背景 */
.hero-slider__slide::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,22,38,.82) 0%, rgba(8,22,38,.5) 48%, rgba(8,22,38,.16) 100%);
}
.hero-slider__slide > div:first-child { position: relative; z-index: 2; max-width: 720px; }
.hero-slider__slide .slide-eyebrow {
  font-size: var(--fs-12); letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-200); margin-bottom: var(--sp-3); font-weight: var(--fw-500);
}
.hero-slider__slide h1, .hero-slider__slide .slide-title {
  font-size: clamp(28px, 3.4vw, 44px); line-height: var(--lh-tight);
  font-weight: var(--fw-700); margin: 0 0 var(--sp-4); color:#fff;
}
.hero-slider__slide .slide-desc {
  font-size: var(--fs-15); line-height: var(--lh-relaxed); color: rgba(255,255,255,.86);
  margin: 0 0 var(--sp-6); max-width: 560px;
}
.hero-slider__slide .slide-stats { display:flex; gap: var(--sp-6); flex-wrap:wrap; margin-bottom: var(--sp-6); }
.hero-slider__slide .slide-stats b { display:block; font-size: var(--fs-24); font-weight: var(--fw-700); color:#fff; }
.hero-slider__slide .slide-stats span { font-size: var(--fs-12); color: var(--blue-200); }
.hero-slider__nav { position:absolute; bottom: var(--sp-5); left: var(--sp-10); display:flex; gap: var(--sp-2); z-index: 5; }
.hero-slider__dot { width:28px; height:4px; border-radius:2px; background: rgba(255,255,255,.3); border:none; cursor:pointer; transition: var(--transition-base); padding:0; }
.hero-slider__dot[aria-selected="true"] { background:#fff; width:40px; }
.hero-slider__arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background: rgba(8,22,38,.25); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: var(--transition-base);
}
.hero-slider__arrow:hover { background: rgba(8,22,38,.55); border-color:#fff; }
.hero-slider__arrow.prev { left: var(--sp-4); } .hero-slider__arrow.next { right: var(--sp-4); }
@media (max-width: 768px){
  .hero-slider__slide { padding: var(--sp-8) var(--sp-5); min-height: 420px; }
  .hero-slider__slide > div:first-child { max-width: 100%; }
  .hero-slider__slide::after { background: linear-gradient(180deg, rgba(8,22,38,.5) 0%, rgba(8,22,38,.8) 100%); }
}

/* ---------- 2. 自动大图切换（跨区块 Hero Big Image） ---------- */
.auto-bigimg { position:relative; overflow:hidden; border-radius: var(--radius-xl); }
.auto-bigimg__stack { position:relative; width:100%; aspect-ratio: 16/7; }
.auto-bigimg__item {
  position:absolute; inset:0; opacity:0; transform:scale(1.06);
  transition: opacity 1000ms ease, transform 6000ms linear;
  background-size:cover; background-position:center; border-radius:inherit;
}
.auto-bigimg__item.is-active { opacity:1; transform:scale(1); }
.auto-bigimg__item::after { content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(8,22,38,.62) 0%, rgba(8,22,38,.15) 60%, transparent 100%); }
.auto-bigimg__caption {
  position:absolute; left:var(--sp-8); bottom:var(--sp-8); z-index:3; color:#fff; max-width:560px;
}
.auto-bigimg__caption h2 { font-size:clamp(22px,2.6vw,34px); font-weight:var(--fw-700); margin:0 0 var(--sp-2); }
.auto-bigimg__caption p { font-size:var(--fs-14); color:rgba(255,255,255,.85); margin:0; }
.auto-bigimg__progress { position:absolute; bottom:0; left:0; height:3px; width:0%; background:var(--blue-300); z-index:4; transition: width 80ms linear; }

/* ---------- 3. 文字动态特效 ---------- */
/* 3a. 打字机 */
.typewriter { display:inline-flex; flex-wrap:wrap; }
.typewriter__text { white-space:pre-wrap; }
.typewriter__caret { display:inline-block; width:2px; height:1.05em; background:currentColor; margin-left:2px; align-self:center;
  animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* 3b. 滚动入场：淡入 + 上移（IntersectionObserver 触发） */
.reveal { opacity:0; transform:translateY(28px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal--delay-1{ transition-delay:120ms; } .reveal--delay-2{ transition-delay:240ms; } .reveal--delay-3{ transition-delay:360ms; }

/* 3c. 数字滚动计数 */
.counter { font-variant-numeric: tabular-nums; font-weight: var(--fw-700); }

/* 3d. 文字高亮描边渐变 */
.text-gradient {
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400) 55%, var(--green-500));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color:transparent;
}

/* ---------- 4. 鼠标动态特效 ---------- */
/* 4a. 自定义光标（仅桌面 hover 可指向元素） */
.cursor-fx { position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--blue-400); pointer-events:none; z-index:var(--z-max); transform:translate(-50%,-50%);
  transition: width 200ms ease, height 200ms ease, background 200ms ease, border-color 200ms ease, opacity 200ms ease;
  mix-blend-mode: difference; opacity:0; }
.cursor-fx.is-active { opacity:1; }
.cursor-fx.is-hover { width:52px; height:52px; background: rgba(91,155,213,.18); border-color:var(--blue-300); }
@media (hover:none){ .cursor-fx{ display:none; } }

/* 4b. 卡片悬浮光晕（鼠标位置驱动） */
.glow-card { position:relative; overflow:hidden; }
.glow-card::before {
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(91,155,213,.22), transparent 65%);
  transform: translate(-50%,-50%); left:var(--mx,50%); top:var(--my,50%);
  opacity:0; transition: opacity 300ms ease; pointer-events:none; z-index:0;
}
.glow-card:hover::before { opacity:1; }
.glow-card > * { position:relative; z-index:1; }

/* 4c. 鼠标视差容器 */
.parallax-host { perspective: 800px; }
.parallax-layer { transition: transform 120ms ease-out; will-change: transform; }

/* ---------- 5. 图片动态特效 ---------- */
/* 5a. 图片视差滚动 */
.img-parallax { overflow:hidden; border-radius: var(--radius-lg); }
.img-parallax__inner { width:100%; height:130%; object-fit:cover; transform:translateY(0); will-change: transform; }

/* 5b. 图片缩放揭示（hover 放大 + 遮罩） */
.img-zoom { overflow:hidden; border-radius: var(--radius-lg); }
.img-zoom__inner { width:100%; height:100%; object-fit:cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 500ms ease; }
.img-zoom:hover .img-zoom__inner { transform:scale(1.08); filter: brightness(1.04); }

/* 5c. 区块粒子/光斑背景（Canvas 注入） */
.particles-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }

/* 5d. 图片懒加载淡入 */
.img-fade { opacity:0; transition: opacity 600ms ease; }
.img-fade.is-loaded { opacity:1; }

/* ---------- 6. 通用工具 ---------- */
.has-cursor-pointer { cursor:pointer; }
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { scrollbar-width:none; }

/* ---------- 7. 减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-slider__track { transition: none; }
  .reveal { opacity:1; transform:none; transition:none; }
  .auto-bigimg__item { transition: opacity 400ms ease; transform:none; }
  .typewriter__caret { animation:none; }
  .glow-card::before { display:none; }
  .img-parallax__inner { transform:none !important; }
}

/* ---------- 8. 图片占位集成（演示用真实感产品/场景插画） ----------
   颜色/间距全部复用 tokens.css；此为演示占位，正式上线须替换为真实产品原图。 */
.slide-visual { background-size: cover !important; background-position: center !important; }
.slide-visual svg { display:none; }   /* 有背景图时隐藏原矢量占位 */
.slide-visual.is-img svg { display:block; } /* 无背景图时回退显示矢量 */

/* 幻灯片视觉区大图与自动大图均由后台「幻灯片管理」数据库驱动（[slide:src]），无需硬编码兜底图 */
/* 幻灯片各 slide 视觉区大图由后台幻灯片驱动；自动大图由 gid=1 驱动 —— 全部为数据库真实图片 */

/* 产品/新闻/资源卡片图（img-fade + object-fit，供卡片内 <img class="card-img img-fade"> 使用） */
.card-img { width:100%; height:100%; object-fit:cover; display:block; border-radius: var(--radius-md); }
.product-card__media, .news-card__media, .app-card__media, .resource-card__media {
  position:relative; overflow:hidden; border-radius: var(--radius-md) var(--radius-md) 0 0;
  aspect-ratio: 1/1; background: #fff; border-bottom: 1px solid var(--border-subtle);
}
.news-card__media { aspect-ratio: 1/1; }
.product-card__media img, .news-card__media img, .app-card__media img, .resource-card__media img {
  width:100%; height:100%; object-fit:cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}
.product-card:hover .product-card__media img,
.news-card:hover .news-card__media img,
.app-card:hover .app-card__media img { transform:scale(1.06); filter:brightness(1.04); }

/* 关于页/公司图 */
.about-figure { width:100%; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); }
.about-figure img { width:100%; height:100%; object-fit:cover; }
.about-figure__caption { padding: var(--sp-3) var(--sp-1); font-size: var(--fs-13); color: var(--text-muted); }

/* 状态页插画（404/空状态/询价） */
.state-illustration { width:100%; max-width:420px; margin: 0 auto var(--sp-5); border-radius: var(--radius-lg); overflow:hidden;
  aspect-ratio: 4/3; background: var(--bg-soft); }
.state-illustration img { width:100%; height:100%; object-fit:cover; }

/* 文章/新闻配图 */
.article__figure { margin: 0 0 var(--sp-6); border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 16/8; background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); }
.article__figure img { width:100%; height:100%; object-fit:cover; }
.article__figure figcaption { padding: var(--sp-2) 0; font-size: var(--fs-13); color: var(--text-muted); }

/* 询价页配图 */
.inquiry-figure { width:100%; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:16/6; margin-bottom: var(--sp-5);
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); }
.inquiry-figure img { width:100%; height:100%; object-fit:cover; }

/* 幻灯片视觉区叠加微暗以保文字可读（当用大图时） */
.hero-slider__slide .slide-visual::after { content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(8,22,38,.28), rgba(8,22,38,.08)); border-radius:inherit; }

/* ===== 顶部幻灯片 · 宇宙星空粒子背景（canvas 由 cosmic.js 注入，mix-blend screen 叠加为全屏星空） ===== */
.hero-cosmic {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none; display: block;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .hero-cosmic { display: none; } }


/* ============================================================
   以下为「全站图片填满 + 产品菜单三级 + 链接悬停进度条」增强（动态注入）
   ============================================================ */

/* 列表卡片真实图片（替换原 SVG 占位图标）—— 淘宝式 1:1 白底裁剪 */
.card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--border-subtle);
}
.card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 500ms ease; }
.card:hover .card__media img,
.card.product-card:hover .card__media img { transform: scale(1.06); filter: brightness(1.04); }

/* 新闻/资源列表缩略图（淘宝式 1:1 白底） */
.news-item { flex-wrap: wrap; }
.news-item__media {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  background: #fff;
  border: 1px solid var(--border-subtle);
}
.news-item__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform 600ms ease; }
.news-item:hover .news-item__media img { transform: scale(1.04); }

/* 书本翻页 hover 效果（缩略图）—— 整张"书页"绕左侧书脊翻开，露出下方真实产品图 */
.fx-book { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 1400px; }
.fx-book__page {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform-origin: left center;            /* 书脊（装订边）在左缘 */
  transform: rotateY(0deg);
  transition: transform .85s cubic-bezier(.45,.05,.25,1);
  /* 书脊阴影 + 书页右侧厚度，营造翻书立体感 */
  box-shadow: inset 8px 0 16px -8px rgba(0,0,0,.28),
              inset -20px 0 28px -20px rgba(0,0,0,.45);
  will-change: transform;
}
/* 书脊高光线（左缘装订金属感） */
.fx-book__page::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(255,255,255,.16) 55%, transparent);
  pointer-events: none;
}
/* 鼠标经过：书页绕书脊翻开 ~180°，背面隐藏后露出真实产品图，形成翻书效果 */
.card:hover .fx-book__page,
.card__media:hover .fx-book__page,
.news-item:hover .fx-book__page,
a.card__media:hover .fx-book__page,
a.news-item__media:hover .fx-book__page {
  transform: rotateY(-180deg);
}

/* 导航三级下拉 */
.dropdown__item { position: relative; }
.dropdown__item > a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.dropdown__item .caret { flex-shrink: 0; opacity: .55; }
.dropdown__submenu {
  position: absolute; top: -1px; left: calc(100% + 4px);
  min-width: 200px; padding: var(--sp-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: calc(var(--z-dropdown) + 1);
}
.dropdown__item:hover > .dropdown__submenu,
.dropdown__item:focus-within > .dropdown__submenu { opacity: 1; visibility: visible; transform: translateX(0); }
.dropdown__submenu:empty { display: none; }
.dropdown__submenu a { display: block; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-13); color: var(--text-secondary); border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); }
.dropdown__submenu a:hover { background: var(--brand-accent-bg); color: var(--brand-accent); }

/* 全站链接悬停进度条 + 链接提示 */
a { position: relative; }
a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent));
  border-radius: 2px; transition: width .45s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
a:hover::after, a:focus-visible::after { width: 100%; }
a[href]:hover::before {
  content: attr(href);
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 6px; padding: 3px 8px;
  background: rgba(8,22,38,.92); color: #fff;
  font-size: 11px; line-height: 1.4; white-space: nowrap;
  border-radius: 4px; z-index: 9999; pointer-events: none;
  max-width: 80vw; overflow: hidden; text-overflow: ellipsis;
}
/* 例外：按钮/图标按钮/Logo 不显示进度条与提示 */
.site-logo::after, .icon-btn::after, .btn::after, .lang-switch__btn::after, .menu-toggle::after,
.inquiry-float__btn::after, .pagination__btn::after { display: none; }
.site-logo:hover::before, .icon-btn:hover::before, .btn:hover::before, .lang-switch__btn:hover::before,
.menu-toggle:hover::before, .inquiry-float__btn:hover::before, .pagination__btn:hover::before { content: none; }