/********************
** intro image swing (pivot: top-left, rotate+translate)
********************/
.mainIntroImg1{
  transform-origin: 0 0;           /* left top 고정점 */
  animation: introSwing 2.4s ease-in-out infinite;
  will-change: transform;
  display: block;                   /* 이미지 주로 block 사용 권장 */
}

@keyframes introSwing{
    0%   { transform:  rotate(0); }
    50%  { transform:  rotate(4deg); }
    100% { transform:  rotate(0); }
}

/********************
** motion reduce (접근성)
********************/
@media (prefers-reduced-motion: reduce){
  .mainIntroImg1{ animation: none; }
}

/********************
** (옵션) 순수 좌우 이동만, 회전 없이
********************/
.mainIntroImg1.is-translate{
  transform-origin: 0 0;
  animation: introShake 2.0s ease-in-out infinite;
  will-change: transform;
}

@keyframes introShake{
  0%   { transform: translateX(0); }
  25%  { transform: translateX(8px); }
  50%  { transform: translateX(0); }
  75%  { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}




/********************
** edu image swing (pivot: center center)
********************/
.mainEduImg {
    transform-origin: top center;   /* 중앙 고정점 */
    animation: eduSwing 2.4s ease-in-out infinite;
    will-change: transform;
    display: block;
  }
  
  @keyframes eduSwing {
    0%   { transform:  rotate(0); }
    50%  { transform:  rotate(4deg); }
    100% { transform:  rotate(0); }
  }
  
  /********************
  ** motion reduce (접근성)
  ********************/
  @media (prefers-reduced-motion: reduce){
    .mainEduImg { animation: none; }
  }
  

  /********************
** edu tuna image swing (translate 유지 + 흔들림)
********************/
.mainEduTuna {
    position: absolute;                  /* 중앙 배치라고 가정 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    /* 기본 위치 유지 */
    transform-origin: center center;
    animation: eduTunaShake 2.2s ease-in-out infinite;
    will-change: transform;
  }
  
  @keyframes eduTunaShake {
    0%   { transform: translate(-50%, -50%) rotate(0); }
    50%  { transform: translate(-50%, -50%) rotate(4deg); }
    100% { transform: translate(-50%, -50%) rotate(0); }
  }