/* ============================================================
   ck-ecl2-anim — Entity Centric Learning explainer
   Fully scoped under .ck-ecl2. Obsidian & Ember palette.
   Signal green is used ONLY on the resolved/match state.
   ============================================================ */

.ck-ecl2 {
	--ck-ecl2-obsidian: #0F0D0C;
	--ck-ecl2-deep:     #1A1614;
	--ck-ecl2-card:     #251E1A;
	--ck-ecl2-border:   #2E2520;
	--ck-ecl2-ember:    #FF4E1F;
	--ck-ecl2-amber:    #F0920A;
	--ck-ecl2-signal:   #00FC88;
	--ck-ecl2-text:     #E8E2DC;
	--ck-ecl2-muted:    #B0A49E;
	--ck-ecl2-dim:      #6f655e;
	--ck-ecl2-fail:     #C03A10;

	position: relative;
	box-sizing: border-box;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px);
	background:
		radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--ck-ecl2-obsidian);
	border: 1px solid var(--ck-ecl2-border);
	border-radius: 14px;
	color: var(--ck-ecl2-text);
	font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	overflow: hidden;
}
.ck-ecl2 *, .ck-ecl2 *::before, .ck-ecl2 *::after { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────── */
.ck-ecl2__head { text-align: center; margin-bottom: clamp(16px, 2.4vw, 28px); }
.ck-ecl2__title { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; color: #fff; }
.ck-ecl2__sub { margin: 0 auto; max-width: 660px; font-size: clamp(13px, 1.4vw, 16px); line-height: 1.5; color: var(--ck-ecl2-muted); }

/* ── Time ticker ────────────────────────────────────────── */
.ck-ecl2__ticker {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-bottom: 18px;
	position: relative;
}
.ck-ecl2__ticker::before {
	content: '';
	position: absolute;
	left: 8%; right: 8%; top: 50%;
	height: 1px;
	background: var(--ck-ecl2-border);
	z-index: 0;
}
.ck-ecl2__tick {
	position: relative;
	z-index: 1;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--ck-ecl2-dim);
	background: var(--ck-ecl2-deep);
	border: 1px solid var(--ck-ecl2-border);
	border-radius: 100px;
	padding: 5px 12px;
	white-space: nowrap;
	transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.ck-ecl2__tick--obf { border-style: dashed; }

/* ── Incoming record feed ───────────────────────────────── */
.ck-ecl2__feed { max-width: 420px; margin: 0 auto 4px; }
.ck-ecl2__rec {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: rgba(255,255,255,.03);
	border: 1px solid var(--ck-ecl2-border);
	border-radius: 8px;
	transition: opacity .45s ease, transform .45s ease, border-color .3s ease, background .3s ease;
}
.ck-ecl2__rec--in { background: rgba(255,78,31,.06); border-color: rgba(255,78,31,.30); }
.ck-ecl2__rec--in.is-obf { border-style: dashed; border-color: rgba(255,78,31,.55); }
.ck-ecl2__rec-src {
	flex: 0 0 auto;
	width: 52px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
	background: var(--ck-ecl2-ember);
	border-radius: 4px;
	padding: 5px 0;
	text-align: center;
}
.ck-ecl2__feats { display: flex; flex: 1 1 auto; gap: 8px; min-width: 0; }
.ck-ecl2__feat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-ecl2__feat-lbl { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ck-ecl2-dim); }
.ck-ecl2__feat-val {
	font-size: 12px; font-weight: 600; color: var(--ck-ecl2-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: color .3s ease;
}
.ck-ecl2__feat-val.is-empty { color: var(--ck-ecl2-dim); }
.ck-ecl2__feed-step {
	position: absolute;
	top: -9px; right: 10px;
	font-size: 9px; font-weight: 700; letter-spacing: .04em;
	color: var(--ck-ecl2-amber);
	background: var(--ck-ecl2-obsidian);
	padding: 1px 8px;
	border: 1px solid var(--ck-ecl2-border);
	border-radius: 100px;
}
.ck-ecl2__feed-arrows {
	display: flex; justify-content: space-around;
	max-width: 70%; margin: 6px auto 0;
	color: var(--ck-ecl2-dim); font-size: 16px; line-height: 1;
}

/* ── Stage / two panes ──────────────────────────────────── */
.ck-ecl2__stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(12px, 2vw, 28px); align-items: stretch; }
.ck-ecl2__divider { width: 1px; background: linear-gradient(180deg, transparent, var(--ck-ecl2-border) 20%, var(--ck-ecl2-border) 80%, transparent); }
.ck-ecl2__pane { display: flex; flex-direction: column; min-width: 0; }
.ck-ecl2__pane-title {
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	text-align: center; margin-bottom: 12px; padding-bottom: 10px;
	border-bottom: 1px solid var(--ck-ecl2-border); color: var(--ck-ecl2-muted);
}
.ck-ecl2__pane--ecl .ck-ecl2__pane-title { color: var(--ck-ecl2-amber); }

/* ── Counters (the race) ────────────────────────────────── */
.ck-ecl2__count {
	text-align: center; font-size: 12px; font-weight: 600;
	padding: 8px 10px; margin-bottom: 14px; border-radius: 8px;
}
.ck-ecl2__count b { font-size: 18px; font-weight: 800; vertical-align: -1px; }
.ck-ecl2__count-sep { opacity: .4; margin: 0 2px; }
.ck-ecl2__count--fail { color: #ff8a6b; background: rgba(192,58,16,.10); border: 1px solid rgba(192,58,16,.30); }
.ck-ecl2__count--pass { color: var(--ck-ecl2-signal); background: rgba(0,252,136,.07); border: 1px solid rgba(0,252,136,.30); }

/* ── Left: duplicate fragments pile ─────────────────────── */
.ck-ecl2__dups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.ck-ecl2__dup {
	position: relative;
	padding: 8px 10px;
	background: rgba(255,255,255,.02);
	border: 1px solid var(--ck-ecl2-border);
	border-radius: 6px;
	transition: opacity .4s ease, transform .4s ease;
}
.ck-ecl2__dup-src { display: block; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--ck-ecl2-muted); }
.ck-ecl2__dup-name { display: block; font-size: 12px; font-weight: 600; color: var(--ck-ecl2-text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-ecl2__dup.is-dup { border-color: rgba(192,58,16,.40); }
.ck-ecl2__dup-stamp {
	display: inline-block; margin-top: 6px;
	font-size: 8px; font-weight: 800; letter-spacing: .08em;
	color: #ff8a6b; background: rgba(192,58,16,.16);
	border: 1px solid rgba(192,58,16,.40);
	border-radius: 3px; padding: 1px 5px;
	transform: rotate(-3deg);
}

/* ── Right: the entity that learns ──────────────────────── */
.ck-ecl2__entity {
	display: flex; flex-direction: column; gap: 10px;
	padding: 14px;
	background: linear-gradient(160deg, rgba(255,78,31,.10), rgba(240,146,10,.05)), var(--ck-ecl2-card);
	border: 1px solid rgba(255,78,31,.40);
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(255,78,31,.06), 0 8px 30px rgba(0,0,0,.35);
	transition: border-color .4s ease, box-shadow .4s ease;
}
.ck-ecl2__entity-lbl { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ck-ecl2-amber); }
.ck-ecl2__entity-name { font-size: 17px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 2px; }
.ck-ecl2__grp { display: flex; flex-direction: column; gap: 5px; }
.ck-ecl2__grp-lbl { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ck-ecl2-dim); }
.ck-ecl2__chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.ck-ecl2__chip {
	font-size: 11px; font-weight: 600; color: var(--ck-ecl2-text);
	background: rgba(255,255,255,.05);
	border: 1px solid var(--ck-ecl2-border);
	border-radius: 5px; padding: 3px 8px;
	transition: opacity .4s ease, transform .4s ease, color .3s ease, border-color .3s ease, background .3s ease;
}

/* ── Rematch callout (the punchline) ────────────────────── */
.ck-ecl2__callout {
	display: flex; align-items: center; gap: 8px;
	margin-top: 14px; padding: 9px 12px;
	font-size: 12px; font-weight: 600;
	color: var(--ck-ecl2-signal);
	background: rgba(0,252,136,.08);
	border: 1px solid rgba(0,252,136,.40);
	border-radius: 8px;
}
.ck-ecl2__callout-icon {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; border-radius: 50%;
	background: rgba(0,252,136,.20); color: var(--ck-ecl2-signal); font-size: 12px;
}

/* ── Coda ───────────────────────────────────────────────── */
.ck-ecl2__coda { text-align: center; margin: clamp(20px, 3vw, 32px) auto 0; max-width: 640px; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.5; color: var(--ck-ecl2-muted); }

/* ============================================================
   ANIMATED MODE — JS adds .ck-ecl2--anim, hides progressive
   elements, then reveals them across the timeline. Without JS
   (or reduced motion), the full end-state above is shown.
   ============================================================ */
.ck-ecl2--anim .ck-ecl2__tick { color: var(--ck-ecl2-dim); }
.ck-ecl2--anim .ck-ecl2__tick.is-active { color: #fff; border-color: var(--ck-ecl2-ember); background: rgba(255,78,31,.14); }
.ck-ecl2--anim .ck-ecl2__tick.is-done { color: var(--ck-ecl2-muted); border-color: var(--ck-ecl2-border); }

.ck-ecl2--anim .ck-ecl2__rec--in { opacity: 0; transform: translateY(8px); }
.ck-ecl2--anim .ck-ecl2__rec--in.is-in { opacity: 1; transform: none; }

.ck-ecl2--anim .ck-ecl2__dup { opacity: 0; transform: scale(.94); }
.ck-ecl2--anim .ck-ecl2__dup.is-in { opacity: 1; transform: none; }

.ck-ecl2--anim .ck-ecl2__chip { opacity: 0; transform: translateY(4px); }
.ck-ecl2--anim .ck-ecl2__chip.is-in { opacity: 1; transform: none; }
/* freshly-learned chip flashes ember as it lands */
.ck-ecl2--anim .ck-ecl2__chip.is-new { color: #fff; border-color: var(--ck-ecl2-ember); background: rgba(255,78,31,.14); }
/* the alias that catches the obfuscated record flashes signal-green */
.ck-ecl2--anim .ck-ecl2__chip.is-rematch { color: var(--ck-ecl2-signal); border-color: rgba(0,252,136,.6); background: rgba(0,252,136,.12); }

.ck-ecl2--anim .ck-ecl2__callout { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.ck-ecl2--anim .ck-ecl2__callout.is-in { opacity: 1; transform: none; }

.ck-ecl2--anim .ck-ecl2__entity.is-pulse { border-color: rgba(255,78,31,.7); box-shadow: 0 0 0 1px rgba(255,78,31,.18), 0 8px 30px rgba(0,0,0,.4); }
.ck-ecl2--anim .ck-ecl2__entity.is-matched { border-color: rgba(0,252,136,.5); box-shadow: 0 0 0 1px rgba(0,252,136,.12), 0 8px 34px rgba(0,0,0,.45); }

/* ── Responsive: stack the two panes ────────────────────── */
@media (max-width: 760px) {
	.ck-ecl2__stage { grid-template-columns: 1fr; }
	.ck-ecl2__divider { display: none; }
	.ck-ecl2__pane--rtr { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--ck-ecl2-border); }
	.ck-ecl2__feat-val { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.ck-ecl2--anim .ck-ecl2__rec--in,
	.ck-ecl2--anim .ck-ecl2__dup,
	.ck-ecl2--anim .ck-ecl2__chip,
	.ck-ecl2--anim .ck-ecl2__callout { opacity: 1 !important; transform: none !important; }
}