/* ==========================================================================
   motion.css — 入场时间轴 + 滚动驱动转场
   --------------------------------------------------------------------------
   时间轴来自官方预览视频（1920x1430, 7.05s, 40fps）逐帧还原：
     0.0s  画面中央只有一颗蓝色发光球体
     0.5s  球体炸开成树冠          ← 全片记忆点：先有球，再有树
     1.0s  树成形，根系向下蔓延
     1.5s  徽章亮起，标题首行浮现   ← 文字分层揭幕，不是一次性淡入
     2.0s  标题补全，QR 模块淡入
     2.5s  说明段带模糊推移入场
     3.0s  CTA 出现，稳定态
   落地时把 3.0s 之后的"保持"压掉，整段入场收在 ~1.35s。
   ========================================================================== */

/* ---------------- 未启动前的静止态（防止无动画闪一帧） ---------------- */
html.anim .headline .ln > i{ transform:translateY(105%); }
html.anim .badge,
html.anim .logo,
html.anim .capsule a,
html.anim .nav__actions .btn,
html.anim .qr,
html.anim .lede,
html.anim .cta-row .btn,
html.anim .login-card,
html.anim .scene2__title,
html.anim .scene2__lede,
html.anim .card{ opacity:0; }

/* ---------------- 关键帧 ---------------- */
@keyframes lineRise{
  from{ transform:translateY(105%); }
  to  { transform:translateY(0); }
}
@keyframes subIn{
  from{ opacity:0; transform:translateY(1.4vh); filter:blur(9px); }
  60% { opacity:1; }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes subInSoft{
  from{ opacity:0; transform:translateY(1.1vh); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes pillIn{
  from{ opacity:0; transform:translateY(.9vh) scale(.965); }
  to  { opacity:1; transform:none; }
}
@keyframes liftIn{
  from{ opacity:0; transform:translateY(1.0vh); }
  to  { opacity:1; transform:none; }
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes cardIn{
  from{ opacity:0; transform:translateY(4.2vh) scale(.975); filter:blur(7px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
/* logo 带一个作者写死的光学偏移（-0.6px 级别的视觉居中），关键帧把它带过去 */
@keyframes logoIn{
  from{ opacity:0; transform:translateY(1.0vh); }
  to  { opacity:1; transform:none; }
}
@keyframes badgeIn{
  0%  { opacity:0; transform:translateY(.9vh) scale(.96);
        box-shadow:0 0 0 rgba(42,107,194,0); }
  60% { opacity:1;
        box-shadow:0 0 34px rgba(42,107,194,.72), inset 0 0 22px rgba(42,107,194,.28); }
  100%{ opacity:1; transform:none;
        box-shadow:0 0 22px rgba(42,107,194,.35), inset 0 0 18px rgba(42,107,194,.14); }
}
@keyframes dotPulse{
  0%,100%{ opacity:1;   box-shadow:0 0 10px rgba(77,142,240,.95); }
  50%    { opacity:.72; box-shadow:0 0 16px rgba(77,142,240,.65); }
}

/* ---------------- 编排（html.go 触发） ---------------- */
html.go .headline .ln > i{ animation:lineRise 1.05s var(--e-reveal) both; }
html.go .headline .ln:nth-child(1) > i{ animation-delay:.52s; }
html.go .headline .ln:nth-child(2) > i{ animation-delay:.61s; }
html.go .headline .ln:nth-child(3) > i{ animation-delay:.70s; }

html.go .badge      { animation:badgeIn  .60s var(--e-soft) .40s both; }
html.go .badge__dot { animation:dotPulse 2.6s ease-in-out 1.15s infinite; }

html.go .logo            { animation:logoIn  .55s var(--e-soft) .18s both; }
html.go .capsule a       { animation:liftIn  .50s var(--e-soft) both; }
html.go .capsule a:nth-child(1){ animation-delay:.30s; }
html.go .capsule a:nth-child(2){ animation-delay:.355s; }
html.go .capsule a:nth-child(3){ animation-delay:.410s; }
html.go .capsule a:nth-child(4){ animation-delay:.465s; }
html.go .nav__actions .btn{ animation:pillIn .52s var(--e-soft) .50s both; }

html.go .qr             { animation:subInSoft .75s var(--e-reveal) .78s both; }
html.go .lede           { animation:subIn  .85s var(--e-reveal) .92s both; }
html.go .cta-row .btn   { animation:pillIn .62s var(--e-reveal) both; }
html.go .cta-row .btn:nth-child(1){ animation-delay:1.06s; }
html.go .cta-row .btn:nth-child(2){ animation-delay:1.15s; }

html.go .login-card     { animation:subInSoft .80s var(--e-reveal) .95s both; }

/* 场景二：默认静止态，由滚动进度驱动（JS 写 --p2） */
.scene2__title,.scene2__lede,.card{
  transform:translateY(calc(4.2vh * (1 - var(--p2, 0))));
}
/* 卡片 3D 鼠标跟随：视差 + 倾斜合并声明（2026-09-17），
   单独的 .card 规则会覆盖上一条视差 transform，必须合在一起 */
.card{
  transform:translateY(calc(4.2vh * (1 - var(--p2, 0))))
            rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.card:hover{
  transform:translateY(calc(4.2vh * (1 - var(--p2, 0)) - 1.30vh))
            rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  /* 悬停中 transform 用更快的过渡，倾斜跟随不拖沓；离开时回落到基础 .34s */
  transition:transform .12s ease-out, box-shadow .34s ease, border-color .3s ease, background .3s ease;
}
.scene2__title,.scene2__lede{
  opacity:calc(var(--p2, 0) * 1.6);
  filter:blur(calc(7px * (1 - var(--p2, 0))));
}

/* 首屏随滚动淡出 + 轻微上移 */
.scene1{
  opacity:calc(1 - var(--p1, 0) * 1.25);
  transform:translateY(calc(-3.4vh * var(--p1, 0)));
  pointer-events:calc(1 - var(--p1, 0));
}

/* ---------------- 滚动提示 ---------------- */
.scroll-hint{
  position:absolute;
  left:50%; bottom:2.4vh;
  transform:translateX(-50%);
  z-index:var(--z-ui);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9vh;
  font-size:.66vw;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
  pointer-events:none;
  transition:opacity .5s ease;
}
.scroll-hint::after{
  content:"";
  width:1px; height:3.6vh;
  background:linear-gradient(to bottom, rgba(255,255,255,.45), transparent);
  animation:hintDrop 2.1s ease-in-out infinite;
}
@keyframes hintDrop{
  0%  { transform:scaleY(.2); opacity:0; transform-origin:top; }
  40% { transform:scaleY(1);  opacity:1; transform-origin:top; }
  70% { transform:scaleY(1);  opacity:1; transform-origin:top; }
  100%{ transform:scaleY(.2); opacity:0; transform-origin:top; }
}
html.go .scroll-hint{ animation:fadeIn .8s ease 1.7s both; }
.scroll-hint.is-off{ opacity:0 !important; }

/* ---------------- 页面切换（登录页按钮跳到控制台时的收尾） ---------------- */
html.leaving .stage{ animation:pageOut .42s ease both; }
@keyframes pageOut{
  to{ opacity:0; transform:scale(1.015); filter:blur(4px); }
}

/* ---------------- 降级 ---------------- */
@media (prefers-reduced-motion: reduce){
  html.anim .headline .ln > i{ transform:none; }
  html.anim .badge,
  html.anim .logo,
  html.anim .capsule a,
  html.anim .nav__actions .btn,
  html.anim .qr,
  html.anim .lede,
  html.anim .cta-row .btn,
  html.anim .login-card,
  html.anim .scene2__title,
  html.anim .scene2__lede,
  html.anim .card{ opacity:1; }
  .scene2__title,.scene2__lede,.card{ transform:none; filter:none; }
  .scene2,.scene2__title,.scene2__lede{ opacity:1; }
  .scroll-hint{ display:none; }
}