/* =========================================================
   Tideline scroll FX — scaffolding for assets/js/scroll-fx.js.
   Gated entirely on html[data-scrollfx="tideline"] (set by the JS
   on desktop only). If the attribute is absent, NONE of this applies
   and the page renders exactly as before. data-scrollfx="off" is the
   kill switch.
   ========================================================= */

/* Keep the per-frame transforms crisp: kill the slow image transitions
   that would smear them; absorb any sub-pixel lateral motion. */
[data-scrollfx="tideline"] .ed-intro__photo img,
[data-scrollfx="tideline"] .ed-sport__fig img,
[data-scrollfx="tideline"] .ed-stay__mosaic figure img,
[data-scrollfx="tideline"] .ed-gal__tile img,
[data-scrollfx="tideline"] .pg-feature__media img,
[data-scrollfx="tideline"] .pg-strip img,
[data-scrollfx="tideline"] .ed-ticket__stub img,
[data-scrollfx="tideline"] .pg-hero__bg {
	transition: none !important;
	will-change: transform;
	backface-visibility: hidden;
}

[data-scrollfx="tideline"] body { overflow-x: clip; }

/* Frames clip the zoom/parallax overscan (most already do; this guarantees it). */
[data-scrollfx="tideline"] .ed-intro__photo,
[data-scrollfx="tideline"] .ed-sport__fig,
[data-scrollfx="tideline"] .ed-stay__mosaic figure,
[data-scrollfx="tideline"] .ed-gal__tile,
[data-scrollfx="tideline"] .pg-feature__media,
[data-scrollfx="tideline"] .pg-strip figure,
[data-scrollfx="tideline"] .ed-ticket__stub {
	overflow: hidden;
}

/* Hero background: replace the one-time load drift with scroll parallax. */
[data-scrollfx="tideline"] .pg-hero__bg {
	animation: none !important;
}

/* =========================================================
   Shared-horizon seam — a glowing teal->coral waterline drawn
   across the top of each section as it rises toward mid-screen.
   --seam (0 -> 1) is set per-frame by the engine on the section;
   the injected .fx-seam child inherits it.
   ========================================================= */
[data-scrollfx="tideline"] .ed-sports,
[data-scrollfx="tideline"] .ed-stay,
[data-scrollfx="tideline"] .ed-loc,
[data-scrollfx="tideline"] .ed-gal,
[data-scrollfx="tideline"] .ed-rev,
[data-scrollfx="tideline"] .ed-faq,
[data-scrollfx="tideline"] .ed-cta,
[data-scrollfx="tideline"] .pg-sec {
	position: relative;
}

[data-scrollfx="tideline"] .fx-seam {
	position: absolute; left: 0; right: 0; top: -1px; height: 3px;
	pointer-events: none; z-index: 6;
	transform: scaleX( var( --seam, 0 ) ); transform-origin: center;
	opacity: var( --seam, 0 );
	background: linear-gradient( 90deg,
		transparent 0%,
		var( --teal-300, #5ec9c2 ) 14%,
		#aef3ec 38%,
		var( --coral, #ee6a47 ) 50%,
		#aef3ec 62%,
		var( --teal-300, #5ec9c2 ) 86%,
		transparent 100% );
	box-shadow: 0 0 28px 2px rgba( 94, 201, 194, 0.7 ), 0 0 10px 1px rgba( 238, 106, 71, 0.55 );
}

/* When FX is off, the injected seam element must be inert. */
[data-scrollfx="off"] .fx-seam { display: none; }

/* =========================================================
   Reduced motion / safety — never leave anything hidden or moved.
   ========================================================= */
@media ( prefers-reduced-motion: reduce ) {
	[data-scrollfx] .fx-seam { display: none !important; }
	[data-scrollfx] [data-fxset] { transform: none !important; }
}