/* 
 * 엘라스쿨 히어로 섹션 캐릭터 애니메이션
 * 세 캐릭터가 생동감 있게 움직입니다
 */

/* 히어로 섹션의 메인 이미지에 애니메이션 적용 */
/* 첫 번째 섹션의 큰 이미지를 자동 감지 */
section:first-of-type img,
div[class*="hero"] img,
div[class*="section"]:first-child img {
  animation: hero-float 3s ease-in-out infinite;
  transform-origin: center center;
}

/* 부드러운 위아래 움직임 (떠다니는 효과) */
@keyframes hero-float {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.02);
  }
}

/* 캐릭터가 있는 이미지에 특별한 3단계 애니메이션 */
/* 크기가 큰 이미지 (메인 히어로 이미지)를 타겟 */
img[width]:not([width="16"]):not([width="24"]):not([width="32"]),
img[style*="width"]:not([style*="width: 16"]):not([style*="width: 24"]) {
  animation: character-bounce 4s ease-in-out infinite;
  transition: transform 0.3s ease-out;
}

/* 바운스 + 좌우 흔들림 효과 */
@keyframes character-bounce {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-12px) translateX(-3px) rotate(-1deg);
  }
  50% {
    transform: translateY(-5px) translateX(0px) rotate(0deg);
  }
  75% {
    transform: translateY(-12px) translateX(3px) rotate(1deg);
  }
}

/* 마우스 호버 시 더 활발한 움직임 */
img:hover {
  animation: character-excited 1s ease-in-out infinite !important;
  cursor: pointer;
}

@keyframes character-excited {
  0%, 100% {
    transform: translateY(0px) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) scale(1.05) rotate(-3deg);
  }
  50% {
    transform: translateY(-10px) scale(1.08) rotate(0deg);
  }
  75% {
    transform: translateY(-20px) scale(1.05) rotate(3deg);
  }
}

/* 부드러운 전환 효과 */
img {
  will-change: transform;
  backface-visibility: hidden;
}

/* 특정 클래스가 있는 이미지에 더 강한 효과 */
.hero-image,
.main-image,
.featured-image,
[class*="hero"] img:first-child {
  animation: hero-character-wave 5s ease-in-out infinite;
}

/* 손 흔드는 듯한 효과 */
@keyframes hero-character-wave {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
  }
  10% {
    transform: translateY(-8px) translateX(-5px) rotate(-2deg) scale(1.02);
  }
  20% {
    transform: translateY(-15px) translateX(0px) rotate(0deg) scale(1.04);
  }
  30% {
    transform: translateY(-8px) translateX(5px) rotate(2deg) scale(1.02);
  }
  40% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
  }
  /* 잠시 쉬기 */
  50%, 90% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
  }
}

/* 모바일 최적화 - 움직임 줄이기 */
@media (max-width: 768px) {
  img {
    animation-duration: 4s !important;
  }
  
  @keyframes character-bounce {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-8px);
    }
  }
}

/* 성능 최적화 */
@media (prefers-reduced-motion: reduce) {
  img {
    animation: none !important;
  }
}

/* 페이지 로드 시 특별한 등장 애니메이션 */
img.hero-entrance {
  animation: entrance-bounce 1.5s ease-out;
}

@keyframes entrance-bounce {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1.05);
  }
  70% {
    transform: translateY(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}




/* 구름 이미지(image-9) 전용 수정: 너무 높이 뜨지 않게 */
img.image-9 {
  animation: cloud-gentle-float 4s ease-in-out infinite !important;
  transform-origin: bottom center;
}

@keyframes cloud-gentle-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px); /* -12px, -15px보다 훨씬 적게 이동 */
  }
}