/* ============================================================ motion.css — 木马 · 外贸独立站 高级感动效引擎（零依赖） 与 style.css 设计系统配套；靠 门控防 FOUC 强度基调：明显 · 有记忆点（与方案文档一致） ============================================================ */ :root{ --ease-out:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.33,1,.68,1); } /* ---------- 顶部滚动进度条 ---------- */ .motion-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--gold); transform:scaleX(0);transform-origin:0 50%;z-index:9999;pointer-events:none;will-change:transform} /* ---------- 通用渐显 .rv（全站已用，这里补完整 + 升级缓动） ---------- */ html.js-on .rv{opacity:0;transform:translateY(26px); transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);will-change:opacity,transform} html.js-on .rv.on{opacity:1;transform:none} /* ---------- data-reveal 进阶：方向 / 缩放 ---------- */ html.js-on [data-reveal]{opacity:0;will-change:opacity,transform} html.js-on [data-reveal="up"]{transform:translateY(30px)} html.js-on [data-reveal="left"]{transform:translateX(-34px)} html.js-on [data-reveal="right"]{transform:translateX(34px)} html.js-on [data-reveal="zoom"]{transform:scale(.94)} html.js-on [data-reveal].is-in{opacity:1;transform:none; transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)} /* ---------- 图片蒙版擦除 ---------- */ html.js-on [data-reveal="wipe"]{opacity:1;clip-path:inset(0 0 100% 0)} html.js-on [data-reveal="wipe"]>*{transform:scale(1.08);transition:transform 1.1s var(--ease-out)} html.js-on [data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease-out)} html.js-on [data-reveal="wipe"].is-in>*{transform:none} /* ---------- 首屏入场编排（纯 CSS 载入即播，不依赖滚动/JS，保护 LCP） ---------- */ @keyframes motion-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes motion-line{from{transform:translateY(115%)}to{transform:none}} @keyframes motion-fade{from{opacity:0}to{opacity:1}} html.js-on .hero .eyebrow{opacity:0;animation:motion-rise .7s var(--ease-out) .15s both} html.js-on .hero h1{opacity:1} html.js-on .hero h1 .ln{display:block;overflow:hidden} html.js-on .hero h1 .ln>i{display:block;font-style:normal;transform:translateY(115%); animation:motion-line .95s var(--ease-out) both} html.js-on .hero h1 .ln:nth-child(1)>i{animation-delay:.28s} html.js-on .hero h1 .ln:nth-child(2)>i{animation-delay:.43s} html.js-on .hero h1 .ln:nth-child(3)>i{animation-delay:.58s} html.js-on .hero .sub{opacity:0;animation:motion-rise .8s var(--ease-out) both} html.js-on .hero .sub:nth-of-type(1){animation-delay:.66s} html.js-on .hero .sub:nth-of-type(2){animation-delay:.80s} html.js-on .hero .hero-btns{opacity:0;animation:motion-rise .8s var(--ease-out) .94s both} html.js-on .hero .portrait{opacity:0;animation:motion-rise 1s var(--ease-out) .5s both} html.js-on .hero .figures .fig{opacity:0;animation:motion-rise .7s var(--ease-out) both} html.js-on .hero .figures .fig:nth-child(1){animation-delay:1.02s} html.js-on .hero .figures .fig:nth-child(2){animation-delay:1.14s} html.js-on .hero .figures .fig:nth-child(3){animation-delay:1.26s} html.js-on .hero .figures .fig:nth-child(4){animation-delay:1.38s} /* ---------- 关键词跑马灯 ---------- */ .motion-marquee{overflow:hidden;white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .motion-marquee .mm-track{display:inline-block;white-space:nowrap;will-change:transform; animation:motion-marquee 40s linear infinite} .motion-marquee:hover .mm-track{animation-play-state:paused} @keyframes motion-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- 按钮流光（微交互） ---------- */ .btn{position:relative;overflow:hidden} .btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg);transition:left .7s var(--ease-out);pointer-events:none} .btn:hover::after{left:150%} /* ---------- AI 打字机光标 ---------- */ .mo-caret{display:inline-block;width:.55em;height:1.05em;background:var(--gold); margin-left:2px;vertical-align:-2px;animation:motion-blink 1s steps(1) infinite} @keyframes motion-blink{50%{opacity:0}} /* ---------- 移动端汉堡菜单 + 抽屉 ---------- */ .nav-burger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px; position:relative;flex:0 0 auto;margin-left:auto} .nav-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink); transition:.3s var(--ease-out)} .nav-burger span:nth-child(1){top:15px} .nav-burger span:nth-child(2){top:21px} .nav-burger span:nth-child(3){top:27px} html.nav-open .nav-burger span:nth-child(1){top:21px;transform:rotate(45deg)} html.nav-open .nav-burger span:nth-child(2){opacity:0} html.nav-open .nav-burger span:nth-child(3){top:21px;transform:rotate(-45deg)} .nav-drawer{position:fixed;top:0;right:0;width:min(84vw,360px);height:100%;background:var(--paper); box-shadow:-22px 0 60px rgba(0,0,0,.20);z-index:1200;padding:78px 28px 40px;overflow-y:auto; transform:translateX(100%);transition:transform .42s var(--ease-out);visibility:hidden} html.nav-open .nav-drawer{transform:none;visibility:visible} .nav-drawer a{display:block;padding:13px 2px;font-size:16px;color:var(--ink); border-bottom:1px solid var(--line);text-decoration:none} .nav-drawer a:hover{color:var(--gold-deep)} .nav-drawer .nd-group{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin:22px 0 2px} .nav-drawer .nd-cta{margin-top:24px;background:var(--ink);color:#fff;text-align:center; border:none;padding:14px;font-size:15px;letter-spacing:.06em} .nav-mask{position:fixed;inset:0;background:rgba(20,20,22,.45);z-index:1100; opacity:0;visibility:hidden;transition:.35s} html.nav-open .nav-mask{opacity:1;visibility:visible} html.nav-open{overflow:hidden} @media(max-width:1080px){ .nav-burger{display:block} nav.main .menu,nav.main .nav-end{display:none} } html.nav-open .nav-drawer a{opacity:0;animation:motion-rise .5s var(--ease-out) forwards} html.nav-open .nav-drawer a:nth-child(1){animation-delay:.10s} html.nav-open .nav-drawer a:nth-child(2){animation-delay:.15s} html.nav-open .nav-drawer a:nth-child(3){animation-delay:.20s} html.nav-open .nav-drawer a:nth-child(4){animation-delay:.25s} html.nav-open .nav-drawer a:nth-child(5){animation-delay:.30s} html.nav-open .nav-drawer a:nth-child(n+6){animation-delay:.34s} /* ---------- 跨页面切换过渡（浏览器原生，渐进增强） ---------- */ @view-transition{ navigation:auto; } ::view-transition-old(root){animation:motion-fade .34s var(--ease-out) reverse} ::view-transition-new(root){animation:motion-fade .42s var(--ease-out)} /* ---------- 降级：系统“减少动态效果” 或 手动关闭 ---------- */ @media (prefers-reduced-motion: reduce){ html.js-on .rv,html.js-on [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important} html.js-on [data-reveal="wipe"]>*{transform:none!important} html.js-on .hero *{animation:none!important;opacity:1!important;transform:none!important} .motion-marquee .mm-track{animation:none!important} .btn::after{display:none} .mo-caret{animation:none} ::view-transition-old(root),::view-transition-new(root){animation:none!important} } html.motion-off .rv,html.motion-off [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important} html.motion-off [data-reveal="wipe"]>*{transform:none!important} html.motion-off .hero *{animation:none!important;opacity:1!important;transform:none!important} html.motion-off .motion-marquee .mm-track{animation:none!important} html.motion-off .btn::after{display:none}