/* 메탈 구름 배경 (22판, 4쪽 공통)
   - 바탕은 20판까지 쓰던 site.css 의 .bg-glow 그대로(PSPD: 직전 배경이 더 좋음). 가로결·빛 띠는 뺌
   - 그 위로 밝은 은빛·짙은 회색의 큰 흐릿한 덩어리 4개가 구름처럼 52~76초에 걸쳐 천천히 흐른다
   - 움직임은 transform 만 써서 다시 그리기 없이 합성만. 움직임 줄이기면 멈춤 */
.metal { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.metal i {
  position: absolute; width: 90vmax; height: 70vmax; border-radius: 50%;
  will-change: transform;
}
.metal i:nth-child(1) { left: -30vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 100%); animation: cloud-a 64s ease-in-out infinite alternate; }
.metal i:nth-child(2) { right: -35vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(120, 120, 120, 0.32), rgba(120, 120, 120, 0) 100%); animation: cloud-b 76s ease-in-out infinite alternate; }
.metal i:nth-child(3) { left: 10vmax; bottom: -40vmax; background: radial-gradient(closest-side, rgba(150, 150, 150, 0.28), rgba(150, 150, 150, 0) 100%); animation: cloud-c 58s ease-in-out infinite alternate; }
.metal i:nth-child(4) { right: -20vmax; bottom: -30vmax; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 100%); animation: cloud-d 52s ease-in-out infinite alternate; }
@keyframes cloud-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(48vw, 26vh, 0) scale(1.15); } }
@keyframes cloud-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-42vw, 34vh, 0) scale(0.9); } }
@keyframes cloud-c { from { transform: translate3d(0, 0, 0) scale(0.95); } to { transform: translate3d(36vw, -40vh, 0) scale(1.2); } }
@keyframes cloud-d { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-50vw, -30vh, 0) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .metal i { animation: none; }
}