@charset "utf-8";
/* ============================================================================
 * water.css — DEEP SQUARE 물속 효과 (메인 + 서브 공통)
 *
 * [2026-10-15] css/motion.css 의 3절(물 레이어)·6절(접근성 중 물 효과)·8절(물방울)·8-2절(첫 화면 물빛)을
 * 그대로 옮겼다. 짝이 되는 스크립트는 js/water.js. 값은 하나도 바꾸지 않았다.
 * 바뀐 것은 첫 화면 물빛 선택자 하나 — "#main_con > .info01_con > .ds-hero-water" 를
 * ".ds-hero-water" 로 넓혀 서브 상단 배너에서도 같은 규칙을 쓴다(값 동일).
 * 서브 페이지에서 물 효과를 깔기 위한 위치·층 정리는 css/motion_sub.css 에 있다.
 * ========================================================================== */


/* ── 3. 물 레이어 ────────────────────────────────────────────────────────
   레퍼런스: canariasart.com — 배경 사진은 가만히, 위에서 내려오는 부드러운 빛줄기가
   천천히 흔들리고, 희미한 부유물이 떠다닌다. 큰 움직임 없이 "물속"이라는 인상만.

   .ds-water : info03 전체를 덮는 좌표계. 클리핑은 여기서 한 번만 한다.
   .ds-vp    : 뷰포트에 붙어 따라다니는 100vh 밴드(JS 가 scrub 로 y 를 민다).
               합성 면적이 단락 높이와 무관하게 늘 한 화면이다.

   [2026-09-17] 블록(예약·소개·시설)마다 따로 깔았다가 단락 전체 한 장으로 바꿨다.
   블록마다 두면 경계에서 레이어가 끊겨 가로선이 생긴다.

   position:sticky 는 이 페이지에서 쓸 수 없다. 조상인 #main_con 에 overflow:hidden 이
   걸려 있어 그쪽이 sticky 의 스크롤 컨테이너가 된다. */
.ds-water {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.ds-water > .ds-vp {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
	will-change: transform;
}

/* 물빛 한 장 — 굴절된 빛 얼룩 + 수면에서 내려오는 빛줄기를 한 요소에 겹쳐 그린다.
   [2026-09-22] 원래는 얼룩 1장 + 빛줄기 2장으로 나뉘어 있었다. 각각이 화면 전체를 덮는
   합성 레이어라 PC 에서 34.9fps 까지 떨어졌다(빛줄기만 빼도 46.5fps). 한 장으로 합쳤다.
   filter:blur() 는 쓰지 않는다 — [2026-09-16 실측] blur + scale 키프레임일 때 5.3fps.
   규칙 — 크기는 한 화면, 필터 없음, 키프레임은 translate/rotate 만. */
.ds-caustic {
	position: absolute;
	inset: 0;
	opacity: 0.85;
	will-change: transform;
	background:
		/* 빛줄기 — 거의 수직으로 내려와 아래로 갈수록 사라진다 */
		repeating-linear-gradient(
			90deg,
			rgba(175, 228, 255, 0)     0,
			rgba(175, 228, 255, 0.065) 2.6vw,
			rgba(175, 228, 255, 0)     6.2vw,
			rgba(175, 228, 255, 0)     11vw
		),
		repeating-linear-gradient(
			90deg,
			rgba(150, 212, 255, 0)     0,
			rgba(150, 212, 255, 0)     3.5vw,
			rgba(150, 212, 255, 0.04)  5.4vw,
			rgba(150, 212, 255, 0)     8vw,
			rgba(150, 212, 255, 0)     15.5vw
		),
		/* 굴절된 빛 얼룩 */
		radial-gradient(38% 26% at 30% 34%, rgba(126, 214, 255, 0.19), transparent 70%),
		radial-gradient(30% 22% at 68% 56%, rgba(86, 172, 255, 0.15), transparent 72%),
		radial-gradient(26% 34% at 46% 74%, rgba(160, 236, 255, 0.13), transparent 70%),
		radial-gradient(34% 30% at 62% 20%, rgba(96, 186, 255, 0.13), transparent 72%),
		radial-gradient(28% 24% at 18% 62%, rgba(140, 226, 255, 0.1), transparent 70%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.62) 42%, transparent 92%);
	        mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.62) 42%, transparent 92%);
	animation: ds-caustic 34s ease-in-out infinite alternate;
}
@keyframes ds-caustic {
	0%   { transform: translate3d(-2.5%, -2%, 0) rotate(0deg); }
	100% { transform: translate3d( 2.5%,  2%, 0) rotate(3deg); }
}

/* 스크롤 흐름 — JS 가 xPercent 로 아주 조금 민다(빛이 옆으로 흐르는 느낌) */
.ds-drift {
	position: absolute;
	top: -4%;
	bottom: -4%;
	left: -8%;
	right: -8%;
	will-change: transform;
}

/* 화면 밖이면 물 레이어를 통째로 재운다. JS 의 ScrollTrigger 가 토글한다.
   일시정지만으로는 will-change 로 승격된 레이어가 남으므로 visibility 로 내려놓는다. */
.ds-water.is-idle > .ds-vp {
	visibility: hidden;
}
.ds-water.is-idle * {
	animation-play-state: paused !important;
	will-change: auto;
}


@media (max-width: 1024px) {
	.ds-caustic { opacity: 0.7; }
}


/* ── 6. 접근성 ───────────────────────────────────────────────────────────
   html.hdg-motion 이 안 붙어 1절 숨김 규칙은 이미 꺼져 있다.
   여기서는 물 레이어까지 정지시킨다(JS 가 DOM 을 안 만들지만 이중 방어). */
@media (prefers-reduced-motion: reduce) {
	/* html.ds-force(검수 페이지 강제 모션)일 때는 숨기지 않는다 */
	html:not(.ds-force) .ds-water,
	html:not(.ds-force) .ds-bubble-canvas,
	html:not(.ds-force) .ds-hero-water { display: none; }
}

/* ── 8. 물방울 (보글보글) ─────────────────────────────────────────────────
   캔버스 한 장이 화면에 고정돼 있고, JS 가 info03 영역 안쪽에만 그린다.
   [2026-09-17] CSS 기포 7개(블록당)를 이걸로 바꿨다. DOM 기포는 개수만큼 합성 레이어가
   늘지만 캔버스는 몇 개를 그리든 레이어가 하나다.

   쌓임 순서: info03 맨 끝에 붙는 z-index:0 고정 요소라, DOM 순서상 블록 배경과
   물 레이어(.ds-water, z-index:0) 뒤에 그려지고 본문(.contents_con z-index 1/10) 아래에 깔린다.
   width/height 를 100vw 로 잡지 않는 이유 — 스크롤바 폭만큼 가로 넘침이 생긴다. */
.ds-bubble-canvas {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}


/* ── 8-2. 첫 화면 물빛 ────────────────────────────────────────────────────
   [2026-10-14] info01 안에 absolute 로 한 장. motion.js heroWater() — 빛 그물·빛줄기·반짝임.
   내부 해상도는 절반이고 CSS 가 늘려 그린다(부드러운 빛이라 오히려 맞다).
   .bg_con 바로 뒤에 끼워 넣으므로 DOM 순서상 사진 위, .contents_con(z-index:1) 아래다.
   info01 자체가 z-index:0 쌓임 영역이라 다른 단락과 섞이지 않는다.
   커서는 받지 않는다(pointer-events:none — 버튼 클릭을 막지 않게). */
.ds-hero-water {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	/* 밝은 부분만 사진에 더한다 — 빛이 사진의 파란색과 섞인다 */
	mix-blend-mode: screen;
}
/* 모바일·터치 기기는 합성을 끈다 — iOS 사파리 버벅임(2026-10-14). 밝기는 JS 가 낮춰 맞춘다 */
@media (max-width: 1024px), (any-hover: none) {
	.ds-hero-water { mix-blend-mode: normal; }
}