/* =============================================================================
   Dmain Animations — animations.css
   ============================================================================= */

/* ─── 1. 공통 초기 상태 (scroll/load 대기 중) ─────────────────────────────── */
.dmain-animate {
	opacity: 0;
	transition-property: opacity, transform, filter;
	transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: opacity, transform;
}

/* ─── 2. 효과별 초기 오프셋 ───────────────────────────────────────────────── */
.dmain-animate.fade-in {
	/* opacity 만 변화 */
}

.dmain-animate.fade-up {
	transform: translateY( 40px );
}

.dmain-animate.fade-down {
	transform: translateY( -40px );
}

.dmain-animate.fade-left {
	transform: translateX( -50px );
}

.dmain-animate.fade-right {
	transform: translateX( 50px );
}

.dmain-animate.zoom-in {
	transform: scale( 0.82 );
}

.dmain-animate.flash {
	/* 매우 밝은 상태에서 시작 — opacity 는 1 유지, filter 로 처리 */
	filter: brightness( 8 );
	opacity: 1;
}

/* ─── 3. blink — 독립 무한 반복 애니메이션 ──────────────────────────────── */
.dmain-animate.blink {
	opacity: 0;
	animation-name: dmain-blink;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	/* duration / delay 는 observer.js 에서 인라인으로 설정 */
}

@keyframes dmain-blink {
	0%   { opacity: 0; }
	40%  { opacity: 1; }
	60%  { opacity: 1; }
	100% { opacity: 0; }
}

/* ─── 4. is-visible — 트랜지션 완료 상태 ────────────────────────────────── */
/* .blink 는 이 클래스를 사용하지 않음 */
.dmain-animate.is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ─── 5. 접근성 — prefers-reduced-motion ────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.dmain-animate,
	.dmain-animate.blink {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		animation: none !important;
		transition: none !important;
	}
}