/* ============================================================================
   AuguseShop Motion Layer —— 高端站点动效层
   独立于 style.css，可单独禁用。所有动效均遵守 prefers-reduced-motion。
   核心能力：
     1. 滚动渐进揭示 [data-reveal]  + 交错 [data-stagger]
     2. 3D 倾斜卡片 .tilt + 光泽扫过 .sheen
     3. 数字滚动 .count-up
     4. 无限跑马灯 .marquee
     5. 粘性分栏 .sticky-split
     6. 顶部滚动进度条 .scroll-progress
   （注：逐字/逐词入场、视差、光晕/噪点/网格、磁吸按钮 已按视觉规范移除）
   ========================================================================= */

:root{
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-quint: cubic-bezier(.22,1,.36,1);
  --ease-in-out-quart: cubic-bezier(.76,0,.24,1);
  --mo-dur: .9s;
}

/* ---------------------------------------------------------------- 1. 揭示 */
[data-reveal]{
  opacity:0;
  will-change:opacity, transform, clip-path;
  transition:
    opacity var(--mo-dur) var(--ease-out-expo),
    transform var(--mo-dur) var(--ease-out-expo),
    clip-path 1.1s var(--ease-out-expo),
    filter var(--mo-dur) var(--ease-out-expo);
}
[data-reveal="up"]     { transform:translate3d(0,34px,0); }
[data-reveal="down"]   { transform:translate3d(0,-28px,0); }
[data-reveal="left"]   { transform:translate3d(-40px,0,0); }
[data-reveal="right"]  { transform:translate3d(40px,0,0); }
[data-reveal="fade"]   { transform:none; }
[data-reveal="scale"]  { transform:scale(.94); }
[data-reveal="zoom"]   { transform:scale(1.08); }
[data-reveal="clip"]   { clip-path:inset(0 0 100% 0); transform:translate3d(0,20px,0); }
[data-reveal="clipx"]  { clip-path:inset(0 100% 0 0); }
[data-reveal="blur"]   { filter:blur(14px); transform:translate3d(0,20px,0); }
[data-reveal="rotate"] { transform:perspective(900px) rotateX(12deg) translate3d(0,30px,0); transform-origin:50% 100%; }

[data-reveal].is-in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
  filter:none;
}

/* 交错容器：JS 会给子项写 --mo-i */
[data-stagger] > *{ transition-delay:calc(var(--mo-i,0) * var(--mo-step, 90ms)); }

/* 2. 逐字 / 逐词入场动效已移除（视觉规范：动效仅限轻微渐入 + 悬浮） */

/* ------------------------------------------------------------ 3. 3D 倾斜卡 */
.tilt{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint);
  will-change:transform;
}
.tilt-inner{ transform:translateZ(28px); }
.tilt.is-tilting{ transition:transform .12s linear; }

/* 光泽扫过 */
.sheen{ position:relative; overflow:hidden; }
.sheen::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease-out-expo);
  pointer-events:none;
}
.sheen:hover::after{ transform:translateX(120%); }

/* 卡片抬升 */
.lift{ transition:transform .45s var(--ease-out-quint), box-shadow .45s var(--ease-out-quint), border-color .3s; }
.lift:hover{ transform:translateY(-6px); box-shadow:0 22px 48px -22px rgba(0,0,0,.34); }

/* 4. 视差层已移除（视觉规范：禁用视差特效） */

/* ------------------------------------------------------------ 5. 数字滚动 */
.count-up{ font-variant-numeric:tabular-nums; }

/* -------------------------------------------------------------- 6. 跑马灯 */
.marquee-block{
  --mq-dur:28s;
  overflow:hidden;
  padding:26px 0;
  border-block:1px solid var(--line);
  background:var(--bg-2);
  position:relative;
}
.marquee-block.dark{ background:var(--ink); border-color:#2a2a2a; color:#fff; }
.marquee-block::before,
.marquee-block::after{
  content:"";
  position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none;
}
.marquee-block::before{ left:0;  background:linear-gradient(90deg, var(--bg-2), transparent); }
.marquee-block::after { right:0; background:linear-gradient(270deg, var(--bg-2), transparent); }
.marquee-block.dark::before{ background:linear-gradient(90deg, var(--ink), transparent); }
.marquee-block.dark::after { background:linear-gradient(270deg, var(--ink), transparent); }

.marquee-track{ display:flex; width:max-content; animation:mq-scroll var(--mq-dur) linear infinite; }
.marquee-block:hover .marquee-track{ animation-play-state:paused; }
.marquee-block.reverse .marquee-track{ animation-direction:reverse; }
.marquee-group{ display:flex; align-items:center; flex-shrink:0; }
.marquee-item{
  display:inline-flex; align-items:center; gap:16px;
  padding:0 30px;
  font-size:30px; font-weight:600; letter-spacing:-.02em; white-space:nowrap;
}
.marquee-item .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.32; flex-shrink:0; }
.marquee-block.sm .marquee-item{ font-size:14px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.marquee-block.outline .marquee-item{
  -webkit-text-stroke:1px currentColor; color:transparent;
}
@keyframes mq-scroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ------------------------------------------------------------ 7. 粘性分栏 */
.sticky-split{ display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:start; }
.sticky-split .ss-left{ position:sticky; top:96px; padding-block:20px; }
.sticky-split .ss-eyebrow{
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.sticky-split .ss-left h2{
  font-size:40px; line-height:1.08; letter-spacing:-.03em; font-weight:600; margin-top:14px;
}
.sticky-split .ss-left p{ color:var(--muted); margin-top:16px; max-width:400px; font-size:15px; }
.sticky-split .ss-right{ display:grid; gap:18px; }
.ss-item{
  border:1px solid var(--line);
  border-radius:10px;
  padding:26px 28px;
  background:#fff;
  position:relative;
  overflow:hidden;
}
.ss-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--ink);
  transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--ease-out-expo);
}
.ss-item.is-in::before{ transform:scaleY(1); }
.ss-item .num{
  font-size:11.5px; letter-spacing:.2em; color:var(--faint); font-weight:600;
}
.ss-item h3{ font-size:19px; letter-spacing:-.02em; margin-top:10px; font-weight:600; }
.ss-item p{ color:var(--muted); margin-top:8px; font-size:14px; line-height:1.65; }
.ss-item:hover{ border-color:var(--line-2); }

/* 8. 光晕 / 噪点 / 网格线 已移除（视觉规范：禁用花哨背景特效） */

/* 9. 磁吸已移除（视觉规范：禁用磁吸特效） */
.btn-arrow{ position:relative; overflow:hidden; }
.btn-arrow svg,
.btn-arrow .ar{ transition:transform .4s var(--ease-out-expo); }
.btn-arrow:hover .ar{ transform:translateX(4px); }

/* 下划线扫入 */
.link-underline{ position:relative; display:inline-block; }
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out-expo);
}
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ------------------------------------------------------- 10. 滚动进度条 */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  z-index:9999; pointer-events:none;
}

/* ======================================================================== */
/*                        区块级动效增强（覆盖 style.css）                     */
/* ======================================================================== */

/* ---------- Hero 电影感（已移除 cinematic / glow-orb 特效） ---------- */
.hero{ position:relative; isolation:isolate; }
.hero h1{ position:relative; z-index:2; }
.hero-eyebrow{ position:relative; display:inline-flex; align-items:center; gap:9px; }
.hero-eyebrow::before{
  content:""; width:26px; height:1px; background:currentColor; opacity:.6;
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out-expo) .2s;
}
.hero .is-in .hero-eyebrow::before,
.hero-eyebrow.is-in::before{ transform:scaleX(1); }

.hero-visual{ overflow:hidden; position:relative; }
.hero-visual::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.09), transparent 55%);
  pointer-events:none;
}
.hero-visual svg{ transition:transform 1.2s var(--ease-out-quint); }
.hero-visual:hover svg{ transform:scale(1.05) rotate(-1.5deg); }

.hero-stats .n{ position:relative; }
.hero-scroll-hint{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#8a8a8a; z-index:3;
}
.hero-scroll-hint i{
  width:1px; height:32px; background:linear-gradient(to bottom, #8a8a8a, transparent);
  animation:hint-run 1.9s var(--ease-in-out-quart) infinite;
}
@keyframes hint-run{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ---------- 章节标题动效 ---------- */
.sec-head h2{ position:relative; }
.sec-head{ position:relative; }
.eyebrow{ position:relative; display:inline-flex; align-items:center; gap:9px; }

/* ---------- 特性网格 ---------- */
.feature-grid .fg-card{
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease-out-quint), border-color .35s, background .35s;
}
.feature-grid .fg-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(23,23,23,.05), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.feature-grid .fg-card:hover::before{ opacity:1; }
.feature-grid .fg-card:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.feature-grid .fg-card > *{ position:relative; z-index:1; }
.fg-eyebrow{ transition:letter-spacing .4s var(--ease-out-expo); }
.fg-card:hover .fg-eyebrow{ letter-spacing:.28em; }

/* ---------- 系列网格 ---------- */
.series-grid .sg-card{
  position:relative; overflow:hidden;
  transition:transform .55s var(--ease-out-quint), box-shadow .55s var(--ease-out-quint), border-color .35s;
}
.series-grid .sg-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out-expo);
}
.series-grid .sg-card:hover::after{ transform:scaleX(1); }
.series-grid .sg-card:hover{ transform:translateY(-7px); box-shadow:0 26px 54px -26px rgba(0,0,0,.32); }
.sg-num{ transition:transform .55s var(--ease-out-expo), opacity .4s; }
.sg-card:hover .sg-num{ transform:translate3d(6px,-6px,0); opacity:.24; }

/* ---------- 时间线：线条随滚动生长 ---------- */
.timeline{ position:relative; overflow:visible; }
.timeline .tl-progress{
  position:absolute; top:0; bottom:0; inset-inline-start:0; width:2px;
  background:var(--ink); z-index:3;
  transform:scaleY(0); transform-origin:top;
  transition:transform .1s linear;
}
.tl-item{ position:relative; }
.tl-item .tl-year{ transition:transform .5s var(--ease-out-expo), color .3s; }
.tl-item:hover .tl-year{ transform:translateX(4px); }
.tl-item:hover{ background:var(--bg-2); }
.tl-item::before{
  content:""; position:absolute; z-index:4;
  inset-inline-start:-5px; top:27px;
  width:10px; height:10px; border-radius:50%;
  background:#fff; border:2px solid var(--ink);
  transform:scale(0); transition:transform .5s var(--ease-out-expo) .1s;
}
.tl-item.is-in::before{ transform:scale(1); }

/* ---------- 产品网格：reveal 包裹层不破坏 1px 分隔线布局 ---------- */
.pgrid > [data-reveal]{ display:flex; background:#fff; }
.pgrid > [data-reveal] > *{ width:100%; }

/* ---------- Spotlight ---------- */
.spotlight .sp-card{ transition:transform .6s var(--ease-out-quint), box-shadow .6s var(--ease-out-quint); }
.sp-card-img{ overflow:hidden; }
.sp-card-img img{ transition:transform 1.1s var(--ease-out-quint); }
.sp-card:hover .sp-card-img img{ transform:scale(1.07); }

/* ---------- 产品卡 / 博客卡 ---------- */
.pgrid .pcard,
.blog-grid .bcard{
  transition:transform .45s var(--ease-out-quint), box-shadow .45s var(--ease-out-quint), border-color .3s;
}
.pgrid .pcard:hover,
.blog-grid .bcard:hover{ transform:translateY(-5px); box-shadow:0 20px 44px -24px rgba(0,0,0,.3); }
.pgrid .pcard .thumb img,
.blog-grid .bcard .cover img{ transition:transform 1s var(--ease-out-quint); }
.pgrid .pcard:hover .thumb img,
.blog-grid .bcard:hover .cover img{ transform:scale(1.06); }

/* ---------- 图集 gallery ---------- */
.mo-gallery{ display:grid; gap:14px; }
.mo-gallery.cols-2{ grid-template-columns:repeat(2,1fr); }
.mo-gallery.cols-3{ grid-template-columns:repeat(3,1fr); }
.mo-gallery.cols-4{ grid-template-columns:repeat(4,1fr); }
.mo-gtile{
  position:relative; overflow:hidden; border-radius:10px; background:var(--bg-3);
  aspect-ratio:4/3; display:block;
}
.mo-gtile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out-quint), filter .5s; }
.mo-gtile:hover img{ transform:scale(1.08); }
.mo-gtile .cap{
  position:absolute; inset:auto 0 0 0; padding:18px 18px 16px;
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent);
  color:#fff; font-size:13.5px; font-weight:500; letter-spacing:-.01em;
  transform:translateY(8px); opacity:0;
  transition:transform .5s var(--ease-out-expo), opacity .4s;
}
.mo-gtile:hover .cap{ transform:none; opacity:1; }
.mo-gtile.tall{ aspect-ratio:3/4; }
.mo-gtile.wide{ grid-column:span 2; aspect-ratio:16/9; }

/* ---------- 数字统计带 ---------- */
.statband{ background:var(--ink); color:#fff; padding:64px 0; position:relative; overflow:hidden; }
.statband .wrap{ position:relative; z-index:2; }
.statband .sb-head{ text-align:center; margin-bottom:42px; }
.statband .sb-head .eyebrow{ color:#a3a3a3; }
.statband .sb-head h2{ font-size:34px; letter-spacing:-.03em; font-weight:600; margin-top:12px; }
.statband-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#2e2e2e; border-block:1px solid #2e2e2e; }
.statband-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.statband-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.sb-cell{ background:var(--ink); padding:34px 26px; text-align:center; transition:background .4s; }
.sb-cell:hover{ background:#1f1f1f; }
.sb-cell .n{ font-size:44px; font-weight:600; letter-spacing:-.035em; line-height:1; display:block; }
.sb-cell .suf{ font-size:26px; }
.sb-cell .l{ font-size:12px; color:#a3a3a3; margin-top:10px; display:block; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- 大字 CTA ---------- */
.bigcta{ padding:110px 0; background:var(--ink); color:#fff; position:relative; overflow:hidden; text-align:center; }
.bigcta .wrap{ position:relative; z-index:2; }
.bigcta .eyebrow{ color:#a3a3a3; }
.bigcta h2{
  font-size:clamp(34px, 6vw, 76px); line-height:1.02; letter-spacing:-.04em; font-weight:600; margin-top:16px;
}
.bigcta p{ color:#bdbdbd; margin:18px auto 0; max-width:560px; font-size:15.5px; }
.bigcta .acts{ display:flex; gap:12px; justify-content:center; margin-top:34px; flex-wrap:wrap; }

/* ---------- 分隔 / 通用装饰 ---------- */
.rule-grow{ height:1px; background:var(--line); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--ease-out-expo); }
.rule-grow.is-in{ transform:scaleX(1); }

/* -------------------------------------------------------------- 响应式 */
@media (max-width:960px){
  .sticky-split{ grid-template-columns:1fr; gap:32px; }
  .sticky-split .ss-left{ position:static; }
  .sticky-split .ss-left h2{ font-size:31px; }
  .statband-grid{ grid-template-columns:repeat(2,1fr); }
  .marquee-item{ font-size:22px; padding:0 20px; }
  .mo-gallery.cols-3,.mo-gallery.cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .statband-grid,.statband-grid.cols-3{ grid-template-columns:1fr 1fr; }
  .sb-cell .n{ font-size:33px; }
  .marquee-item{ font-size:18px; }
  .mo-gallery.cols-2,.mo-gallery.cols-3,.mo-gallery.cols-4{ grid-template-columns:1fr; }
  .mo-gtile.wide{ grid-column:span 1; }
  .bigcta{ padding:72px 0; }
}

/* ------------------------------------------------- 无障碍：降低动态偏好 */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important;
    transition:none !important;
  }
  .marquee-track{ animation:none !important; }
  .hero-scroll-hint i{ animation:none !important; }
  .tilt{ transform:none !important; }
}
