/**
 * Fuze Play – home hero (pattern: fuze-play/hero-home).
 *
 * Night-sky split hero: text left, sticker photo collage right.
 * On phones the collage sits below the text at a compact size.
 */

.fuze-hero {
	position: relative;
	overflow: clip;
	isolation: isolate;
}

/* Brush strokes and a few confetti dots (decoration only; ::after is the section edge).
 * The yellow and green dots sit above the headline at every width, including the stacked phone hero. */
.fuze-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		url(../../images/decor/brush-corner.svg) left -80px bottom -60px / clamp(140px, 18vw, 280px) auto no-repeat,
		url(../../images/decor/brush-corner-br.svg) right -40px top -30px / clamp(140px, 20vw, 300px) auto no-repeat,
		radial-gradient(circle, rgb(252 201 83 / 0.9) 0 3px, transparent 4px) 52% 4% / 22px 22px no-repeat,
		radial-gradient(circle, rgb(142 224 90 / 0.9) 0 4px, transparent 5px) 44% 2% / 22px 22px no-repeat,
		radial-gradient(circle, rgb(245 0 139 / 0.9) 0 3px, transparent 4px) 58% 88% / 22px 22px no-repeat;
	opacity: 0.55;
}

.fuze-hero__cols.wp-block-columns {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* Text column */
.fuze-hero__text > * {
	margin-block: 0;
}

.fuze-hero__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.fuze-hero .is-style-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45em 1em;
	border-radius: var(--fuze-radius-pill);
	background: rgb(255 255 255 / 0.08);
	border: 1px solid rgb(255 255 255 / 0.16);
	letter-spacing: 0.1em;
	line-height: 1.3;
}

.fuze-hero__title.wp-block-heading {
	/* Strokes sit BEHIND the letters (see mark::after), so the heading makes its own stacking layer. */
	position: relative;
	z-index: 0;
	isolation: isolate;
	margin-block-start: var(--wp--preset--spacing--30);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 500;
	text-wrap: balance;
}

.fuze-hero__title mark {
	background: transparent;
	color: var(--wp--preset--color--lime-soft);
	position: relative;
	/* Inline (not inline-block) so punctuation such as "play," never wraps away from its word. */
	display: inline;
	white-space: nowrap;
}

/* Brush stroke under each highlighted word, just under the baseline and behind the letters,
 * so descenders (p, y) paint over it. Colours per word are set further down. */
.fuze-hero__title mark::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0.1em;
	bottom: -0.08em;
	height: 0.2em;
	background: var(--wp--preset--color--pink);
	-webkit-mask: url(../../images/decor/brush-underline.svg) center / 100% 100% no-repeat;
	mask: url(../../images/decor/brush-underline.svg) center / 100% 100% no-repeat;
	pointer-events: none;
}

.fuze-hero__lead.is-style-lead {
	max-width: 34em;
	color: var(--wp--preset--color--cream);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem);
	line-height: 1.6;
}

.fuze-hero__ctas.wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
	gap: 0.75rem;
}

/* Primary booking button stays brand pink on the dark hero. */
.fuze-hero .fuze-hero__book .wp-block-button__link {
	background: var(--wp--preset--color--pink-strong);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--pink-glow);
}

.fuze-hero .fuze-hero__book .wp-block-button__link:hover,
.fuze-hero .fuze-hero__book .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--navy);
}

/* Its glow stays on through the site-wide "press" (rise onto a ledge, sink when pressed). */
.fuze-hero .fuze-hero__book .wp-block-button__link:hover {
	box-shadow: 0 4px 0 var(--fuze-press), var(--wp--preset--shadow--pink-glow);
}

.fuze-hero .fuze-hero__book .wp-block-button__link:active {
	box-shadow: 0 1px 0 var(--fuze-press);
}

.fuze-hero .fuze-hero__book .wp-block-button__link:focus-visible {
	box-shadow: 0 0 0 7px var(--fuze-focus-halo);
}

@media (max-width: 479.98px) {
	.fuze-hero__ctas.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.fuze-hero__ctas .wp-block-button,
	.fuze-hero__ctas .wp-block-button__link {
		width: 100%;
	}
}

/* Collage */
.fuze-hero__media {
	position: relative;
	min-width: 0;
}

.fuze-hero__collage {
	position: relative;
	width: min(100%, 440px);
	margin-inline: auto;
	padding-block: 4% 16%;
}

.fuze-hero__collage > * {
	margin: 0 !important;
}

.fuze-hero__collage .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.fuze-hero__main {
	width: 88%;
	margin-inline-start: auto !important;
}

.fuze-hero .fuze-hero__main img {
	box-shadow: 8px 8px 0 var(--wp--preset--color--lime);
}

.fuze-hero__small {
	position: absolute !important;
	left: 0;
	bottom: 0;
	width: 50%;
	z-index: 2;
}

.fuze-hero .fuze-hero__small img {
	border-width: 6px;
	box-shadow: 6px 6px 0 var(--wp--preset--color--pink);
}

.fuze-hero__badge.is-style-price-badge {
	position: absolute;
	top: -2%;
	right: -1%;
	z-index: 3;
	width: 5em;
	font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem);
	line-height: 1;
	box-shadow: 0 0 0 4px var(--wp--preset--color--navy), 0 0 0 7px var(--wp--preset--color--yellow), var(--wp--preset--shadow--pink-glow);
}

@media (min-width: 782px) {
	.fuze-hero__collage {
		width: 100%;
		max-width: 560px;
		padding-block: 2% 18%;
	}

	.fuze-hero__badge.is-style-price-badge {
		top: -4%;
		right: -3%;
	}
}

@media (min-width: 1280px) {
	.fuze-hero__collage {
		margin-inline-end: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fuze-hero__badge.is-style-price-badge {
		animation: fuze-badge-wobble 6s var(--fuze-ease) 1s infinite;
	}

	@keyframes fuze-badge-wobble {
		0%, 84%, 100% { transform: rotate(-8deg); }
		88% { transform: rotate(4deg) scale(1.06); }
		92% { transform: rotate(-12deg); }
		96% { transform: rotate(-6deg) scale(1.02); }
	}
}

/* ------------------------------------------------------------------
 * Floating climbing holds: four little resin "holds" (lime, pink, yellow, orange, each with
 * a bolt hole and a shine) tucked behind the photo collage. Pure decoration drawn with
 * pseudo-elements of the photo column, so they never sit over text. They drift slowly
 * only when the visitor has not asked for reduced motion; otherwise they stay still.
 * ------------------------------------------------------------------ */
.fuze-hero__media::before,
.fuze-hero__media::after,
.fuze-hero__collage::before,
.fuze-hero__collage::after {
	--fuze-hold-size: 36px;
	--fuze-hold-color: var(--wp--preset--color--lime);
	--fuze-hold-shape: 62% 38% 55% 45% / 48% 60% 40% 52%;
	--fuze-hold-tilt: 0deg;
	content: "";
	position: absolute;
	z-index: -1;
	width: var(--fuze-hold-size);
	aspect-ratio: 1;
	border-radius: var(--fuze-hold-shape);
	background:
		radial-gradient(circle, rgb(9 12 30 / 0.55) 0 9%, transparent 11%),
		radial-gradient(circle at 30% 27%, rgb(255 255 255 / 0.5) 0 10%, transparent 12%),
		var(--fuze-hold-color);
	box-shadow: inset -3px -4px 0 rgb(9 12 30 / 0.2);
	transform: rotate(var(--fuze-hold-tilt));
	pointer-events: none;
}

/* Lime, in the gap left of the big photo. */
.fuze-hero__collage::before {
	--fuze-hold-size: clamp(30px, 3.4vw, 46px);
	--fuze-hold-tilt: -14deg;
	top: 16%;
	left: 0;
}

/* Yellow, under the big photo's bottom-right corner. */
.fuze-hero__collage::after {
	--fuze-hold-size: clamp(24px, 2.6vw, 34px);
	--fuze-hold-color: var(--wp--preset--color--yellow);
	--fuze-hold-shape: 45% 55% 40% 60% / 55% 45% 60% 40%;
	--fuze-hold-tilt: 20deg;
	right: 11%;
	bottom: 3%;
}

/* Pink, peeking over the top edge of the big photo. */
.fuze-hero__media::before {
	--fuze-hold-size: clamp(20px, 2.2vw, 28px);
	--fuze-hold-color: var(--wp--preset--color--pink);
	--fuze-hold-shape: 50% 50% 42% 58% / 60% 44% 56% 40%;
	--fuze-hold-tilt: 30deg;
	top: 0;
	left: 38%;
}

/* Orange, a small one below the small photo's corner. */
.fuze-hero__media::after {
	--fuze-hold-size: clamp(16px, 1.7vw, 22px);
	--fuze-hold-color: var(--wp--preset--color--orange);
	--fuze-hold-shape: 58% 42% 50% 50% / 42% 58% 46% 54%;
	--fuze-hold-tilt: -8deg;
	bottom: 0;
	left: 54%;
}

@media (prefers-reduced-motion: no-preference) {
	.fuze-hero__collage::before {
		animation: fuze-hold-drift 11s ease-in-out -2s infinite;
	}

	.fuze-hero__collage::after {
		--fuze-drift-x: -7px;
		--fuze-drift-y: -9px;
		animation: fuze-hold-drift 9s ease-in-out -5s infinite;
	}

	.fuze-hero__media::before {
		--fuze-drift-x: 8px;
		--fuze-drift-y: -6px;
		--fuze-drift-turn: -16deg;
		animation: fuze-hold-drift 13s ease-in-out -7s infinite;
	}

	.fuze-hero__media::after {
		--fuze-drift-x: -6px;
		--fuze-drift-y: 7px;
		animation: fuze-hold-drift 10s ease-in-out -1s infinite;
	}

	@keyframes fuze-hold-drift {
		0%, 100% { transform: translate(0, 0) rotate(var(--fuze-hold-tilt)); }
		50% { transform: translate(var(--fuze-drift-x, 6px), var(--fuze-drift-y, -10px)) rotate(calc(var(--fuze-hold-tilt) + var(--fuze-drift-turn, 18deg))); }
	}
}

/* ------------------------------------------------------------------
 * Brush strokes under every key word (owner request): play · fun · slide · climb!
 * The words are <mark> highlights in the heading, so a stroke can be added or removed
 * in the editor by selecting a word → Highlight. Each stroke gets its own brand colour
 * and a slightly different angle so they look hand-painted; the last one stays pink.
 * ------------------------------------------------------------------ */
.fuze-hero__title mark.has-white-color {
	color: var(--wp--preset--color--white);
}

.fuze-hero__title mark:nth-of-type(4n + 1)::after {
	background: var(--wp--preset--color--yellow);
	transform: rotate(-1.5deg);
}

.fuze-hero__title mark:nth-of-type(4n + 2)::after {
	background: var(--wp--preset--color--lime);
	transform: scaleX(-1) rotate(1deg);
}

.fuze-hero__title mark:nth-of-type(4n + 3)::after {
	background: var(--wp--preset--color--orange);
	transform: rotate(1.5deg);
}

.fuze-hero__title mark:last-of-type::after {
	background: var(--wp--preset--color--pink);
	transform: none;
}