@charset "utf-8";

:root {
	--size: 0.2; 

	--frame-step: 400px; 
	--cut-width: 390px;
	--move-left: 34px;  

	--squirrel-height: 480px; 
	--scene-speed: 15s; 
	--sprite-speed: 0.5s;

	--start-left: -150px; 
	/* 도토리가 추가되어 전체 길이가 길어졌으므로 오른쪽 끝 위치를 조금 더 당겼습니다 */
	--end-left: calc(100vw - 300px); 

	/* ★ 도토리 전용 설정 ★ */
	--acorn-size: 100px; /* 도토리 크기 */
	--acorn-distance: 150px; /* 다람쥐 코앞에서 얼마나 떨어질지 (간격) */
	--acorn-speed: 1.2s; /* 도토리가 데굴데굴 구르는 속도 */
}

.squirrel-runner {
	position: absolute;
	left: var(--start-left);

	transform-origin: top center; 

	animation: 
		move-run calc(var(--scene-speed) * 2) linear infinite,
		flip-direction calc(var(--scene-speed) * 2) linear infinite;
	}

.squirrel-sprite {
	width: var(--cut-width); 
	height: var(--squirrel-height);
	background-image: url('/images/tori/main/chipmunk.png'); 
	background-repeat: no-repeat;
	background-size: calc(var(--frame-step) * 4) 100%;

	animation: sprite-run var(--sprite-speed) steps(4) infinite;
}

.acorn {
	width: var(--acorn-size);
	height: var(--acorn-size);
	background-image: url('/images/tori/main/acorn.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;

	position: absolute;
	bottom: 60px;
	/* 다람쥐 그림 폭(cut-width) + 원하는 간격(acorn-distance)만큼 오른쪽에 배치 */
	left: calc(var(--cut-width) + var(--acorn-distance)); 

	/* 데굴데굴 회전 애니메이션 */
	animation: roll-acorn var(--acorn-speed) linear infinite;
}

@keyframes sprite-run {
	from { background-position: var(--move-left) 0; }
	to { background-position: calc((-4 * var(--frame-step)) + var(--move-left)) 0; }
}

/* 도토리 회전 키프레임 (0도에서 360도로 뱅글뱅글) */
@keyframes roll-acorn {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes move-run {
	0%   { left: var(--start-left); } 
	50%  { left: var(--end-left); }   
	100% { left: var(--start-left); } 
}

@keyframes flip-direction {
	0%, 49.99% { transform: scale(var(--size)) scaleX(1); }  
	50%, 99.99% { transform: scale(var(--size)) scaleX(-1); } 
	100% { transform: scale(var(--size)) scaleX(1); } 
}