/*
 * digiloom: the scroll-drawn loom background.
 * Source: Figma Make `Home.tsx` `GlobalLoomBackground` — Framer Motion drew the
 * warp and weft paths via `pathLength` bound to scroll progress. Here the same
 * effect comes from stroke-dasharray/dashoffset, with the offsets set by
 * js/digiloom-motion.js. Static and fully drawn without JS.
 */

/*
 * Full-viewport, not content-width.
 *
 * The block sits inside a constrained-layout container, and core styles every
 * block child of one with `max-width: <content-size>` and
 * `margin-inline: auto !important`. Those still apply to a fixed element: the
 * max-width caps the used width and the auto margins centre it, so `inset: 0`
 * alone yields a 1152px column rather than the full viewport. Both have to be
 * unset explicitly, and the margins need !important to beat core's own.
 */
.digiloom-loom-bg {
	inset: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	width: auto;
	z-index: 0;
}

.digiloom-loom-bg svg {
	height: 100%;
	opacity: 0.35;
	width: 100%;
}

.digiloom-loom-bg__warp path {
	fill: none;
	stroke: var(--wp--preset--color--slate-muted);
	stroke-linecap: round;
	stroke-width: 3;
}

.digiloom-loom-bg__weft path {
	fill: none;
	stroke: url(#digiloom-loom-grad);
	stroke-linecap: round;
	stroke-width: 6;
}

/*
 * Drawing state. Only added once JS has measured each path, so with JS off
 * every thread renders fully drawn.
 */
.digiloom-loom-is-drawing .digiloom-loom-bg__warp path,
.digiloom-loom-is-drawing .digiloom-loom-bg__weft path {
	stroke-dasharray: var(--digiloom-len);
	stroke-dashoffset: calc(var(--digiloom-len) * (1 - var(--digiloom-progress, 0)));
}

/* Intersection nodes ------------------------------------------------- */

.digiloom-loom-bg__dot {
	fill: var(--wp--preset--color--indigo);
	stroke: #ffffff;
	stroke-width: 2;
}

.digiloom-loom-bg__pulse {
	fill: var(--wp--preset--color--pink);
	opacity: 0.3;
}

.digiloom-loom-is-drawing .digiloom-loom-bg__node {
	opacity: var(--digiloom-node-opacity, 0);
	transform-box: fill-box;
	transform-origin: center;
	scale: var(--digiloom-node-scale, 0);
	transition: opacity 300ms ease-out, scale 300ms ease-out;
}

/* The slow breathing ring behind each node. */
@media (prefers-reduced-motion: no-preference) {

	.digiloom-loom-bg__pulse {
		animation: digiloom-loom-pulse 3s ease-in-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}
}

@keyframes digiloom-loom-pulse {

	0%,
	100% {
		opacity: 0.3;
		scale: 1;
	}

	50% {
		opacity: 0;
		scale: 1.5;
	}
}

/*
 * Reduced motion: no drawing, no pulsing — the full weave is simply present,
 * at a lower opacity so it never competes with the content.
 */
@media (prefers-reduced-motion: reduce) {

	.digiloom-loom-is-drawing .digiloom-loom-bg__warp path,
	.digiloom-loom-is-drawing .digiloom-loom-bg__weft path {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}

	.digiloom-loom-is-drawing .digiloom-loom-bg__node {
		opacity: 1;
		scale: 1;
	}

	.digiloom-loom-bg svg {
		opacity: 0.25;
	}
}

/*
 * Page sections sit above the weave.
 * The background itself is excluded — it must keep `position: fixed`, or it
 * falls back into the flow and pushes the whole page down.
 */
.digiloom-main > .wp-block-post-content > *:not(.digiloom-loom-bg) {
	position: relative;
	z-index: 1;
}