/* ============================================================
   motion.css — 企业 AI 内训页的动效层（2026-10-12）
   动效方向取自 prompt-motion.com 的几条 prompt：
   · 一颗 accent 点串起每一幕（Orange dot motion system → 这里是绿点）
   · 弹簧（spring）而不是线性 tween；东西会互相反应
   · halftone 点阵场随光波 / 指针起伏（The 3D template 的「光波扫过卡片墙」）
   · kinetic type：标题逐行升起
   · 禁止：到处发光、粒子爆炸、和画面元素无关的转场
   ============================================================ */

/* ---------- 点阵场 canvas ---------- */
.field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* 文字区渐隐：桌面左半是标题与正文，网从右侧与边缘才清楚 */
.hero-stage>.field{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.38) 42%,rgba(0,0,0,.95) 62%,#000 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.38) 42%,rgba(0,0,0,.95) 62%,#000 100%)}
#custom>.field{-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 30%,rgba(0,0,0,.5) 75%,#000 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 30%,rgba(0,0,0,.5) 75%,#000 100%)}
@media(max-width:900px){.hero-stage>.field{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.2) 18%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.8) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0,rgba(0,0,0,.2) 18%,rgba(0,0,0,.2) 70%,rgba(0,0,0,.8) 100%)}}
.hero-stage{position:relative;overflow:hidden}
.hero-stage>.hero{position:relative;z-index:1}
#custom{position:relative;overflow:hidden}
#custom>.wrap{position:relative;z-index:1}

/* ---------- 标题逐行升起（kinetic type） ---------- */
.kt-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.kt-line>span{display:block;transform:translateY(112%);opacity:0}
.kt-ready .kt-line>span{animation:ktUp .9s cubic-bezier(.2,.85,.2,1.04) forwards;animation-delay:calc(var(--i,0)*.11s + .05s)}
@keyframes ktUp{to{transform:none;opacity:1}}
.kt-after{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.85,.2,1.04)}
.kt-ready .kt-after{opacity:1;transform:none}
.kt-after.d1{transition-delay:.42s}.kt-after.d2{transition-delay:.56s}.kt-after.d3{transition-delay:.7s}

/* ---------- 滚动进场（带轻微过冲的弹簧感） ---------- */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .85s cubic-bezier(.2,.9,.25,1.12);transition-delay:calc(var(--i,0)*.09s)}
[data-rv].in{opacity:1;transform:none}
[data-rv="pop"]{transform:translateY(14px) scale(.96)}
[data-rv="left"]{transform:translateX(-22px)}
[data-rv="right"]{transform:translateX(22px)}

/* ---------- 流程 chips：逐个弹出 + 箭头上有绿点跑 ---------- */
.flow span{opacity:0;transform:scale(.82);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.9,.3,1.35);transition-delay:calc(var(--j,0)*.08s + .25s)}
.in .flow span,.flow.in span{opacity:1;transform:none}
.flow i{position:relative;display:inline-block;width:16px;height:12px;color:transparent!important}
.flow i::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#c8d4cc}
.flow i::after{content:"";position:absolute;top:50%;left:0;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--sig-2);transform:translateX(-5px);animation:dotRun 2.4s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--j,0)*.3s)}
@keyframes dotRun{0%{transform:translateX(-5px);opacity:0}15%{opacity:1}70%{transform:translateX(16px);opacity:1}85%{opacity:0}100%{transform:translateX(16px);opacity:0}}

/* ---------- Hero 内训日卡：绿点沿时间轴走 ---------- */
.agenda{position:relative}
.agenda::before{content:"";position:absolute;left:29px;top:22px;bottom:22px;width:1px;background:linear-gradient(#dfe4dd,#dfe4dd 70%,transparent)}
.agenda li{position:relative;padding-left:24px;transition:background .4s ease}
.agenda time{position:relative;z-index:1;background:#fff;padding-right:6px}
.agenda li.is-on time{background:transparent}
.agenda li::before{content:"";position:absolute;left:6px;top:19px;width:7px;height:7px;border-radius:50%;background:#d7ddd5;transition:background .35s ease,transform .5s cubic-bezier(.2,.9,.3,1.4)}
.agenda li.is-on::before{background:var(--sig-2);transform:scale(1.5)}
.agenda li.is-on{background:linear-gradient(90deg,#edf8f2,transparent 70%)}
.agenda li.is-on time{color:var(--sig-3);font-weight:600}
.agenda li.is-on>div{color:var(--ink)}
.agenda-dot{position:absolute;left:26px;top:0;width:7px;height:7px;border-radius:50%;background:var(--sig-2);box-shadow:0 0 0 4px #1dab8b22;z-index:0;will-change:transform}
.hero-card .top b{position:relative;padding-left:14px}
.hero-card .top b::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--sig-2);animation:livePulse 2.2s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 #1dab8b55}60%{box-shadow:0 0 0 7px #1dab8b00}}

/* ---------- 4 步流程：顶线上一颗绿点从 01 走到 04 ---------- */
.steps{position:relative}
.steps-dot{position:absolute;top:-5px;left:0;width:10px;height:10px;border-radius:50%;background:var(--sig-2);box-shadow:0 0 0 4px #1dab8b22;z-index:2;opacity:0;will-change:transform}
.steps-dot.show{opacity:1}
.steps li{transition:border-color .4s ease}
.steps li.is-on{border-top-color:var(--ink)}
.steps li.is-on h3{color:var(--sig-3)}
@media(max-width:700px){.steps-dot{left:-5px;top:0}}

/* ---------- 痛点编号：绿点 + 数字 ---------- */
.problems article>span{display:inline-flex;align-items:center;gap:8px}
.problems article>span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sig-2);transform:scale(0);transition:transform .5s cubic-bezier(.2,.9,.3,1.6);transition-delay:calc(var(--i,0)*.09s + .3s)}
.problems article.in>span::before{transform:scale(1)}

/* ---------- 数字滚动 ---------- */
.stat b{font-variant-numeric:tabular-nums}

/* ---------- 按钮：箭头随 hover 滑出 ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;left:-30%;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,#ffffff33,transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:120%}

/* ---------- 课程卡 hover：轻微抬起、编号点亮 ---------- */
.course{transition:transform .5s cubic-bezier(.2,.9,.3,1.1),box-shadow .5s ease}
.course:hover{transform:translateY(-4px);box-shadow:0 24px 50px #1a2c2214}
.custom{transition:transform .5s cubic-bezier(.2,.9,.3,1.1),border-color .4s ease}
.custom:hover{transform:translateY(-3px);border-color:#3ddc9766}


/* ---------- 「查看全部」按钮：holo 呼吸圈 ---------- */
@property --holo{syntax:'<angle>';inherits:false;initial-value:0deg}
.work-more .btn{position:relative;overflow:visible;background:var(--paper-2);border-color:transparent;isolation:isolate;animation:holoBreath 3.2s ease-in-out infinite}
.work-more .btn::before{content:"";position:absolute;inset:-3px;border-radius:13px;padding:3px;z-index:-1;
  background:conic-gradient(from var(--holo),#1dab8b,#3ddc97,#c9ffe6,#b8965a,#3ddc97,#1dab8b);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:holoSpin 4s linear infinite;filter:saturate(1.1)}
.work-more .btn::after{display:none}
@keyframes holoSpin{to{--holo:360deg}}
@keyframes holoBreath{0%,100%{box-shadow:0 0 0 0 rgba(61,220,151,.0),0 0 18px 0 rgba(61,220,151,.18)}50%{box-shadow:0 0 0 9px rgba(61,220,151,.10),0 0 32px 4px rgba(61,220,151,.38)}}
.work-more .btn:hover{background:#fff}
@media(prefers-reduced-motion:reduce){.work-more .btn{animation:none}.work-more .btn::before{animation:none}}

/* ---------- 减少动态 ---------- */
@media(prefers-reduced-motion:reduce){
  .kt-line>span{transform:none;opacity:1;animation:none}
  .kt-after{opacity:1;transform:none;transition:none}
  [data-rv]{opacity:1;transform:none;transition:none}
  .flow span{opacity:1;transform:none;transition:none}
  .flow i::after{animation:none;transform:translateX(5px)}
  .agenda-dot,.steps-dot,.field{display:none}
  .hero-card .top b::before{animation:none}
  .btn::after{display:none}
}