/* twosolidae/truss-hero — front-end styles (loaded only when the block renders). */

.ts-truss-hero {
	position: relative;
	width: 100%;
}

.ts-truss-hero__stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}

.ts-truss-hero__stage svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ts-truss-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(6, 10, 16, 0.92) 0%, rgba(6, 10, 16, 0.58) 38%, rgba(6, 10, 16, 0.04) 100%),
		linear-gradient(0deg, rgba(6, 10, 16, 0.55), rgba(6, 10, 16, 0) 55%),
		radial-gradient(ellipse 80% 60% at 72% 45%, rgba(94, 196, 184, 0.06), transparent 70%);
}

.ts-truss-hero__copy {
	pointer-events: none;
}

.ts-truss-hero__copy .wp-block-buttons {
	pointer-events: auto;
}

.ts-truss-hero__member {
	vector-effect: non-scaling-stroke;
	stroke-linecap: square;
	stroke-linejoin: miter;
	transition: stroke 0.35s ease;
}

.ts-truss-hero__member--contour {
	stroke-linecap: round;
}

.ts-truss-hero__member--brace {
	stroke-dasharray: 4 5;
}

.ts-truss-hero__member--pile {
	stroke-dasharray: 2 4;
}

.ts-truss-hero__node {
	vector-effect: non-scaling-stroke;
}

.ts-truss-hero__load {
	filter: drop-shadow(0 0 4px currentColor);
}

.ts-truss-hero__pulse-group {
	pointer-events: none;
}

.ts-truss-hero__pulse-seg {
	opacity: 0.88;
	filter: drop-shadow(0 0 3px currentColor);
}

@keyframes ts-truss-pulse {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: calc(-1 * var(--ts-period, 56px)); }
}

.ts-truss-hero__scan {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	mix-blend-mode: screen;
	background: linear-gradient(
		102deg,
		transparent 40%,
		rgba(126, 184, 220, 0.14) 50%,
		rgba(94, 196, 184, 0.08) 52%,
		transparent 62%
	);
	transform: translateX(-130%);
}

.ts-truss-hero__scan.is-active {
	animation: ts-truss-scan 9s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

@keyframes ts-truss-scan {
	0%   { transform: translateX(-130%); }
	50%  { transform: translateX(130%); }
	100% { transform: translateX(130%); }
}

.ts-truss-hero__sparks circle {
	filter: drop-shadow(0 0 4px currentColor);
}

.ts-truss-hero__layer--far {
	opacity: 0.72;
}

.ts-truss-hero__layer--near {
	opacity: 0.95;
}

.ts-truss-hero__glow {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ts-truss-hero__scan.is-active,
	.ts-truss-hero__pulse-seg {
		animation: none;
	}

	.ts-truss-hero__scan {
		display: none;
	}

	.ts-truss-hero__member {
		transition: none;
	}
}