/**
 * Hero Cover block styles
 *
 * Gradient overlay + content positioning for wp:cover blocks.
 * Use is-style-content-left (default) or is-style-content-right.
 */

/* Gradient: dark on the left, image reveals right */
.wp-block-cover.is-style-content-left .wp-block-cover__background {
	background: linear-gradient(90deg, var(--wp--preset--color--contrast) 30%, transparent 70%) !important;
}

/* Gradient: dark on the right, image reveals left */
.wp-block-cover.is-style-content-right .wp-block-cover__background {
	background: linear-gradient(270deg, var(--wp--preset--color--contrast) 30%, transparent 70%) !important;
}

/* Prevent inner groups from covering the background image (frontend + editor) */
.wp-block-cover.is-style-content-left .wp-block-cover__inner-container .wp-block-group,
.wp-block-cover.is-style-content-right .wp-block-cover__inner-container .wp-block-group {
	background-color: transparent !important;
}

/* Flip content alignment for right variant */
.wp-block-cover.is-style-content-right .hero-cover-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: auto !important;
	margin-right: 0 !important;
}

/* Wave Bottom: organic wavy lower edge. A two-layer mask — a full-width
   rectangle plus a wave strip along the bottom (1px overlap avoids a seam) —
   cuts the cover so whatever section follows shows through the trough.
   Composable with the gradient styles above (different properties). */
.wp-block-cover.is-style-wave-bottom {
	--lp-edge-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V44C1320 68 1180 80 1040 72 880 62 720 30 560 52 400 70 160 64 0 36Z'/%3E%3C/svg%3E");
	--lp-edge-wave-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 0H1440V44C1320 68 1180 80 1040 72 880 62 720 30 560 52 400 70 160 64 0 36Z'/%3E%3C/svg%3E");
	-webkit-mask-image: linear-gradient(#000, #000), var(--lp-edge-wave);
	mask-image: linear-gradient(#000, #000), var(--lp-edge-wave);
	/* The wave strip and foam heights are proportioned for wide viewports;
	   at phone widths the same pixel heights would swallow a third of the
	   cover (and wash out any content near the bottom edge), so they start
	   at half scale and grow at the desktop breakpoint. */
	-webkit-mask-size: 100% calc(100% - 47px), 100% 48px;
	mask-size: 100% calc(100% - 47px), 100% 48px;
	-webkit-mask-position: top, bottom;
	mask-position: top, bottom;
	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-repeat: no-repeat, no-repeat;
}

@media (min-width: 782px) {
	.wp-block-cover.is-style-wave-bottom {
		-webkit-mask-size: 100% calc(100% - 95px), 100% 96px;
		mask-size: 100% calc(100% - 95px), 100% 96px;
	}
}

/* Foam layers: two translucent white waves stacked above the cut line
   (flipped upside down so their wavy edge faces UP), stretched and offset
   differently so the three edges never align. The element's own mask clips
   them flush against the final cut. */
.wp-block-cover.is-style-wave-bottom::before,
.wp-block-cover.is-style-wave-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	background-image: var(--lp-edge-wave-white);
	background-repeat: no-repeat;
	transform: scale(-1);
	pointer-events: none;
	z-index: 2;
}

.wp-block-cover.is-style-wave-bottom::before {
	height: 74px;
	background-size: 135% 100%;
	background-position: 25% top;
	opacity: 0.28;
}

.wp-block-cover.is-style-wave-bottom::after {
	height: 59px;
	background-size: 112% 100%;
	background-position: 80% top;
	opacity: 0.5;
}

@media (min-width: 782px) {
	.wp-block-cover.is-style-wave-bottom::before {
		height: 148px;
	}

	.wp-block-cover.is-style-wave-bottom::after {
		height: 118px;
	}
}

/* Hero slideshow (assets/js/hero-slideshow.js): stacked background slides
   crossfade with a very slow Ken Burns zoom. The authored frames group is
   never rendered directly — hidden on the frontend AND in the canvas. */
.hero-slideshow-frames {
	display: none;
}

.wp-block-cover .lp-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 2s ease;
	will-change: opacity, transform;
}

.wp-block-cover .lp-hero-slide.is-active {
	opacity: 1;
	animation: lp-ken-burns 12s ease-out forwards;
}

.wp-block-cover .lp-hero-slide.is-fading {
	opacity: 0;
}

@keyframes lp-ken-burns {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.14);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover .lp-hero-slide {
		animation: none !important;
		transition: none;
	}
}