/**
 * s3_wave-field.css — v1.2.0
 * Pairs with /dist/scripts/s3_wave-field.js.
 * Enqueued only on pages whose content contains the "s3-wave-field" class.
 */

/* ── Root (Group block with class "s3-wave-field") ───────────────── */
.s3-wave-field {
	/* Tuning — unitless, read by JS. Override per instance or per breakpoint. */
	--s3-wave-gap: 16;
	--s3-wave-spread: 26;
	--s3-wave-hue-from: 186; /* teal-500 */
	--s3-wave-hue-to: 208;   /* blue-400 */
	--s3-wave-speed: 2.25;     /* 1 = original pace */
	--s3-wave-opacity: 0.9;
	--s3-wave-clear: 0.9;      /* dot fade behind the text (0–1) */
	--s3-wave-clear-pad: 48;   /* px over which dots + line fade back in around the text */
	--s3-wave-glow-every: 170; /* wave-glow: one node per this many px of width (min 3) */
	--s3-wave-glow-size: 14;   /* wave-glow: halo radius in px */
	--s3-wave-toggle: 0;       /* 0 = no pause/play button; 1 = displayed pause/play button (read once on init) */
	--s3-wave-duration: 0;     /* seconds of motion, then ease to a stop; 0 = continuous (requires the toggle for WCAG 2.2.2) */

	position: relative;
	isolation: isolate; /* keeps the canvas's z-index: -1 inside this block */
	padding-block: var(--s-xl); /* default room for the waves; editor spacing (inline style) overrides */
}

/* ── Wave line (class "wave-line" on the same block) ─────────────── */
.s3-wave-field.wave-line {
	--s3-line-cycles: 3;          /* full cycles across the width */
	--s3-line-amplitude: 0.22;    /* peak to centreline, fraction of height */
	--s3-line-speed: 0.15;        /* cycles per second */
	--s3-line-direction: -1;       /* 1 = left → right, -1 = right → left */
	--s3-line-width: 3.5;         /* stroke, px */
	--s3-line-color-edge: var(--c-blue-300);
	--s3-line-color-mid: var(--c-blue-400);
	--s3-line-edge-fade: 0.12;    /* fraction of width the ends fade over */
	--s3-line-clear: 0.9;         /* line fade behind the text (0–1) */
	--s3-line-marker: 0;          /* 1 = show a marker dot riding the line */
	--s3-line-marker-x: 0.5;      /* marker position, fraction of width */
	--s3-line-marker-size: 5;     /* marker radius, px */
}

@media (max-width: 600px) {
	.s3-wave-field { --s3-wave-gap: 14; --s3-wave-spread: 22; --s3-wave-glow-size: 12; }
	/* Narrow + tall heroes: 3 cycles at 22% height reads as a zigzag — keep the wave's proportions calm. */
	.s3-wave-field.wave-line { --s3-line-cycles: 1.5; --s3-line-amplitude: 0.14; --s3-line-width: 2.5; }
}

/* ── Canvas (injected by JS) ─────────────────────────────────────── */
.s3-wave-field__canvas {
	position: absolute; inset: 0; z-index: -1;
	inline-size: 100%; block-size: 100%;
	display: block; pointer-events: none;
}

/* ── Pause / play control (injected by JS) ───────────────────────── */
.s3-wave-field__toggle {
	position: absolute; inset-block-end: var(--s-sm); inset-inline-end: var(--s-sm); z-index: 1;
	display: grid; place-items: center;
	inline-size: 1.75rem; block-size: 1.75rem; /* 44px target */
	margin: 0; padding: 0;
	font: inherit; line-height: 1; letter-spacing: normal; text-transform: none; /* neutralise theme button styles */
	color: var(--c-blue-600);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--c-blue-100); border-radius: 50%;
	box-shadow: var(--shdw-xs);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.s3-wave-field__toggle:hover,
.s3-wave-field__toggle:focus-visible { opacity: 1; background: var(--c-lightest); color: var(--c-blue-700); }
.s3-wave-field__toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.s3-wave-field__toggle[hidden] { display: none; } /* display: grid above would otherwise beat [hidden] */

.s3-wave-field__icon { inline-size: .85rem; block-size: .85rem; fill: currentColor; }
.s3-wave-field__icon--play { display: none; }
.s3-wave-field__toggle[aria-pressed="true"] .s3-wave-field__icon--pause { display: none; }
.s3-wave-field__toggle[aria-pressed="true"] .s3-wave-field__icon--play { display: block; }

/* Visually hidden accessible name (self-contained; no dependency on theme utilities) */
.s3-wave-field__label {
	position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Accessibility + media ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.s3-wave-field__toggle { display: none; transition: none; } /* JS also hides it; static frame only */
}

@media (forced-colors: active) {
	.s3-wave-field__canvas,
	.s3-wave-field__toggle { display: none; }
}

@media print {
	.s3-wave-field__canvas,
	.s3-wave-field__toggle { display: none; }
}