/* CHANGE 2027 키 비주얼 (Colorem Warp Field) */
#visual .visual-motion-wrapper {
	width: 100%;
	height: 100%; /* .visual-inner(fixed, 100vh) 전체를 채움 */
	position: relative;
	overflow: hidden;
	background-color: #0b1630;
}

#visual .kv {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	background-color: #0b1630;
}
#visual .kv canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* 배경 필드: 저해상도 렌더 후 업스케일 (전부 흐림 처리라 화질 손실 없음) */
#visual .kv-bg {
	opacity: 0;
	transition: opacity 0.8s ease-out;
}
#visual .kv.is-ready .kv-bg {
	opacity: 1;
}

/* 그레인: CSS 1px 단위 정적 노이즈(DPR 무관, 고해상도 폰에서도 PC 와 같은 알갱이 크기), overlay 블렌드 */
#visual .kv-grain {
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0.115;
	z-index: 1;
	image-rendering: pixelated;
}

/* 세로 화면 cover : visual.blade.php resize() 가 필드를 PC 기준 비율(16:9)로 잡고 캔버스 좌표계(OX)로 가운데만 그림 — 캔버스 크기는 래퍼와 같고 인라인 스타일 없음.
   canvas ctx.filter 미지원(Safari 전 버전) 흐림 폴백은 CSS 가 아니라 캔버스 안(mip 블러)에서 처리 — .no-ctx-filter 는 마커 클래스 */

/* ===== 와우 포인트 (visual.blade.php 와 세트) =====
   공명 펄스(열 밴드)·패럴랙스·오버레이 색 전환은 모두 배경 캔버스 안에서 처리되므로 여기서는 타이틀 인트로만 다룸.
   오버레이(스크롤 게이트) 전환은 캔버스 배경 색만 콘텐츠 팔레트로 바뀐다 (visual.blade.php reveal / CJ) — 줌인 등 CSS 전환 없음 */

/* 타이틀 인트로 : CHANGE 타이틀(.visual-title-en)만 흐린 상태에서 초점이 잡히며 선명해진다 (이동·순차 등장 없음).
   #visual.kv-intro 는 visual.blade.php 가 파싱 시점에 붙이고 인트로 FX.titleAt(0.4s) 에 제거 — 제거되는 순간 페이드인(1.0s)하는 동안은
   아직 흐린 상태이고, 블러(12px)는 2.6s 에 걸쳐 천천히 걷힌다. 한글 타이틀·일시·장소·모바일 화살표는 인트로 없이 처음부터 표시.
   기본 상태에는 filter 를 걸지 않는다 (blur → none 전환은 identity 로 보간됨) */
#visual .visual-title-en {
	transition:
		opacity 1.0s ease-out,
		filter 2.6s cubic-bezier(.4, 0, .2, 1);
}
#visual.kv-intro .visual-title-en {
	opacity: 0;
	filter: blur(12px);
}

/* 주파수 다이얼 : 커서가 코어(공명 주파수)에서 멀면 타이틀이 1px 이내로 흐려지고(소음), 가까우면 웜 글로우(공명).
   visual.blade.php 가 #visual 에 --kv-blur / --kv-glow / --kv-glow-a 와 .is-tuning 을 세팅. 기본 상태(튠 0)에선 filter 자체를 걸지 않아 렌더링이 원안과 동일 */
#visual.is-tuning .visual-title-en img,
#visual.is-tuning .visual-title-ko {
	filter: blur(var(--kv-blur, 0px)) drop-shadow(0 0 var(--kv-glow, 0px) rgba(255, 224, 190, var(--kv-glow-a, 0)));
}

@media (prefers-reduced-motion: reduce) {
	#visual .visual-title-en {
		transition-duration: 0.01ms;
		transition-delay: 0s;
	}
}