@keyframes bc-dash {
	to {
		stroke-dashoffset: -48;
	}
}

@keyframes bc-blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.15;
	}
}

@keyframes bc-lit {
	0% {
		opacity: 0;
	}
	8% {
		opacity: 1;
	}
	36% {
		opacity: 1;
	}
	52% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes bc-ring {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 1;
	}
}

@keyframes bc-fibre-travel {
	to {
		stroke-dashoffset: 0;
	}
}

/* Section backgrounds + theme-card diagram thumbs */
.bc-decoration,
.bc-theme-card__thumb {
	position: relative;
}

.bc-decoration {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.bc-decoration svg,
.bc-theme-card__thumb svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.bc-decoration .flow,
.bc-theme-card__thumb .flow,
.bc-decoration .flowslow,
.bc-theme-card__thumb .flowslow,
.bc-contact-trace .flow {
	stroke-dasharray: 10 14;
}

.bc-decoration .flow,
.bc-theme-card__thumb .flow,
.bc-hero-prototype .flow,
.bc-contact-trace .flow {
	animation: bc-dash 2.4s linear infinite;
}

.bc-hero-prototype .flowrev {
	stroke-dasharray: 6 18;
	animation: bc-dashrev 2.4s linear infinite;
}

@keyframes bc-dashrev {
	to {
		stroke-dashoffset: 48;
	}
}

.bc-decoration .flowslow,
.bc-theme-card__thumb .flowslow {
	animation: bc-dash 4.8s linear infinite;
}

.bc-decoration .lit,
.bc-theme-card__thumb .lit {
	opacity: 0;
	animation: bc-lit 10.8s ease-in-out infinite;
	filter: drop-shadow(0 0 10px rgba(186, 35, 37, 0.7));
}

.bc-decoration .ring,
.bc-theme-card__thumb .ring,
.bc-contact-trace .ring {
	animation: bc-ring 2.6s ease-in-out infinite;
}

/* Prototype .pulse — travelling highlight along fibre paths */
.bc-decoration--fibre .pulse {
	stroke-dasharray: 120 2400;
	stroke-dashoffset: 2520;
	stroke-linecap: round;
	animation: bc-fibre-travel 6s linear infinite;
}

.bc-theme-card:hover .flow,
.bc-theme-card:focus-within .flow {
	animation-duration: 1.35s;
}

.bc-theme-card:hover .flowslow,
.bc-theme-card:focus-within .flowslow {
	animation-duration: 2.6s;
}

.bc-theme-card:hover .ring,
.bc-theme-card:focus-within .ring {
	animation-duration: 1.4s;
}

.bc-decoration--silicon svg.silicon {
	mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.2) 30%, #000 58%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.2) 30%, #000 58%);
}

.bc-section--decoration-fibre {
	overflow: hidden;
}

.bc-decoration--fibre {
	inset: 0;
}

.bc-decoration--fibre svg.fibre {
	mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}

.bc-decoration--trace {
	display: flex;
	align-items: flex-end;
}

.bc-decoration__trace-m {
	display: none;
}

@media (max-width: 767px) {
	.bc-decoration__trace {
		display: none;
	}
	.bc-decoration__trace-m {
		display: block;
		width: calc(100% + 40px) !important;
		margin: 0 -20px;
		height: 64px !important;
		inset: auto !important;
		position: relative !important;
	}
}

.bc-decoration__grid,
.bc-decoration--grid .bc-decoration__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(#1a1a1a 1px, transparent 1px),
		linear-gradient(90deg, #1a1a1a 1px, transparent 1px);
	background-size: 48px 48px;
	opacity: 0.35;
}

.bc-section--has-decoration > .bc-section__inner {
	position: relative;
	z-index: 1;
}

/* Full-bleed decoration panels (why now) — no extra section padding */
.cabb-block.why-now.bc-section--has-decoration .bc-decoration {
	inset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bc-decoration .flow,
	.bc-theme-card__thumb .flow,
	.bc-contact-trace .flow,
	.bc-decoration .flowslow,
	.bc-theme-card__thumb .flowslow,
	.bc-decoration .lit,
	.bc-theme-card__thumb .lit,
	.bc-decoration .ring,
	.bc-theme-card__thumb .ring,
	.bc-contact-trace .ring,
	.bc-decoration--fibre .pulse,
	.bc-hero-rack__led {
		animation: none !important;
		stroke-dashoffset: 0;
		opacity: 0.35;
	}

	.bc-decoration .lit,
	.bc-theme-card__thumb .lit {
		opacity: 0.35;
	}
}
