/**
 * Wave Separator — Berlin Marine
 *
 * CSS-only section dividers controlled via CSS classes in the block editor
 * ("Advanced > Additional CSS Classes").
 *
 * On the frontend a render_block filter injects <span class="bm-wave">
 * elements (inc/waves/waves.php). In the editor a pseudo-element fallback
 * scoped to .editor-styles-wrapper provides a rough preview.
 *
 * @see docs/wellen-trenner.md
 */

/* ── SVG mask tiles ────────────────────────────────────────────────────
 *
 * Filled top  (160x20): wave peaks at top, fill below
 * Filled bottom (160x20): wave troughs at bottom, fill above
 * Line A (90x14): primary stroke, full opacity
 * Line B (120x14): secondary stroke, 50 % opacity baked in
 * ──────────────────────────────────────────────────────────────────── */

/* ── 1. Setup ──────────────────────────────────────────────────────── */

:where([class*="bm-wave-top"]),
:where([class*="bm-wave-bottom"]) {
	--bm-wave-h: 20px;
	position: relative;
}

:where(.bm-wave--sm) {
	--bm-wave-h: 12px;
}

@media (max-width: 767px) {
	:where([class*="bm-wave-top"]),
	:where([class*="bm-wave-bottom"]) {
		--bm-wave-h: 14px;
	}
	:where(.bm-wave--sm) {
		--bm-wave-h: 8px;
	}
}

/* ── 2. Frontend: injected <span> elements ─────────────────────────── */

.bm-wave {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--bm-wave-h);
	pointer-events: none;
	z-index: 2;
	background-color: var(--bm-wave-color, inherit);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 160px 100%;
	mask-size: 160px 100%;
}

/* Top wave: sits above the section, 1 px overlap to prevent subpixel gap */
.bm-wave--t {
	top: calc(var(--bm-wave-h) * -1);
	transform: translateY(1px);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 20V10Q40 2 80 10T160 10V20Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 20V10Q40 2 80 10T160 10V20Z'/%3E%3C/svg%3E");
}

/* Bottom wave: sits below the section, 1 px overlap */
.bm-wave--b {
	bottom: calc(var(--bm-wave-h) * -1);
	transform: translateY(-1px);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 0V10Q40 18 80 10T160 10V0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 0V10Q40 18 80 10T160 10V0Z'/%3E%3C/svg%3E");
}

/* ── 2a. Line variant ──────────────────────────────────────────────── */
/* Two mask layers on the same span (tiles from the header waterline).
 * Second tile has stroke-opacity .5 baked into the SVG so the mask
 * composite produces a 50 %-opacity secondary line automatically. */

.bm-wave--line > .bm-wave {
	height: 14px;
	transform: none;
	background-color: var(--bm-wave-color, rgba(255, 255, 255, 0.55));
	-webkit-mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14'%3E%3Cpath d='M0 7Q22.5 1 45 7T90 7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 7Q30 12 60 7T120 7' fill='none' stroke='%23000' stroke-width='1.5' stroke-opacity='.5'/%3E%3C/svg%3E");
	mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14'%3E%3Cpath d='M0 7Q22.5 1 45 7T90 7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 7Q30 12 60 7T120 7' fill='none' stroke='%23000' stroke-width='1.5' stroke-opacity='.5'/%3E%3C/svg%3E");
	-webkit-mask-size: 90px 14px, 120px 14px;
	mask-size: 90px 14px, 120px 14px;
}

.bm-wave--line > .bm-wave--t {
	top: -7px;
}

.bm-wave--line > .bm-wave--b {
	bottom: -7px;
}

/* ── 2b. Small variant ─────────────────────────────────────────────── */

.bm-wave--sm.bm-wave--line > .bm-wave {
	height: 10px;
	-webkit-mask-size: 90px 10px, 120px 10px;
	mask-size: 90px 10px, 120px 10px;
}

.bm-wave--sm.bm-wave--line > .bm-wave--t {
	top: -5px;
}

.bm-wave--sm.bm-wave--line > .bm-wave--b {
	bottom: -5px;
}

/* ── 3. Animation ──────────────────────────────────────────────────── */

/* Filled wave: shift mask by 10 tile widths (1600 = 10 x 160). */
.bm-wave--anim > .bm-wave--t {
	animation: bm-wave-fill 30s linear infinite;
}

.bm-wave--anim > .bm-wave--b {
	animation: bm-wave-fill 30s linear infinite reverse;
}

/* Line wave: two layers drift in opposite directions.
 * Layer A: -900 px (10 x 90) leftward.
 * Layer B: +480 px (4 x 120) rightward.
 * Speed ratio ~1.9 : 1 = gentle counter-drift similar to header. */
.bm-wave--anim.bm-wave--line > .bm-wave--t {
	animation: bm-wave-line 30s linear infinite;
}

.bm-wave--anim.bm-wave--line > .bm-wave--b {
	animation: bm-wave-line 30s linear infinite reverse;
}

@keyframes bm-wave-fill {
	to {
		-webkit-mask-position: -1600px 0;
		mask-position: -1600px 0;
	}
}

@keyframes bm-wave-line {
	to {
		-webkit-mask-position: -900px 0, 480px 0;
		mask-position: -900px 0, 480px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bm-wave--anim > .bm-wave {
		animation: none !important;
	}
}

/* ── 4. Colors ─────────────────────────────────────────────────────── */
/* Default for filled waves: inherit (via var() fallback).
 * Default for line waves: rgba(255,255,255,.55) (set in section 2a).
 * Both can be overridden with --bm-wave-color or helper classes. */

.bm-wave--white  { --bm-wave-color: #fff; }
.bm-wave--offwhite { --bm-wave-color: #F3F5F7; }
.bm-wave--primary { --bm-wave-color: #0184b0; }
.bm-wave--navy { --bm-wave-color: rgba(12, 36, 48, 1); }

/* ── 5. Editor fallback (pseudo-elements) ──────────────────────────── */
/* The render_block filter that injects <span> elements is PHP-only,
 * so the Gutenberg canvas doesn't have the spans. Pseudo-elements
 * scoped to .editor-styles-wrapper provide a rough preview.
 * Trade-off: on dbw section-level blocks that use ::before for editor
 * labels, the wave replaces the label. ::after (bottom) is always free. */

.editor-styles-wrapper .bm-wave-top::before,
.editor-styles-wrapper .bm-wave-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--bm-wave-h, 20px);
	pointer-events: none;
	z-index: 2;
	background-color: var(--bm-wave-color, inherit);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: 160px 100%;
	mask-size: 160px 100%;
}

.editor-styles-wrapper .bm-wave-top::before {
	top: calc(var(--bm-wave-h, 20px) * -1);
	transform: translateY(1px);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 20V10Q40 2 80 10T160 10V20Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 20V10Q40 2 80 10T160 10V20Z'/%3E%3C/svg%3E");
}

.editor-styles-wrapper .bm-wave-bottom::after {
	bottom: calc(var(--bm-wave-h, 20px) * -1);
	transform: translateY(-1px);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 0V10Q40 18 80 10T160 10V0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20'%3E%3Cpath d='M0 0V10Q40 18 80 10T160 10V0Z'/%3E%3C/svg%3E");
}

/* Editor: line variant */
.editor-styles-wrapper .bm-wave--line.bm-wave-top::before,
.editor-styles-wrapper .bm-wave--line.bm-wave-bottom::after {
	height: 14px;
	transform: none;
	background-color: var(--bm-wave-color, rgba(255, 255, 255, 0.55));
	-webkit-mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14'%3E%3Cpath d='M0 7Q22.5 1 45 7T90 7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 7Q30 12 60 7T120 7' fill='none' stroke='%23000' stroke-width='1.5' stroke-opacity='.5'/%3E%3C/svg%3E");
	mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='14'%3E%3Cpath d='M0 7Q22.5 1 45 7T90 7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 7Q30 12 60 7T120 7' fill='none' stroke='%23000' stroke-width='1.5' stroke-opacity='.5'/%3E%3C/svg%3E");
	-webkit-mask-size: 90px 14px, 120px 14px;
	mask-size: 90px 14px, 120px 14px;
}

.editor-styles-wrapper .bm-wave--line.bm-wave-top::before {
	top: -7px;
}

.editor-styles-wrapper .bm-wave--line.bm-wave-bottom::after {
	bottom: -7px;
}

/* Editor: animation */
.editor-styles-wrapper .bm-wave--anim.bm-wave-top::before {
	animation: bm-wave-fill 30s linear infinite;
}

.editor-styles-wrapper .bm-wave--anim.bm-wave-bottom::after {
	animation: bm-wave-fill 30s linear infinite reverse;
}

.editor-styles-wrapper .bm-wave--anim.bm-wave--line.bm-wave-top::before {
	animation: bm-wave-line 30s linear infinite;
}

.editor-styles-wrapper .bm-wave--anim.bm-wave--line.bm-wave-bottom::after {
	animation: bm-wave-line 30s linear infinite reverse;
}