/**
 * onmethod-2027 — wow-pain.css: the diagnostic band, 10000x.
 *
 * The pain section becomes a dark fault-code readout: pulsing fault dots,
 * bleed-rate figures in volt. Copy untouched — CSS only.
 * Respects prefers-reduced-motion and html.wow-off.
 */

/* ============ 1. Dark diagnostic stage ============ */

.pain-band {
	background:
		radial-gradient(900px 420px at 50% 0%, rgba(255, 80, 40, 0.06), transparent 60%),
		#0a0a0c;
	color: #f4f4f2;
}

.pain-band .kicker { color: var(--volt); }

.pain-band h2 {
	color: #f4f4f2;
	text-wrap: balance;
}

.pain-band > .wrap > p:last-of-type { color: rgba(244, 244, 242, 0.72); }

/* ============ 2. Fault cards ============ */

.card--fault {
	background: #131316;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-top: 3px solid #ff5a36;
	color: #f4f4f2;
	position: relative;
	overflow: hidden;
}

.card--fault h3 { color: #f4f4f2; }

.card--fault > p { color: rgba(244, 244, 242, 0.66); }

.fault-code {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #ff8a66;
	margin: 0 0 1rem;
}

.fault-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ff5a36;
	box-shadow: 0 0 12px #ff5a36;
	flex: 0 0 auto;
	animation: fault-blink 1.4s ease-in-out infinite;
}

@keyframes fault-blink {
	50% { opacity: 0.3; box-shadow: none; }
}

/* Bleed rate strip. */
.bleed-rate {
	margin: 1.4rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px dashed rgba(255, 255, 255, 0.16);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--volt);
}

.bleed-rate span {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: rgba(244, 244, 242, 0.45);
}

/* Scanline sweep across each card as it enters. */
.card--fault::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(217, 255, 0, 0.07) 50%, transparent 60%);
	transform: translateY(-100%);
	pointer-events: none;
}

@supports (animation-timeline: view()) {
	.card--fault::after {
		animation: fault-scan linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 70%;
	}
}

@keyframes fault-scan {
	from { transform: translateY(-100%); }
	to { transform: translateY(100%); }
}

/* ============ 3. Reduced motion + kill switch ============ */

@media (prefers-reduced-motion: reduce) {
	.fault-dot { animation: none; }
	.card--fault::after { animation: none; }
}

html.wow-off .fault-dot { animation: none; }
html.wow-off .card--fault::after { animation: none; }