/* ============================================================================
 * FABULA — Characters · Irene
 *
 * PURPOSE. A digit in a half-mask: gunmetal, scanlines and one signal colour
 * that refuses to be the background. The silver half of the face is the past
 * (Three); the warm half is the name she chose. Both are on screen at once.
 * ========================================================================== */

.ch-irene {
	--ch-ground: #e9ecef;
	--ch-texture:
		repeating-linear-gradient(0deg, rgb(18 21 25 / 5%) 0 1px, transparent 1px 4px),
		linear-gradient(90deg, transparent 0 49.85%, rgb(63 125 148 / 10%) 49.85% 50.15%, transparent 50.15%);
	--ch-panel: #f6f8fa;
	--ch-panel-alt: #eceff2;
	--ch-ink: #171a1e;
	--ch-ink-dim: #545c64;
	--ch-ink-faint: #828b94;
	--ch-accent: #c25a1e;
	--ch-accent-soft: #d1702f;
	--ch-accent-2: #3f7d94;
	--ch-rule: rgb(194 90 30 / 28%);
	--ch-rule-soft: rgb(194 90 30 / 12%);
	--ch-glow: rgb(194 90 30 / 30%);
	--ch-masthead: linear-gradient(180deg, #0e1114, #1b2229 62%, #2a343d);
}

@media (prefers-color-scheme: dark) {
	.ch-irene {
		--ch-ground: #121519;
		--ch-texture:
			repeating-linear-gradient(0deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 4px),
			linear-gradient(90deg, transparent 0 49.85%, rgb(127 195 220 / 10%) 49.85% 50.15%, transparent 50.15%);
		--ch-panel: #1a1e23;
		--ch-panel-alt: #22282e;
		--ch-ink: #e7ebee;
		--ch-ink-dim: #9aa4ad;
		--ch-ink-faint: #6f7982;
		--ch-accent: #e28a45;
		--ch-accent-soft: #cf7a39;
		--ch-accent-2: #7fc3dc;
		--ch-rule: rgb(226 138 69 / 26%);
		--ch-rule-soft: rgb(226 138 69 / 10%);
		--ch-glow: rgb(226 138 69 / 32%);
		--ch-masthead: linear-gradient(180deg, #0a0c0f, #171c21 62%, #232c34);
	}
}

/* The mask: a hard vertical split ringing the portrait — silver to the left,
   the chosen signal colour to the right. */
body.ch-irene .ch-hero__portrait {
	position: relative;
	isolation: isolate;
}

body.ch-irene .ch-hero__portrait::before {
	content: "";
	position: absolute;
	inset: -8%;
	z-index: -1;
	border-radius: 50%;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--ch-accent-2) 16%, transparent) 0 50%,
		color-mix(in srgb, var(--ch-accent) 18%, transparent) 50% 100%
	);
}

/* The designation, stencilled under the name. */
body.ch-irene .ch-hero__aka {
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* A silver-to-amber lens glow, as if the optics were re-focusing. */
body.ch-irene .ch-hero__name {
	text-shadow:
		0 0 1px rgb(63 125 148 / 45%),
		1.5px 0 0 rgb(194 90 30 / 22%);
}

@media (prefers-reduced-motion: no-preference) {
	body.ch-irene .ch-hero__portrait::before {
		animation: ch-irene-boot 900ms steps(6, end) 260ms both;
	}
}

@keyframes ch-irene-boot {
	from {
		opacity: 0;
		filter: brightness(2.4);
	}

	60% {
		opacity: 1;
		filter: brightness(1.4);
	}

	to {
		opacity: 1;
		filter: none;
	}
}