/* 学见官网 · 动效层
   原则：失败开放。只有 JS 成功执行并给 html 加上 .reveal-ready 后，
   元素才会进入隐藏初态；JS 不执行时内容直接可见。 */

/* 首屏标题逐字入场 */
html.reveal-ready .hero__title .ch {
  opacity: 0;
  transform: translateY(0.42em) rotate(2deg);
  animation: char-up 900ms var(--ease-out) forwards;
  animation-delay: var(--char-delay, 0ms);
}

@keyframes char-up {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

/* 首屏其余元素 */
html.reveal-ready .hero__badge,
html.reveal-ready .hero__slogan,
html.reveal-ready .hero__desc,
html.reveal-ready .hero__actions,
html.reveal-ready .hero__meta,
html.reveal-ready .hero__visual {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 800ms var(--ease-out) forwards;
  animation-delay: var(--rise-delay, 0ms);
}

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* 笔锋描线 */
.brush__stroke {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: brush-draw 1200ms var(--ease-out) 260ms forwards;
}

@keyframes brush-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* 滚动揭示 */
html.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 620ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 620ms var(--ease-out) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 分块交错 */
html.reveal-ready .reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}

html.reveal-ready .reveal-group.is-in > * {
  opacity: 1;
  transform: none;
}

html.reveal-ready .reveal-group.is-in > *:nth-child(1) { transition-delay: 0ms; }
html.reveal-ready .reveal-group.is-in > *:nth-child(2) { transition-delay: 90ms; }
html.reveal-ready .reveal-group.is-in > *:nth-child(3) { transition-delay: 180ms; }
html.reveal-ready .reveal-group.is-in > *:nth-child(4) { transition-delay: 270ms; }
html.reveal-ready .reveal-group.is-in > *:nth-child(5) { transition-delay: 360ms; }
html.reveal-ready .reveal-group.is-in > *:nth-child(6) { transition-delay: 450ms; }

/* 手机模型悬浮 */
@media (prefers-reduced-motion: no-preference) {
  .phone {
    animation: float 7s ease-in-out infinite;
  }

  .hero__hint::after {
    animation: hint-drift 2.6s ease-in-out infinite;
  }
}

@keyframes float {
  0%, 100% { transform: translateY(-6px) rotate(-0.6deg); }
  50% { transform: translateY(8px) rotate(0.6deg); }
}

@keyframes hint-drift {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(1.15); }
}

/* 减弱动效：全部降级为直出 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.reveal-ready .hero__title .ch,
  html.reveal-ready .hero__badge,
  html.reveal-ready .hero__slogan,
  html.reveal-ready .hero__desc,
  html.reveal-ready .hero__actions,
  html.reveal-ready .hero__meta,
  html.reveal-ready .hero__visual,
  html.reveal-ready .reveal,
  html.reveal-ready .reveal-group > * {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .brush__stroke {
    stroke-dashoffset: 0;
    animation: none;
  }

  .phone {
    animation: none;
  }

  .btn,
  .pillar,
  .feature__glyph,
  .qr {
    transition: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}