/* ============================================================
   Earthory Motion Layer
   独立动效层：只新增，不修改 earthory.css / earthory.js
   移除 HTML 中对本文件与 earthory-motion.js 的两行引用即可完全回退
   ============================================================ */

:root{
  --eo-e:cubic-bezier(.22,1,.36,1);
  --eo-e-soft:cubic-bezier(.33,0,.2,1);
  --eo-d:.58s;
  --eo-d-mask:.78s;
  --eo-accent:#4f9278;
  --eo-accent-soft:#8fcab3;
  --eo-glow:rgba(79,146,120,.32);
}

/* ---------- 1. 入场遮罩 / 页面转场 ---------- */
.eo-veil{
  position:fixed;inset:0;z-index:400;pointer-events:none;
  background:linear-gradient(120deg,#fff,#fdfbf6 60%,#f1f7f4);
  opacity:1;transition:opacity .34s var(--eo-e-soft)
}
.eo-ready .eo-veil{opacity:0}
.eo-leaving .eo-veil{opacity:1;transition-duration:.18s}

/* ---------- 2. 滚动进场引擎 ---------- */
.eo-motion [data-reveal]{opacity:0;will-change:opacity,transform}
.eo-motion [data-reveal="up"]{transform:translate3d(0,32px,0)}
.eo-motion [data-reveal="down"]{transform:translate3d(0,-22px,0)}
.eo-motion [data-reveal="left"]{transform:translate3d(-38px,0,0)}
.eo-motion [data-reveal="right"]{transform:translate3d(38px,0,0)}
.eo-motion [data-reveal="zoom"]{transform:scale(.94)}
.eo-motion [data-reveal="mask"]{opacity:1;clip-path:inset(0 0 104% 0)}
.eo-motion [data-reveal="stage"]{opacity:1;clip-path:inset(0 0 100% 0);transform:scale(1.02)}
.eo-motion [data-reveal].eo-in{
  opacity:1;transform:none;clip-path:inset(-3%);
  transition:
    opacity var(--eo-d) var(--eo-e) var(--eo-t,0ms),
    transform var(--eo-d) var(--eo-e) var(--eo-t,0ms),
    clip-path var(--eo-d-mask) var(--eo-e) var(--eo-t,0ms)
}

/* 吸顶导航会遮挡锚点，给所有锚点留出安全距离 */
[id]{scroll-margin-top:96px}

/* ---------- 3. 顶部进度条 + 吸顶导航 ---------- */
.eo-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:300;pointer-events:none;
  transform:scaleX(var(--eo-p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--eo-accent-soft),var(--eo-accent));
  opacity:0;transition:opacity .4s ease
}
.eo-scrolled .eo-progress{opacity:1}

.nav{transition:height .45s var(--eo-e-soft),background .45s ease,box-shadow .45s ease,transform .45s var(--eo-e)}
.eo-scrolled .nav{
  position:fixed;max-width:none;height:66px;
  padding:0 max(28px,calc((100vw - 1240px) / 2 + 28px));
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 1px 0 rgba(221,231,226,.9),0 10px 30px rgba(49,88,74,.05)
}
.eo-nav-hide .nav{transform:translateY(-104%)}
.eo-scrolled .brand{font-size:22px}

.nav nav a{position:relative}
.nav nav a::after{
  content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;
  background:var(--eo-accent);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--eo-e)
}
.nav nav a:hover::after{transform:scaleX(1);transform-origin:left}
footer div a{position:relative}
footer div a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;
  background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--eo-e)
}
footer div a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 4. 氛围层：光晕网格 / 扫掠 / 悬浮粒子 ---------- */
/* .subhero 原本没有定位上下文，氛围层会脱出首屏铺满整页，这里补上 */
.hero,.subhero{position:relative}
.eo-atmo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero > *:not(.eo-atmo),
.subhero > *:not(.eo-atmo){position:relative;z-index:1}

.eo-atmo .eo-mesh{
  position:absolute;inset:-25%;filter:blur(22px);
  background:
    radial-gradient(38% 42% at 24% 28%,rgba(143,202,179,.40),transparent 70%),
    radial-gradient(34% 38% at 78% 22%,rgba(79,146,120,.20),transparent 72%),
    radial-gradient(42% 40% at 60% 82%,rgba(226,213,187,.42),transparent 72%);
  animation:eoMesh 24s ease-in-out infinite alternate
}
@keyframes eoMesh{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.07)}
  100%{transform:translate3d(-1%,3%,0) scale(1.02)}
}

.eo-atmo .eo-grid{
  position:absolute;inset:-10%;
  background-image:
    linear-gradient(rgba(79,146,120,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,146,120,.10) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(68% 62% at 50% 42%,#000,transparent 80%);
  mask-image:radial-gradient(68% 62% at 50% 42%,#000,transparent 80%);
  animation:eoGridDrift 30s linear infinite
}
@keyframes eoGridDrift{to{background-position:74px 74px,74px 74px}}

.eo-atmo .eo-beam{
  position:absolute;top:-30%;left:0;width:26%;height:160%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:eoBeam 11s ease-in-out infinite
}
@keyframes eoBeam{
  0%{transform:translateX(-160%) rotate(14deg);opacity:0}
  12%{opacity:.85}
  55%{opacity:0}
  100%{transform:translateX(520%) rotate(14deg);opacity:0}
}

.eo-atmo .eo-dot{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--eo-accent);opacity:.25;
  box-shadow:0 0 10px rgba(79,146,120,.5);
  animation:eoFloatDot var(--dur,14s) ease-in-out var(--del,0s) infinite alternate
}
@keyframes eoFloatDot{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:.12}
  50%{opacity:.40}
  100%{transform:translate3d(var(--dx,18px),var(--dy,-34px),0) scale(1.15);opacity:.16}
}

.eo-atmo .eo-noise{
  position:absolute;inset:0;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size:140px 140px
}

/* ---------- 5. 影像舞台 HUD（角标 / 扫描线 / 视差） ---------- */
.hero-orb,.device-stage,.system-orb,.phone-showcase,.phone-frame,.hub-card{position:relative}
.hero-orb{background-position:center calc(56% + var(--eo-py,0px))}
.device-stage{background-position:center calc(58% + var(--eo-py,0px))}
.system-orb{background-position:center calc(50% + var(--eo-py,0px))}

.eo-hud{position:absolute;inset:0;pointer-events:none;z-index:3;--hud:rgba(255,255,255,.82)}
.phone-showcase .eo-hud,.phone-frame .eo-hud,.hub-card .eo-hud{--hud:rgba(79,146,120,.40)}
.eo-hud b{
  position:absolute;width:22px;height:22px;opacity:0;
  border:1px solid var(--hud);
  animation:eoHud .5s var(--eo-e) forwards
}
.eo-hud b:nth-child(1){top:20px;left:20px;border-right:0;border-bottom:0;animation-delay:.14s}
.eo-hud b:nth-child(2){top:20px;right:20px;border-left:0;border-bottom:0;animation-delay:.20s}
.eo-hud b:nth-child(3){bottom:20px;left:20px;border-right:0;border-top:0;animation-delay:.26s}
.eo-hud b:nth-child(4){bottom:20px;right:20px;border-left:0;border-top:0;animation-delay:.32s}
@keyframes eoHud{from{opacity:0;transform:scale(.5)}to{opacity:.85;transform:none}}

.eo-hud u{
  position:absolute;inset:0;text-decoration:none;
  background-image:linear-gradient(180deg,transparent,rgba(143,202,179,.95),transparent);
  background-repeat:no-repeat;background-size:100% 3px;
  animation:eoScan 7.5s ease-in-out .5s infinite
}
@keyframes eoScan{
  0%{background-position:0 -6px;opacity:0}
  8%{opacity:.9}
  90%{opacity:.9}
  100%{background-position:0 101%;opacity:0}
}

/* 首页取景框里的“实时读数” */
.hero-orb > p::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--eo-accent);margin-right:9px;vertical-align:middle;
  box-shadow:0 0 0 0 var(--eo-glow);animation:eoPulse 2s ease-out infinite
}
@keyframes eoPulse{
  0%{box-shadow:0 0 0 0 var(--eo-glow)}
  70%{box-shadow:0 0 0 9px rgba(79,146,120,0)}
  100%{box-shadow:0 0 0 0 rgba(79,146,120,0)}
}
.concept-tag{animation:eoRise .65s var(--eo-e) .45s backwards}
@keyframes eoRise{from{opacity:0;transform:translateY(14px)}}

/* ---------- 6. 标题 / eyebrow 细节 ---------- */
.eo-motion .eyebrow::before{
  content:"";display:inline-block;height:1px;width:0;margin-right:0;
  background:currentColor;opacity:.55;vertical-align:middle
}
.eo-motion .eyebrow.eo-in::before,
.eo-motion .eo-in .eyebrow::before{animation:eoRule .55s var(--eo-e) .1s forwards}
@keyframes eoRule{to{width:22px;margin-right:11px}}

.hero h1 span{position:relative}
.hero h1 span::after{
  content:"";position:absolute;left:.02em;right:.02em;bottom:.05em;height:.055em;
  border-radius:3px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--eo-accent-soft),var(--eo-accent))
}
.eo-motion .hero h1.eo-in span::after{animation:eoUnderline .7s var(--eo-e) .42s forwards}
@keyframes eoUnderline{to{transform:scaleX(1)}}

/* ---------- 7. 按钮 / 链接 ---------- */
.primary,.nav-cta{
  position:relative;overflow:hidden;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0);
  box-shadow:0 8px 22px rgba(79,146,120,.24);
  transition:transform .35s var(--eo-e),box-shadow .35s var(--eo-e),background .25s ease
}
.primary::after,.nav-cta::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  transform:skewX(-22deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:left .75s var(--eo-e)
}
.primary:hover,.nav-cta:hover{
  background:#397a63;
  transform:translate3d(var(--tx,0px),calc(var(--ty,0px) - 2px),0);
  box-shadow:0 16px 34px rgba(79,146,120,.38)
}
.primary:hover::after,.nav-cta:hover::after{left:130%}
.primary:active,.nav-cta:active{transform:translate3d(var(--tx,0px),0,0) scale(.97);transition-duration:.1s}

.secondary{position:relative;overflow:hidden}
.secondary svg{transition:transform .4s var(--eo-e)}
.secondary:hover svg{transform:translateX(5px)}
.secondary:hover{background:rgba(79,146,120,.06)}
.back-link svg,.world-copy a svg,.cross-link a svg,.evidence-card button svg,.product-gateway > a > svg{
  transition:transform .4s var(--eo-e)
}
.back-link:hover svg{transform:translateX(-5px)}
.world-copy a:hover svg,.cross-link a:hover svg,.evidence-card button:hover svg{transform:translateX(5px)}
.evidence-card button:hover{gap:12px}

/* ---------- 8. 卡片：跟随光斑 + 抬起 + 轻微倾斜 ---------- */
.eo-spot{position:relative;overflow:hidden}
.eo-spot::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(79,146,120,.11),transparent 68%)
}
.eo-spot:hover::before{opacity:1}
.eo-spot > *{position:relative;z-index:1}

.value{position:relative;transition:transform .55s var(--eo-e)}
.value:hover{transform:translateY(-4px)}
.value > i{transition:transform .5s var(--eo-e),background .4s ease,border-color .4s ease}
.value:hover > i,.privacy-grid article:hover i{
  transform:scale(1.1) rotate(-6deg);background:rgba(143,202,179,.16);border-color:var(--eo-accent)
}
.value::after{
  content:"";position:absolute;top:0;right:-1px;width:1px;height:100%;
  background:linear-gradient(180deg,transparent,var(--eo-accent),transparent);
  opacity:0;transition:opacity .5s ease
}
.value:hover::after{opacity:.5}

.hardware-feature{transition:transform .5s var(--eo-e),box-shadow .5s var(--eo-e),border-color .4s ease}
.hardware-feature:hover{transform:translateY(-5px);border-color:#b7d3c7;box-shadow:0 18px 40px rgba(49,88,74,.10)}
.hardware-feature i{transition:transform .5s var(--eo-e)}
.hardware-feature:hover i{transform:scale(1.12) rotate(-6deg)}

.privacy-grid article{transition:transform .5s var(--eo-e)}
.privacy-grid article:hover{transform:translateY(-5px)}
.privacy-grid i{transition:transform .5s var(--eo-e),background .4s ease,border-color .4s ease}

.evidence-card,.hub-card{transition:transform .55s var(--eo-e),box-shadow .55s var(--eo-e)}
.evidence-card:hover{box-shadow:0 34px 88px rgba(49,88,74,.16)}
.eo-tilt{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--eo-e)
}
.eo-tilt:hover{transition:transform .15s linear}

/* 产品入口卡：图片层单独缩放 */
.product-gateway > a{transition:transform .55s var(--eo-e),box-shadow .55s var(--eo-e),border-color .4s ease}
.product-gateway > a:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(49,88,74,.16)}
.product-gateway > a:first-child{background-image:none;isolation:isolate}
.product-gateway > a:first-child::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url(/assets/earthory-helmet-concept.jpg) center/cover no-repeat;
  transition:transform 1.1s var(--eo-e)
}
.product-gateway > a:first-child::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,#0b100ed6,#0b100e0a 70%)
}
.product-gateway > a:first-child:hover::before{transform:scale(1.07)}
.product-gateway > a:first-child > span,
.product-gateway > a:first-child > h2,
.product-gateway > a:first-child > p,
.product-gateway > a > svg{position:relative;z-index:2}
.product-gateway > a > svg{position:absolute}

/* ---------- 9. 个人世界模型：星座网络 ---------- */
.world-map .orb{position:relative;z-index:1}
.world-map .world-node{z-index:2;transition:transform .5s var(--eo-e),box-shadow .5s var(--eo-e)}
.world-map .world-node:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 34px rgba(53,102,83,.18)}
.world-map .world-node::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  border:1px solid var(--eo-accent);opacity:0;
  animation:eoNodePulse 3.4s ease-out var(--nd,0s) infinite
}
@keyframes eoNodePulse{
  0%{opacity:.45;transform:scale(1)}
  70%{opacity:0;transform:scale(1.28)}
  100%{opacity:0;transform:scale(1.28)}
}

.eo-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.eo-net path{
  fill:none;stroke:rgba(79,146,120,.45);stroke-width:1.1;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)
}
.eo-in-net .eo-net path{animation:eoDraw .8s var(--eo-e) var(--d,0s) forwards}
@keyframes eoDraw{to{stroke-dashoffset:0}}
.eo-net .eo-pulse{
  fill:var(--eo-accent);opacity:0;
  offset-rotate:0deg;offset-distance:0%;
  animation:eoTravel 3.6s linear var(--d,0s) infinite;
  animation-play-state:paused
}
.eo-in-net .eo-net .eo-pulse{animation-play-state:running}
@keyframes eoTravel{
  0%{offset-distance:0%;opacity:0}
  10%{opacity:.9}
  85%{opacity:.9}
  100%{offset-distance:100%;opacity:0}
}

.eo-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0}
.eo-rings i{
  position:absolute;border-radius:50%;border:1px dashed rgba(79,146,120,.22);
  width:var(--s);height:var(--s);
  animation:eoSpin var(--sp,40s) linear infinite var(--dir,normal)
}
@keyframes eoSpin{to{transform:rotate(360deg)}}

/* ---------- 10. 时间轴逐段点亮 ---------- */
.timeline{position:relative}
.timeline::after{
  content:"";position:absolute;left:-1px;top:0;width:1px;height:100%;
  background:linear-gradient(180deg,var(--eo-accent),rgba(79,146,120,0));
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.05s var(--eo-e) .1s
}
.timeline.eo-line::after{transform:scaleY(1)}
.timeline > div::before{transition:transform .5s var(--eo-e),box-shadow .5s var(--eo-e)}
.timeline > div:hover::before{transform:scale(1.35);box-shadow:0 0 0 5px rgba(79,146,120,.14)}

/* ---------- 11. 三段式原理条：数据流动 ---------- */
.principle-strip{position:relative;overflow:hidden}
.principle-strip::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(143,202,179,.14),transparent);
  animation:eoStripSweep 7s linear infinite
}
@keyframes eoStripSweep{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(390%)}
}
.principle-strip span{position:relative;opacity:.55;animation:eoStripLit 7.2s ease-in-out infinite}
.principle-strip span:nth-child(2){animation-delay:2.4s}
.principle-strip span:nth-child(3){animation-delay:4.8s}
@keyframes eoStripLit{
  0%,100%{opacity:.5}
  14%{opacity:1;text-shadow:0 0 24px rgba(143,202,179,.5)}
  36%{opacity:.5}
}
.principle-strip span + span::before{
  content:"";position:absolute;top:50%;left:-6vw;width:4vw;height:1px;
  background:linear-gradient(90deg,rgba(217,238,229,.12),rgba(143,202,179,.45))
}
.principle-strip span + span::after{
  content:"";position:absolute;top:calc(50% - 2px);left:-6vw;
  width:4px;height:4px;border-radius:50%;background:var(--eo-accent-soft);
  box-shadow:0 0 10px var(--eo-accent-soft);
  animation:eoFlowDot 2.8s linear infinite
}
.principle-strip span:nth-child(3)::after{animation-delay:1.4s}
@keyframes eoFlowDot{
  0%{transform:translateX(0);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{transform:translateX(4vw);opacity:0}
}

/* ---------- 12. 深色能力区 ---------- */
.app-capabilities{position:relative;overflow:hidden}
.app-capabilities::before{
  content:"";position:absolute;inset:-10%;pointer-events:none;
  background-image:radial-gradient(rgba(143,202,179,.20) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(58% 58% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(58% 58% at 50% 40%,#000,transparent 78%);
  animation:eoGridDrift 34s linear infinite
}
.app-capabilities::after{
  content:"";position:absolute;left:50%;top:-30%;width:70vw;height:70vw;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(79,146,120,.20),transparent 62%);
  animation:eoGlowBreath 9s ease-in-out infinite
}
@keyframes eoGlowBreath{50%{opacity:.55;transform:translateX(-50%) scale(1.12)}}
.app-capabilities > *{position:relative;z-index:1}
.cap-grid article{
  position:relative;overflow:hidden;
  transition:transform .5s var(--eo-e),border-color .4s ease,box-shadow .5s var(--eo-e)
}
.cap-grid article::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(143,202,179,.16),transparent 70%)
}
.cap-grid article > *{position:relative;z-index:1}
.cap-grid article:hover{transform:translateY(-6px);border-color:var(--eo-accent);box-shadow:0 24px 50px rgba(0,0,0,.32)}
.cap-grid article:hover::before{opacity:1}

/* ---------- 13. 影像：进场 / 悬停 / 缓慢平移 ---------- */
.story-gallery img,.evidence-thumbs img,.value small img{
  transition:transform .9s var(--eo-e),filter .9s var(--eo-e)
}
.story-gallery img:hover,.value small img:hover{transform:scale(1.02)}
.evidence-thumbs img{filter:saturate(.92)}
.evidence-thumbs img:hover{transform:scale(1.05);filter:saturate(1.06)}
.beach{animation:eoPan 30s ease-in-out infinite alternate}
@keyframes eoPan{
  0%{object-position:50% 44%}
  100%{object-position:50% 58%}
}
.phone-showcase img,.phone-frame img{animation:eoFloat 7.5s ease-in-out infinite}
@keyframes eoFloat{50%{transform:translateY(-14px)}}

/* ---------- 14. 提问框 / 检索状态 ---------- */
.ask-box{transition:border-color .35s ease,box-shadow .35s ease,transform .35s var(--eo-e)}
.ask-box:focus-within{
  border-color:var(--eo-accent);
  box-shadow:0 0 0 4px rgba(79,146,120,.10);
  transform:translateY(-2px)
}
.ask-box button{transition:transform .35s var(--eo-e),background .3s ease}
.ask-box button:hover{transform:scale(1.09);background:var(--eo-accent)}
.search-state,.answer{animation:eoPop .6s var(--eo-e)}
@keyframes eoPop{from{opacity:0;transform:translateY(12px)}}
.search-state span{
  background:linear-gradient(90deg,#4f9278,#a9dcc7,#4f9278);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:eoShimmer 1.4s linear infinite
}
@keyframes eoShimmer{to{background-position:-220% 0}}

/* ---------- 15. 水晶球环境光 ---------- */
.orb::before{
  content:"";position:absolute;inset:-8%;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,rgba(143,202,179,0),rgba(143,202,179,.42),rgba(79,146,120,.12),rgba(143,202,179,0) 62%);
  filter:blur(18px);animation:eoSpin 16s linear infinite
}
.hub-card .orb::before,.search-state .orb::before{filter:blur(10px)}

/* ---------- 16. 弹窗 ---------- */
.modal-backdrop{animation:eoFadeIn .35s ease}
@keyframes eoFadeIn{from{opacity:0}}
.modal{animation:eoModalIn .6s var(--eo-e)}
@keyframes eoModalIn{from{opacity:0;transform:translateY(26px) scale(.96)}}
.modal-close{transition:transform .35s var(--eo-e),background .3s ease}
.modal-close:hover{transform:rotate(90deg);background:#e3ebe8}
.modal input,.modal textarea{transition:border-color .3s ease,box-shadow .3s ease}
.success > svg{animation:eoPopIn .7s var(--eo-e)}
@keyframes eoPopIn{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.08)}100%{transform:none}}

/* ---------- 17. 最终 CTA ---------- */
.final-cta{position:relative;overflow:hidden}
.final-cta::before{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(143,202,179,.35),transparent 58%);
  animation:eoGlowBreath 10s ease-in-out infinite
}
.final-cta > *{position:relative;z-index:1}

/* ---------- 18. 移动端收敛 ---------- */
@media(max-width:900px){
  .eo-scrolled .nav{height:60px;padding:0 20px}
  .eo-atmo .eo-beam,.eo-atmo .eo-noise{display:none}
  .principle-strip span + span::before,
  .principle-strip span + span::after{display:none}
  .eo-hud b{width:16px;height:16px}
  .eo-hud b:nth-child(1),.eo-hud b:nth-child(2){top:14px}
  .eo-hud b:nth-child(3),.eo-hud b:nth-child(4){bottom:14px}
  .eo-hud b:nth-child(1),.eo-hud b:nth-child(3){left:14px}
  .eo-hud b:nth-child(2),.eo-hud b:nth-child(4){right:14px}
}

/* ---------- 19. 无障碍：尊重系统减弱动效 ---------- */
@media(prefers-reduced-motion:reduce){
  .eo-motion [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .eo-veil{display:none}
  .eo-atmo,.eo-hud,.eo-net,.eo-rings{display:none}
  .beach,.phone-showcase img,.phone-frame img,
  .principle-strip::after,.principle-strip span,
  .app-capabilities::before,.app-capabilities::after,
  .final-cta::before,.orb::before,.hero-orb > p::before{animation:none!important}
  .timeline::after{transform:scaleY(1)}
}