/* ============================================
   운명의파동 - 배경 레이어 시스템 (bg-layers.css)
   background < water < cloud < content
   금가루/꽃잎/안개/실크는 제외 — 구름·물결만 사용 (단순하고 확실하게 보이도록)
   ============================================ */

.bg-layers{
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  background-color: #f4efe4; /* 이미지 로딩 전 아이보리 톤 */
}

.layer{
  position: absolute;
  inset: -8%; /* 여유 공간을 둬서 translate/scale 시 가장자리가 비지 않도록 함 */
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform, opacity, background-position;
}

/* 1. 배경 — 애니메이션 없음 */
.layer-background{
  z-index: 1;
  background-image: url('/static/images/background.webp');
  background-position: center;
  inset: 0;
}

/* 2. 물결 — 가장자리에서만 보이도록 중앙은 비우고, 확실히 눈에 띄는 속도로 흐르며 숨쉬듯 확대/축소 */
.layer-water{
  z-index: 2;
  background-image: url('/static/images/water.webp');
  background-position: center bottom;
  opacity: 0.32;
  animation: waterFlow 22s ease-in-out infinite;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 30%, black 68%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 30%, black 68%);
}

/* 3. 구름 — 왼쪽에서 오른쪽으로 끊김 없이 흘러감. 가장자리에서만 보이도록 중앙은 비움 */
.layer-cloud{
  z-index: 3;
  background-image: url('/static/images/cloud.webp');
  background-repeat: repeat-x;
  background-size: auto 55%;
  background-position: 0 8%;
  opacity: 0.35;
  animation: cloudDrift 90s linear infinite, cloudFade 24s ease-in-out infinite;
  inset: 0;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 30%, black 68%);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 30%, black 68%);
}

@keyframes waterFlow{
  0%, 100% { transform: translateX(0) scale(1); }
  50%      { transform: translateX(2.5%) scale(1.05); }
}

@keyframes cloudDrift{
  0%   { background-position-x: 0%; }
  100% { background-position-x: 100%; }
}
@keyframes cloudFade{
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.42; }
}

/* 모바일: 애니메이션 부담 완화 */
@media (max-width: 768px){
  .layer-cloud{ animation-duration: 120s, 30s; }
  .layer-water{ animation-duration: 28s; }
}

/* 접근성: 모션 최소화 설정 시 전부 정지 */
@media (prefers-reduced-motion: reduce){
  .layer{ animation: none !important; }
}