/*
 * Homepage hero — "Tide" (scroll-driven clip-path wipe).
 * Three full-bleed panels rise over one another like a waterline as the user
 * scrolls, each with its own copy block and a glowing foam edge on the seam.
 * Ported from the Claude Design "hero tide" handoff. Reuses the site's scroll
 * cue (.hslider__scroll*) and hs-text-in / hs-bead keyframes from hero-slider.css.
 */

.htide { position: relative; background: var(--night, #0a1d22); height: 380vh; }

.htide__stick {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	isolation: isolate;
	--hc-x: max(clamp(20px, 4vw, 56px), calc((100% - 1280px) / 2 + clamp(20px, 4vw, 56px)));
}

.hc-seam {
	position: absolute; left: 0; right: 0; bottom: 0;
	z-index: 8; height: 58%;
	pointer-events: none; opacity: 0;
	background: linear-gradient(180deg, rgba(10,29,34,0) 0%, rgba(10,29,34,0.55) 50%, var(--night, #0a1d22) 95%);
}

/* scroll cue — reuses .hslider__scroll internals, repositioned */
.hc-cue {
	position: absolute; z-index: 9;
	left: 50%; bottom: clamp(28px, 5vh, 52px);
	transform: translateX(-50%);
	margin-top: 0 !important;
	transition: opacity 280ms linear;
}

.htide__panel {
	position: absolute; inset: 0;
	will-change: clip-path;
}
.htide__panel + .htide__panel { clip-path: inset(100% 0 0 0); }

/* Real <img> (not a background) for SEO/alt + LCP. Box is 114% tall (top -7%)
   so the parallax transform has room to travel without exposing edges. */
.htide__img {
	position: absolute; top: -7%; left: 0;
	width: 100%; height: 114%;
	object-fit: cover; object-position: center;
	will-change: transform;
	transform: scale(1.06);
}
.htide__shade {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(6,29,40,0.46) 0%, rgba(6,29,40,0.10) 26%, rgba(6,29,40,0.08) 52%, rgba(6,29,40,0.66) 100%),
		linear-gradient(94deg, rgba(6,29,40,0.72) 0%, rgba(6,29,40,0.36) 38%, rgba(6,29,40,0.04) 72%);
}

/* the glowing waterline that rides the wipe edge */
.htide__edge {
	position: absolute; left: 0; right: 0; top: 0;
	height: 130px;
	opacity: 0; pointer-events: none;
	transition: opacity 200ms linear;
	will-change: transform, opacity;
}
.htide__edge::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: linear-gradient(90deg,
		rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 16%,
		rgba(166,222,221,0.95) 50%,
		rgba(255,255,255,0.92) 84%, rgba(255,255,255,0) 100%);
	box-shadow: 0 0 18px rgba(166,222,221,0.85), 0 0 56px rgba(15,154,154,0.55);
}
.htide__edge::after {
	content: ""; position: absolute; top: 2px; left: 0; right: 0; height: 96px;
	background: linear-gradient(180deg, rgba(236,248,247,0.26) 0%, rgba(236,248,247,0) 100%);
}

.htide__inner {
	position: absolute; z-index: 2;
	left: var(--hc-x); right: var(--hc-x);
	bottom: clamp(108px, 16vh, 168px);
}
.htide__copy {
	max-width: 680px;
	color: #fff;
	will-change: transform;
}
.htide__panel:first-child .htide__copy {
	animation: hs-text-in 720ms var(--ease-swell, cubic-bezier(.4,0,.1,1)) both;
}
.htide__eyebrow {
	display: inline-flex; align-items: center; gap: 14px;
	font-family: var(--font-body, var(--font-sans));
	font-size: 11.5px; letter-spacing: 0.3em; text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	margin-bottom: 20px;
	text-shadow: 0 1px 2px rgba(6,29,40,0.6);
}
.htide__eyebrow-num {
	font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
	color: #fff;
}
.htide__eyebrow-rule {
	width: 34px; height: 1px;
	background: rgba(255,255,255,0.65);
}
.htide__eyebrow-lbl { font-weight: 600; color: #fff; }
.htide__eyebrow-loc { color: rgba(255,255,255,0.62); letter-spacing: 0.22em; }
.htide__eyebrow-loc::before { content: "·"; margin-right: 14px; color: rgba(255,255,255,0.45); }

.htide__word {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.02em;
	color: #fff;
	text-shadow: 0 2px 28px rgba(6,29,40,0.55), 0 1px 4px rgba(6,29,40,0.45);
}
.htide__word-a {
	display: block;
	font-style: normal;
	font-size: clamp(44px, 5.4vw, 88px);
	opacity: 0.95;
}
.htide__word-b {
	display: block;
	font-style: italic;
	font-size: clamp(76px, 10.8vw, 172px);
	margin-top: 4px;
	color: rgba(110,199,198,0.8); /* --teal-300 @ 80% */
}
.htide__body {
	margin: 22px 0 0;
	font-family: var(--font-body, var(--font-sans));
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.55;
	color: rgba(255,255,255,0.94);
	max-width: 44ch;
	text-wrap: pretty;
	text-shadow: 0 1px 2px rgba(6,29,40,0.7), 0 1px 1px rgba(0,0,0,0.35);
}

/* right-side rail */
.htide__rail {
	position: absolute; z-index: 3;
	right: var(--hc-x); top: 50%;
	transform: translateY(-50%);
	display: flex; gap: 20px;
	align-items: stretch;
}
.htide__rail-track {
	flex: none; width: 2px; border-radius: 2px;
	background: rgba(255,255,255,0.28);
	overflow: hidden; position: relative;
}
.htide__rail-fill {
	position: absolute; inset: 0;
	background: var(--coral, #ee6a47);
	transform-origin: top center;
	transform: scaleY(0);
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(238,106,71,0.85);
}
.htide__rail-stops { display: flex; flex-direction: column; gap: 30px; }
.htide__rail-stops button {
	display: block; text-align: left;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: rgba(255,255,255,0.55);
	transition: color var(--dur-base, 260ms) var(--ease-swell, cubic-bezier(.4,0,.1,1));
}
.htide__rail-stops button:hover { color: rgba(255,255,255,0.9); }
.htide__rail-stops button[data-on="1"] { color: #fff; }
.htide__rail-num {
	display: block;
	font-family: var(--font-body, var(--font-sans));
	font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
}
.htide__rail-lbl {
	display: block; margin-top: 4px;
	font-family: var(--font-display);
	font-weight: 400; font-size: 21px; line-height: 1;
}

@media (max-width: 1080px) {
	.htide__rail-lbl { display: none; }
}

@media (max-width: 760px) {
	.htide__stick { height: 100svh; }
	.htide__eyebrow-loc { display: none; }
	.htide__word-a { font-size: clamp(30px, 8.5vw, 44px); }
	.htide__word-b { font-size: clamp(56px, 16vw, 84px); }
	.htide__body { font-size: 17px; max-width: 36ch; }
	.htide__inner { bottom: clamp(96px, 15vh, 140px); }
	.htide__rail { right: clamp(14px, 4vw, 24px); gap: 12px; }
	.htide__rail-stops { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.htide__panel + .htide__panel {
		clip-path: none;
		opacity: 0;
		transition: opacity 300ms linear;
	}
	.htide__img { transform: none !important; }
	.htide__edge { display: none; }
	.htide__panel:first-child .htide__copy { animation: none; opacity: 1; }
}