/**
 * Hero: wave stroke draw — dash length via --wave-len (set in main.js) or fallback.
 * Loop: infinite alternate (draw, then reverse, repeat).
 */

.celtic-hero__wave-stage {
	z-index: 0;
}

.celtic-hero__wave-layer--1 {
	opacity: 0.4;
}

.celtic-hero__wave-layer--2 {
	opacity: 0.24;
}

@keyframes celtic-hero-wave-draw {
	from {
		stroke-dashoffset: var(--wave-len, 12000);
	}

	to {
		stroke-dashoffset: 0;
	}
}

/*
 * Fallback when main.js has not run: --wave-len missing, use 12000.
 * stroke-dasharray matches offset range so the full path participates.
 */
.celtic-hero .celtic-hero__stroke--primary {
	stroke-dasharray: var(--wave-len, 12000);
	animation: celtic-hero-wave-draw 5.2s cubic-bezier(0.33, 1, 0.68, 1) 0s infinite alternate backwards;
	filter: drop-shadow(0 0 14px rgba(201, 169, 104, 0.28));
}

.celtic-hero .celtic-hero__stroke--secondary {
	stroke-dasharray: var(--wave-len, 12000);
	animation: celtic-hero-wave-draw 5.8s cubic-bezier(0.33, 1, 0.68, 1) 0.35s infinite alternate backwards;
}

.celtic-hero .celtic-hero__stroke--accent {
	stroke-dasharray: var(--wave-len, 12000);
	animation: celtic-hero-wave-draw 5s cubic-bezier(0.33, 1, 0.68, 1) 0.65s infinite alternate backwards;
	filter: drop-shadow(0 0 12px rgba(201, 169, 104, 0.22));
}

.celtic-hero__svg {
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.celtic-hero .celtic-hero__stroke--primary,
	.celtic-hero .celtic-hero__stroke--secondary,
	.celtic-hero .celtic-hero__stroke--accent {
		animation: none !important;
		stroke-dashoffset: 0 !important;
		stroke-dasharray: none !important;
	}

	.celtic-hero__wave-layer--1 {
		opacity: 0.3;
	}

	.celtic-hero__wave-layer--2 {
		opacity: 0.16;
	}
}