@charset "utf-8";
/* ******************** 스크롤 인터랙션 / 공통 애니메이션 ******************** */

/* 스크롤 등장 (ebi.js 에서 .ani 요소에 .on 부여) */
.ani { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
.ani.on { opacity: 1; transform: none; }

.ani.ani-left  { transform: translateX(-50px); }
.ani.ani-right { transform: translateX(50px); }
.ani.ani-zoom  { transform: scale(.94); }
.ani.ani-left.on, .ani.ani-right.on, .ani.ani-zoom.on { transform: none; }

/* 모바일 — 좌우 이동은 가로스크롤을 유발하므로 세로 이동으로 대체 */
@media (max-width: 1249px) {
	html, body { overflow-x: hidden; max-width: 100%; }
	.ani.ani-left,
	.ani.ani-right { transform: translateY(40px); }
	.ani.ani-left.on,
	.ani.ani-right.on { transform: none; }
}

.ani-d1 { transition-delay: .1s; }
.ani-d2 { transition-delay: .2s; }
.ani-d3 { transition-delay: .3s; }
.ani-d4 { transition-delay: .4s; }
.ani-d5 { transition-delay: .5s; }

/* 히어로 텍스트 등장 */
@keyframes heroUp {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pulseRing {
	0%   { transform: scale(.9); opacity: .55; }
	70%  { transform: scale(1.5); opacity: 0; }
	100% { transform: scale(1.5); opacity: 0; }
}
@keyframes floatY {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}
@keyframes kenburns {
	0%   { transform: scale(1); }
	100% { transform: scale(1.12); }
}

.ani-float { animation: floatY 4s ease-in-out infinite; }

/* 접근성 — 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
	.ani { opacity: 1 !important; transform: none !important; transition: none !important; }
	* { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}