/* =========================
   WIND EFFECT LAYER
   ========================= */

/* 💨 바람이 지나가는 영역 컨테이너 */
.wind-layer {
  position: absolute;
  top: 20vh;          /* 바람 띠 위치 – 필요하면 숫자만 조정 */
  left: 0;
  width: 100vw;
  height: 44vh;       /* 세로 범위 */
  pointer-events: none;
  overflow: hidden;
  z-index: 3;         /* tree 위, 버블 아래/위는 상황 보고 조정 */
  mix-blend-mode: screen;  /* 배경이랑 밝게 섞이게 */
  display: none;
}

.wind-gust {
  position: absolute;
  left: -50vw;
  top: var(--wind-y, 50%);
  width: var(--wind-width, 70vw); /* 길이 증가 */
  height: var(--wind-thick, 28px); 
  opacity: 0;

  /* 부드러운 색 (하이라이트 → 흐림) */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.9) 0%,
    rgba(230,250,255,0.6) 25%,
    rgba(160,220,240,0.4) 60%,
    transparent 100%
  );

  filter: blur(7px);

  /* ⭐ 핵심! S자 곡선 모양으로 바람을 잘라내기 */
  clip-path: path(
    "M 0 50 
     C 20 0, 40 100, 60 50 
     C 80 0, 100 100, 120 50 
     L 120 100 
     L 0 100 Z"
  );

  animation: wind-s-curve var(--wind-duration, 9s) linear infinite;
  animation-delay: var(--wind-delay, 0s);
}

@keyframes wind-s-curve {
  0%   { transform: translateX(0)     rotate(-3deg); opacity: 0; }
  10%  { opacity: 0.7; }
  40%  { transform: translateX(70vw)  rotate(-1deg); opacity: 1; }
  70%  { opacity: 0.7; }
  100% { transform: translateX(140vw) rotate(0deg); opacity: 0; }
}

.wind-gust::before,
.wind-gust::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 20% 50%,
    rgba(255,255,255,0.7) 0%,
    rgba(220,255,250,0.4) 35%,
    transparent 80%
  );
  filter: blur(8px);
}

.wind-gust::before {
  transform: translateY(-8px) skewY(-12deg); /* 윗줄 */
}

.wind-gust::after {
  transform: translateY(8px) skewY(-6deg);   /* 아랫줄 */
  opacity: 0.7;
}

/* 바람 이동 애니메이션 */
@keyframes wind-move {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    transform: translateX(150vw);  /* 오른쪽 끝까지 쭉 지나가고 */
    opacity: 0;
  }
}