/* ==========================================================================
 * components/animations.css — 内嵌 SVG 插画用的公共关键帧
 *
 * 这些动画由 hero / moments 两个 section 内的内联 SVG 元素复用，
 * 因此独立于具体 section 存放，改动会影响两处插画。
 * ========================================================================== */

/* 云层浮动 */
@keyframes floatSlow {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(18px); }
}

/* 落日呼吸 */
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.05); opacity: 0.96; }
}

/* 竹影摇曳 */
@keyframes swayBamboo {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2.5deg); }
}

/* 细雨飘落 */
@keyframes rainFall {
  0% { transform: translate(6px, -14px); opacity: 0; }
  50% { opacity: 0.7; }
  100% { transform: translate(-8px, 28px); opacity: 0; }
}

.svg-cloud { animation: floatSlow 9s ease-in-out infinite; }
.svg-sun { transform-box: fill-box; transform-origin: center; animation: pulseSoft 6s ease-in-out infinite; }
.svg-bamboo { transform-origin: 80px 250px; animation: swayBamboo 5.5s ease-in-out infinite; }
.svg-rain-1 { animation: rainFall 1.8s linear infinite; }
.svg-rain-2 { animation: rainFall 1.8s 0.9s linear infinite; }