/* 已确认的首屏动效；仅作用于首页插画和标题。 */
.hero-motion #hero-title { font-weight: 600; -webkit-text-stroke: .22px currentColor; }
.hero-motion .motion-canvas { position: absolute; inset: 0; z-index: -3; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.hero-motion.scene-ready .motion-canvas { opacity: 1; }
.hero-motion.scene-ready .hero-scenery { visibility: hidden; }
.hero-motion .island { will-change: translate; }
.hero-motion #hero-title > span { will-change: transform, opacity; }
.hero-motion :is(.hero-scroll, .island-map) { will-change: opacity; }
.hero-motion .hero-scroll { color: #173f5f; }
.hero-motion .hero-scroll > span:last-child { animation: none; }
.hero-motion[data-motion-phase="clouds-only"] :is(.island, #hero-title > span, .hero-scroll, .island-map) { will-change: auto; }
:root[data-theme="dark"] .hero-motion .motion-canvas { filter: brightness(.48) saturate(.6); }
@media (max-width: 760px) {
  .hero-motion #hero-title { -webkit-text-stroke: .12px currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion :is(.island, #hero-title > span, .hero-scroll, .island-map) { will-change: auto; }
}