/* motion/hero.css — hero 文案错峰、背景光晕呼吸、演示窗倾斜/视差。
   动画只挂在 html.has-motion 上：无 JS 时没有该类，文案保持可见。 */

/* -------------------------------------------------------------------------- */
/* 0. 定位上下文：styles.css 的 .hero 无 position，光晕层需要 absolute 参照。   */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
}

.hero .control-window {
  --parallax-y: 0px;
}

/* -------------------------------------------------------------------------- */
/* A. 文案二级错峰：父级 .reveal.is-visible 负责整块淡入；这里只做子元素入场。 */
/*    延迟 0/90/180/270/360/450ms，总量 450ms ≤ 500ms。                        */
/* -------------------------------------------------------------------------- */

html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .eyebrow,
html.has-motion:not(.motion-reduced) .hero-copy.is-visible > h1 > .hero-line,
html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .hero-lede,
html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .hero-actions,
html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .hero-facts {
  animation: hero-copy-in 0.6s ease-out both;
}

html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .eyebrow {
  animation-delay: 0ms;
}

html.has-motion .hero-copy > h1 > .hero-line {
  display: inline-block;
}

html.has-motion:not(.motion-reduced) .hero-copy.is-visible > h1 > .hero-line:first-of-type {
  animation-delay: 90ms;
}

html.has-motion:not(.motion-reduced) .hero-copy.is-visible > h1 > .hero-line.hero-accent {
  animation-delay: 180ms;
}

html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .hero-lede {
  animation-delay: 270ms;
}

html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .hero-actions {
  animation-delay: 360ms;
}

html.has-motion:not(.motion-reduced) .hero-copy.is-visible > .hero-facts {
  animation-delay: 450ms;
}

@keyframes hero-copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* -------------------------------------------------------------------------- */
/* B. 背景光晕：两团低调 mint 光斑，合成器级 transform/opacity 呼吸。          */
/* -------------------------------------------------------------------------- */

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 55rem;
  height: 55rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.hero::before {
  top: -16rem;
  right: -14rem;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--mint-strong) 5%, transparent),
    transparent 68%
  );
  opacity: 0.72;
}

.hero::after {
  bottom: -20rem;
  left: -18rem;
  width: 48rem;
  height: 48rem;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--mint) 4%, transparent),
    transparent 70%
  );
  opacity: 0.55;
}

html.has-motion:not(.motion-reduced) .hero::before {
  animation: hero-aura-a 18s ease-in-out infinite alternate;
}

html.has-motion:not(.motion-reduced) .hero::after {
  animation: hero-aura-b 22s ease-in-out infinite alternate;
}

@keyframes hero-aura-a {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.55;
  }
  to {
    transform: translate3d(3.5%, 5%, 0);
    opacity: 0.88;
  }
}

@keyframes hero-aura-b {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.42;
  }
  to {
    transform: translate3d(-4.5%, -3.5%, 0);
    opacity: 0.72;
  }
}

/* -------------------------------------------------------------------------- */
/* C. 演示窗倾斜：移动中不过渡 transform（覆盖 .reveal 的 transform transition） */
/*    回正时靠 .tilt-settle；视差位移由 JS 写入 transform，并读取 --parallax-y。 */
/* -------------------------------------------------------------------------- */

html.has-motion .hero .control-window.tilt-ready {
  transform-origin: center center;
  box-shadow: var(--shadow), 0 18px 56px color-mix(in srgb, var(--mint-strong) 8%, transparent);
  transition: box-shadow 0.45s ease;
}

html.has-motion .hero .control-window.tilt-ready:hover {
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.34), 0 16px 44px color-mix(in srgb, var(--mint-strong) 12%, transparent);
}

html.has-motion .hero .control-window.tilt-ready.tilt-settle {
  transition: box-shadow 0.45s ease, transform 0.5s ease;
}

/* -------------------------------------------------------------------------- */
/* 降级：减少动态效果 / 窄屏缩小光晕并停动画。                                 */
/* -------------------------------------------------------------------------- */

html.motion-reduced .hero::before,
html.motion-reduced .hero::after {
  animation: none;
}

html.has-motion.motion-reduced .hero-copy.is-visible > .eyebrow,
html.has-motion.motion-reduced .hero-copy.is-visible > h1 > .hero-line,
html.has-motion.motion-reduced .hero-copy.is-visible > .hero-lede,
html.has-motion.motion-reduced .hero-copy.is-visible > .hero-actions,
html.has-motion.motion-reduced .hero-copy.is-visible > .hero-facts {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (max-width: 760px) {
  /* 与 styles.css 中 h1 br { display:none } 对齐，避免 inline-block 把标题拆成两行。 */
  html.has-motion .hero-copy > h1 > .hero-line {
    display: inline;
  }

  .hero::before,
  .hero::after {
    width: 22rem;
    height: 22rem;
    animation: none;
  }

  .hero::before {
    top: -8rem;
    right: -10rem;
    opacity: 0.45;
  }

  .hero::after {
    bottom: -10rem;
    left: -12rem;
    opacity: 0.32;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.has-motion .hero-copy.is-visible > .eyebrow,
  html.has-motion .hero-copy.is-visible > h1 > .hero-line,
  html.has-motion .hero-copy.is-visible > .hero-lede,
  html.has-motion .hero-copy.is-visible > .hero-actions,
  html.has-motion .hero-copy.is-visible > .hero-facts {
    opacity: 1;
    transform: none;
    animation: none;
  }

  html.has-motion .hero::before,
  html.has-motion .hero::after {
    animation: none;
  }
}