/* WaveHaven chapter styles */

.wh-main { position: relative; }
img { max-width: 100%; display: block; }

/* Reveal-on-scroll: start hidden, JS (main.js) reveals via inline style overrides. */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal][data-clip] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
[data-reveal][data-draw] { opacity: 1; transform-origin: left center; transform: scaleX(0); }
.wh-revealed { opacity: 1 !important; transform: none !important; }
[data-clip].wh-revealed { clip-path: inset(0 0 0 0) !important; }
[data-draw].wh-revealed { transform: scaleX(1) !important; }

/* Eyebrow decoration: small wave-mark icon + line, matching the WaveHaven logo motif */
.wh-deco { position: relative; display: inline-flex; align-items: center; gap: 14px; }
.wh-deco::before {
	content: '';
	width: 22px; height: 14px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 30' fill='none' stroke='%231E8C8A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M0 6c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath d='M0 15c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3Cpath d='M0 24c5-4 10-4 15 0s10 4 15 0 10-4 15 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}
.wh-deco::after {
	content: '';
	width: clamp(30px, 4vw, 56px); height: 1px;
	background: currentColor;
	flex: none;
}

/* Ghost chapter numeral: large faint outlined number to the right of a "Chapter N" eyebrow */
.wh-ghost-num {
	position: absolute;
	left: 100%;
	margin-left: 18px;
	bottom: -0.55em;
	font-family: Forum, serif;
	font-size: clamp(64px, 8vw, 128px);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px currentColor;
	opacity: .22;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: -1;
}
@media (max-width: 900px) { .wh-ghost-num { display: none; } }

/* Buttons */
.wh-btn { display: inline-block; padding: 14px 26px; border: 1px solid currentColor; transition: background 320ms var(--wh-ease), color 320ms var(--wh-ease); }
.wh-btn--secondary { color: var(--wh-sea-900); }
.wh-btn--secondary:hover { background: var(--wh-sea-900); color: var(--wh-sand); }
.wh-btn--inverse { color: var(--wh-white); }
.wh-btn--inverse:hover { background: var(--wh-white); color: var(--wh-sea-900); }

/* Wave gallery row hover */
[data-wave-row]:hover { background: rgba(143,207,204,.07); padding-left: 18px; }
[data-wave-row] { transition: padding-left 520ms var(--wh-ease), background-color 240ms var(--wh-ease); }
[data-wave-row]:hover h3 { color: var(--wh-teal-pale); }
[data-wave-row] h3, [data-wave-row] p { transition: color 160ms var(--wh-ease); }

/* Social icons */
.wh-social-icon { transition: border-color 200ms; }
.wh-social-icon:hover { border-color: rgba(246,241,231,.7); }

/* Horizontal scroll-snap strip: hide scrollbar */
.wh-chapter-doorstep [style*="scroll-snap-type"]::-webkit-scrollbar { display: none; }

/* Nav enquire hover */
[data-nav-enquire]:hover { opacity: .8; }

@media (max-width: 680px) {
	[data-hero-tiles] { display: none; }
	.wh-chapter-waves [style*="white-space:nowrap"] { white-space: normal !important; }
}