/* EchoFlow 官网动效层：只用独立的 translate / scale / rotate 属性，不覆盖 site.css 已有的 transform。
   motion.js 在 <html> 上加 .motion 后才生效；减少动态效果时整层关闭。 */

.scroll-progress{position:fixed;z-index:60;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;scale:var(--p,0) 1;background:linear-gradient(90deg,var(--ember-deep),var(--ember) 50%,#ffb36b);pointer-events:none}

/* hero：光晕跟随指针，标题分层视差，漂浮语块 */
.motion .hero{perspective:1400px}
.motion .hero-glow{translate:calc(var(--gx,0)*60px) calc(var(--gy,0)*40px + var(--hy,0)*120px);transition:translate 1.2s var(--ease)}
.motion .hero-title,.motion .eyebrow,.motion .hero-lead,.motion .hero-actions{will-change:translate,opacity}
.motion .hero-title{translate:0 calc(var(--hy,0)*-70px);scale:calc(1 - var(--hy,0)*.06);opacity:calc(1 - var(--hy,0)*1.3)}
.motion .hero-lead,.motion .hero-actions,.motion .hero-device{translate:0 calc(var(--hy,0)*-30px);opacity:calc(1 - var(--hy,0)*1.6)}
.motion .hero-title.in{animation:mask-in 1.3s var(--ease) both}
@keyframes mask-in{from{clip-path:inset(0 0 100% 0);filter:blur(10px)}to{clip-path:inset(0 0 -10% 0);filter:none}}

.floaters{position:absolute;inset:0;z-index:-1;pointer-events:none}
.floater{position:absolute;display:grid;gap:2px;padding:10px 14px;border-radius:14px;background:color-mix(in oklab,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-2);font-size:13px;line-height:1.35;text-align:left;white-space:nowrap;opacity:0;
  translate:calc(var(--gx,0)*var(--z)*-34px) calc(var(--hy,0)*var(--z)*-260px + var(--gy,0)*var(--z)*-22px);rotate:var(--r);animation:float-in 1.4s var(--ease) var(--delay) forwards,bob 7s ease-in-out calc(var(--delay) + 1.4s) infinite alternate}
.floater b{font-family:var(--serif);font-weight:600;color:var(--ink)}
.floater span{color:var(--muted)}
.floater b em{font-style:normal;padding:0 .2em;border-radius:.25em}
.floater .c0{background:rgb(255 179 107/.32)}.floater .c1{background:rgb(143 211 255/.32)}.floater .c2{background:rgb(181 242 140/.36)}
@keyframes float-in{from{opacity:0;scale:.85;filter:blur(8px)}to{opacity:var(--o,1);scale:1;filter:blur(var(--b,0px))}}
@keyframes bob{to{margin-top:-14px}}
@media(max-width:820px){.floater{display:none}.floater:nth-child(-n+2){display:grid;font-size:12px}}

/* 平台条：无限滚动 */
.motion .strip{flex-wrap:nowrap;justify-content:flex-start;overflow:hidden;width:100%;gap:0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.strip-track{display:flex;align-items:center;gap:22px;padding-right:22px;flex:none;animation:strip 34s linear infinite}
.strip-track span{font-size:15px}
@keyframes strip{to{translate:-100% 0}}

/* 章节标题：逐行遮罩升起 */
.motion .chapter-head h2,.motion .harvest-copy h2,.motion .closing h2,.motion .privacy h2{overflow:hidden}
.h-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h-line>span{display:inline-block;translate:0 110%;rotate:3deg;transition:translate 1.1s var(--ease),rotate 1.1s var(--ease);transition-delay:calc(var(--i)*90ms + 120ms)}
.in .h-line>span,.h-line.in>span{translate:0 0;rotate:0deg}

/* 深色字幕章节：播放器随滚动从小卡片放大到满幅 */
.motion .player{scale:calc(.84 + var(--pp,0)*.16);border-radius:calc(44px - var(--pp,0)*20px);will-change:scale}
.motion .player-scene .sun{translate:0 calc((1 - var(--pp,0))*60px)}
.motion .player-scene .h1{translate:0 calc((1 - var(--pp,0))*24px)}
.motion .player-scene .h2{translate:0 calc((1 - var(--pp,0))*12px)}
.motion .chapter.dark{background-position:calc(50% + var(--dx,0)*40px) 0}

/* 网页双语窗口：3D 倾斜随滚动摊平 */
.motion .stage{rotate:x calc((1 - var(--sp,1))*14deg);scale:calc(.94 + var(--sp,1)*.06);transform-origin:50% 100%}

/* 卡片：指针跟随的光斑和轻微倾斜 */
.motion .tile,.motion .native-card,.motion .harvest-card{--mx:50%;--my:50%}
.motion .tile::after,.motion .native-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgb(255 120 60/.12),transparent 55%);opacity:0;transition:opacity .4s}
.motion .tile:hover::after,.motion .native-card:hover::after{opacity:1}
.motion .native-card{position:relative}
.motion .tile,.motion .native-card{rotate:var(--rx,0) var(--ry,0) 0 var(--ra,0deg)}

/* 收割卡片：视差漂浮 */
.motion .harvest-card{translate:0 calc(var(--cp,0)*-60px)}

/* 学习路径：进度线随滚动画出 */
.motion .learning-loop{position:relative}
.motion .learning-loop::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--ember-deep),var(--ember),#ffb36b);transform-origin:0 50%;scale:var(--lp,0) 1;margin-top:-.5px}
.motion .learning-loop li{transition:opacity .6s var(--ease),translate .8s var(--ease)}
.motion .learning-loop li:not(.lit){opacity:.35;translate:0 12px}

/* 收尾：深色卡片展开成满宽 */
.motion .closing{clip-path:inset(0 calc((1 - var(--zp,1))*12%) round 32px);scale:calc(.96 + var(--zp,1)*.04)}
.motion .closing h2{translate:0 calc((1 - var(--zp,1))*40px)}

/* 磁吸按钮 */
.motion .btn-lg,.motion .nav-cta{translate:var(--bx,0) var(--by,0);transition:translate .5s var(--spring),transform .25s var(--spring)}

@media (prefers-reduced-motion:reduce){
  .scroll-progress,.floaters{display:none}
  .h-line>span{translate:none;rotate:none}
}

/* 定义句与价格区块 */
.hero-define{max-width:620px;margin:18px auto 0;font-size:15px;line-height:1.75;color:var(--muted)}
.hero-define strong{color:var(--ink);font-weight:650;margin-right:.4em}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,320px));justify-content:center;gap:20px;margin-top:48px}
.price-card{position:relative;padding:30px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow-2);overflow:hidden}
.price-card.feat{box-shadow:0 0 0 1.5px var(--ember),var(--shadow-2)}
.price-card h3{font-size:18px}
.price-num{margin:14px 0 8px;font-size:46px;font-weight:760;letter-spacing:-.04em;line-height:1}
.price-num small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.price-card p:last-child{color:var(--ink-2);font-size:15px}
@media(max-width:640px){.price-grid{grid-template-columns:1fr}}