/* ========================================
   auimlab 首页 — 动效增强与性能收口
   ======================================== */

/* Hero 滚动视差由单个 rAF 循环写 CSS 变量，不再创建 4 个 ScrollTrigger。 */
#section-hero {
  --hero-parallax-y: 0px;
  --hero-parallax-scale: 1;
  --hero-content-y: 0px;
  --hero-content-opacity: 1;
  --hero-overlay-opacity: 1;
  --hero-sound-opacity: 1;
}
#section-hero .hero-stage video {
  /* 2026-08-09 §hero-video-1to1: 不再 scale, 只 translate Y parallax.
     视频保持 1:1 原始尺寸, 滚动时只上下平移 (transform: translate3d).
     之前 scale(var(--hero-parallax-scale)) 在 progress=1 时放大 12%,
     即使 .hero-stage 有 overflow:hidden, 部分浏览器 transform + overflow 组合
     表现不一致, 导致视频视觉上"溢出" hero 容器. */
  transform: translate3d(0, var(--hero-parallax-y), 0);
  will-change: transform;
}
#section-hero .hero-text {
  transform: translate3d(0, var(--hero-content-y), 0);
  opacity: var(--hero-content-opacity);
  will-change: transform, opacity;
}
#section-hero .hero-overlay { opacity: var(--hero-overlay-opacity); }
#section-hero .hero-sound-toggle {
  opacity: var(--hero-sound-opacity);
  pointer-events: var(--hero-sound-events, auto);
}
body:not(.hero-ready) #section-hero .hero-sound-toggle {
  opacity: 0;
  /* 2026-08-06 修: 之前 pointer-events: none 让用户点了没反应 (按钮失效)
     改成不阻止事件 — 用户想听声音随时点, 不必等 hero-ready
     视觉隐藏 (opacity 0) 已经够, 不影响布局 */
  pointer-events: auto;
}

/* Demo 展开/结果切换时使用轻量 CSS 动画。 */
.paint-demo:not([hidden]) {
  animation: paint-demo-reveal 520ms cubic-bezier(.22, 1, .36, 1) both;
}
.paint-demo-loading,
.paint-demo-result {
  animation: paint-demo-content-in 420ms cubic-bezier(.22, 1, .36, 1) both;
}
.paint-demo-progress-bar {
  width: 100%;
  transform: scaleX(var(--paint-progress, 0));
  transform-origin: left center;
  will-change: transform;
  transition: transform 180ms ease-out;
}
@keyframes paint-demo-reveal {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes paint-demo-content-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* 所有首页循环动画统一服从系统“减少动态效果”。 */
@media (prefers-reduced-motion: reduce) {
  #section-hero .hero-stage video,
  #section-hero .hero-text,
  #section-hero .hero-overlay,
  #section-hero .hero-sound-toggle {
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
  .hero-sound-toggle,
  .canvas-tile,
  .nav-progress-fill,
  .paint-demo-spinner,
  .sr-spinner,
  .paint-demo:not([hidden]),
  .paint-demo-loading,
  .paint-demo-result {
    animation: none !important;
    transition: none !important;
  }
  .paint-demo-progress-bar {
    transform: scaleX(var(--paint-progress, 1));
    transition: none !important;
    will-change: auto;
  }
}

@media (max-width: 768px) {
  #section-hero .hero-stage video { will-change: auto; }
  .paint-demo:not([hidden]) { animation-duration: 360ms; }
}