/* ============================================================
   Motion layer — entrance, reveal, parallax, hover polish.
   仅在 html.motion-ok 存在时生效（由 head 内联脚本按
   prefers-reduced-motion 判断后添加），不改动任何原有样式。
   全部使用 transform / opacity，手机端同样流畅。
   ============================================================ */

/* ---------- 1. 首屏分层入场 ---------- */

/* 初始隐藏（JS 添加 body.hero-enter 后播放关键帧；入场结束 JS 加
   body.hero-done 解除隐藏。若 JS 失效，head 脚本会在 2.5s 后移除
   motion-ok，页面直接静态呈现） */
html.motion-ok body:not(.hero-done) .site-header,
html.motion-ok body:not(.hero-done) .hero-content > *,
html.motion-ok body:not(.hero-done) .hero-stamp,
html.motion-ok body:not(.hero-done) .hero-bottom,
html.motion-ok body:not(.hero-done) .hero-image-note { opacity: 0; }

@keyframes anim-header-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes anim-rise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes anim-stamp {
  from { opacity: 0; transform: rotate(6deg) translateY(22px) scale(.92); }
  to   { opacity: 1; transform: rotate(6deg) translateY(0) scale(1); }
}
@keyframes anim-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes anim-hero-zoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

html.motion-ok body.hero-enter .site-header {
  animation: anim-header-in .8s cubic-bezier(.22, .61, .36, 1) .05s both;
}
html.motion-ok body.hero-enter .hero-eyebrow {
  animation: anim-rise .9s cubic-bezier(.22, .61, .36, 1) .20s both;
}
html.motion-ok body.hero-enter .hero h1 {
  animation: anim-rise 1s cubic-bezier(.22, .61, .36, 1) .34s both;
}
html.motion-ok body.hero-enter .hero-description {
  animation: anim-rise .9s cubic-bezier(.22, .61, .36, 1) .50s both;
}
html.motion-ok body.hero-enter .hero-actions {
  animation: anim-rise .9s cubic-bezier(.22, .61, .36, 1) .64s both;
}
html.motion-ok body.hero-enter .hero-stamp {
  animation: anim-stamp .9s cubic-bezier(.22, .61, .36, 1) .78s both;
}
html.motion-ok body.hero-enter .hero-bottom {
  animation: anim-rise .9s cubic-bezier(.22, .61, .36, 1) .88s both;
}
html.motion-ok body.hero-enter .hero-image-note {
  animation: anim-fade .8s ease 1s both;
}
/* 首屏氛围图一次性的轻微推近（hero-enter 3.4s 后由 JS 移除，
   之后手动切换场景不会重播） */
html.motion-ok body.hero-enter .hero .scene-image.is-active {
  animation: anim-hero-zoom 2.4s cubic-bezier(.25, .6, .3, 1) both;
}

/* ---------- 2. 滚动渐显 ---------- */
/* rv-ready 由 JS 在确认 IntersectionObserver 可用后添加，
   避免老浏览器内容被隐藏 */
html.motion-ok.rv-ready .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--rvd, 0ms);
  will-change: opacity, transform;
}
html.motion-ok.rv-ready .reveal.rv-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 3. 图片轻微视差（缓冲边距，防止位移露边） ---------- */
html.motion-ok .hero-scenes { inset: -12% 0; }
html.motion-ok .gather-photo { height: 112%; top: -6%; }
html.motion-ok .about-frame img { position: relative; height: 112%; top: -6%; }

/* ---------- 4. 照片墙悬停增强（仅支持悬停的设备） ---------- */
@media (hover: hover) and (pointer: fine) {
  html.motion-ok .gallery-item { transition: box-shadow .45s ease; }
  html.motion-ok .gallery-item:hover { box-shadow: 0 24px 48px #164c5340; }
  html.motion-ok .gallery-item:hover img { transform: scale(1.06) translateY(-4px); filter: saturate(1.1); }
  html.motion-ok .gallery-item figcaption { transition: transform .45s ease; }
  html.motion-ok .gallery-item:hover figcaption { transform: translateY(-5px); }
  html.motion-ok .gallery-item figcaption span { transition: color .45s ease; }
  html.motion-ok .gallery-item:hover figcaption span { color: #ffd98a; }
}