/* ============================================================================
 * FABULA — Characters · Angela
 *
 * CONTROL. Ink and ember. The colours of a drawn blade seen in low light: cold
 * steel grey with a single crimson scar running through it. The ground is ash
 * parchment; geometry is thin, sharp and deliberate — nothing spills.
 * ========================================================================== */

.ch-angela {
	--ch-ground: #efe8dd;
	--ch-texture:
		radial-gradient(1000px 520px at 72% -160px, rgb(156 43 52 / 9%), transparent 70%),
		repeating-linear-gradient(112deg, rgb(0 0 0 / 3.5%) 0 1px, transparent 1px 10px);
	--ch-panel: #fbf6ec;
	--ch-panel-alt: #f2e9da;
	--ch-ink: #1d1a18;
	--ch-ink-dim: #5b554f;
	--ch-ink-faint: #8b837b;
	--ch-accent: #9c2b34;
	--ch-accent-soft: #b14049;
	--ch-accent-2: #6b737b;
	--ch-rule: rgb(156 43 52 / 26%);
	--ch-rule-soft: rgb(156 43 52 / 13%);
	--ch-glow: rgb(156 43 52 / 30%);
	--ch-masthead: linear-gradient(180deg, #120e10, #241417 62%, #3a1b1f);
}

@media (prefers-color-scheme: dark) {
	.ch-angela {
		--ch-ground: #12100f;
		--ch-texture:
			radial-gradient(1000px 520px at 72% -160px, rgb(224 106 116 / 10%), transparent 70%),
			repeating-linear-gradient(112deg, rgb(255 255 255 / 2.5%) 0 1px, transparent 1px 10px);
		--ch-panel: #1b1817;
		--ch-panel-alt: #221e1d;
		--ch-ink: #ece7dd;
		--ch-ink-dim: #b3aba1;
		--ch-ink-faint: #837b73;
		--ch-accent: #e06a74;
		--ch-accent-soft: #c95761;
		--ch-accent-2: #9fb0bd;
		--ch-rule: rgb(224 106 116 / 26%);
		--ch-rule-soft: rgb(224 106 116 / 12%);
		--ch-glow: rgb(224 106 116 / 34%);
		--ch-masthead: linear-gradient(180deg, #0c090a, #1c1012 62%, #2c1216);
	}
}

/* The scar: a pair of thin blades laid across the hero, one bright, one
   half-healed. Drawn, then held — it does not pulse. */
body.ch-angela .ch-hero::before,
body.ch-angela .ch-hero::after {
	content: "";
	position: absolute;
	right: -6%;
	height: 1px;
	transform-origin: right center;
	background: linear-gradient(90deg, transparent, var(--ch-accent), transparent);
	pointer-events: none;
}

body.ch-angela .ch-hero::before {
	top: 26%;
	width: min(58vw, 540px);
	transform: rotate(-19deg);
	box-shadow: 0 0 14px var(--ch-glow);
}

body.ch-angela .ch-hero::after {
	top: 40%;
	width: min(40vw, 400px);
	transform: rotate(-19deg);
	opacity: 0.45;
}

/* The name is struck once, like a cut that catches the light. */
body.ch-angela .ch-hero__name {
	text-shadow:
		1px 0 0 rgb(156 43 52 / 22%),
		-2px 0 0 rgb(107 115 123 / 16%);
}

@media (prefers-reduced-motion: no-preference) {
	body.ch-angela .ch-hero::before {
		animation: ch-angela-scar 900ms var(--fu-ease-out) 220ms both;
	}

	body.ch-angela .ch-hero::after {
		animation: ch-angela-scar 900ms var(--fu-ease-out) 400ms both;
	}
}

@keyframes ch-angela-scar {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}