/* ampelman.css - 이 파일만 있으면 어디든 암펠만 설치 가능! */

/* 1. 위치 및 컨테이너 설정 */
.ampelman-container {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 64px;
    height: 64px;
    z-index: 20001;
    cursor: pointer;
    perspective: 1000px;
}

/* 2. 클릭 효과 */
.ampelman-container:active {
    transform: scale(0.95);
}

/* 3. 이미지 공통 스타일 */
.nav-icon {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.nav-green {
  background-image: url('../assets/greenlight.png');


  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotateY(0deg);
  z-index: 2;
}

.nav-red {
 background-image: url('../assets/redlight.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotateY(180deg);
}

/* 6. 호버 애니메이션 */
.ampelman-container:hover .nav-green {
    transform: rotateY(180deg);
}
.ampelman-container:hover .nav-red {
    transform: rotateY(360deg);
}