/**
 * _partials/in-development-case-study.css — variant-specific styles for
 * in-development case studies (status === 'in-development', e.g. Phlip).
 *
 * Loaded by src/_includes/layouts/in-development-case-study.njk via its
 * `styles:` frontmatter array, ALONGSIDE pages/case-study.css (which
 * carries the base detail-layout chrome both variants share).
 *
 * Sibling-variant additions: status pill with pulsing dot, live-chip
 * with ring animation, latest-update meta strip, CTA-banner copy
 * overrides. Volt-400 budget is intentionally tight — pill + dot above,
 * variant-specific CTA below. Class prefix: `innov8-csid-`.
 *
 * Extracted from src/assets/css/app.css IN-DEVELOPMENT CASE STUDY
 * VARIANT section as part of #147 PR 3 — CSS file split: complex
 * pages. Content byte-for-byte preserved.
 */

/* ═════════════════════════════════════════════════════════════════════════
	IN-DEVELOPMENT CASE STUDY VARIANT
	Companion CSS for src/_includes/layouts/in-development-case-study.njk.
	Sibling-variant styling for active engagements (status === 'in-
	development' in frontmatter). Layered as overrides on top of the
	shared .innov8-cs-* structural CSS — the layout adds .innov8-csid
	to the article root alongside .innov8-cs so:

	.innov8-csid .innov8-cs-foo { ... }   → variant override of a
																					shared selector.
	.innov8-csid-bar             { ... }   → variant-only new element
																					(status pill, LIVE chip,
																					Latest update block, etc.)

	Volt-400 budget on the page is intentionally tight — pill above
	the H1, LIVE chip on the Project URL block, LIVE chip + volt
	border on the final outcome card. Three appearances total. The
	page reads as "alive" rather than "alarmed" because the volt is
	concentrated in three discreet points of energy rather than
	repainted everywhere.

	See:
		docs/branding/design-system/preview/In-Development Case Study
			- Layout Wireframes.html (the wireframe + rationale)
		src/_includes/layouts/in-development-case-study.njk
		src/case-studies/phlip.md (first instance)
	═════════════════════════════════════════════════════════════════════════ */

@layer components {
	/* ─── A. Status pill ──────────────────────────────────────────────
		Load-bearing element. Sits above the H1 with a 24px gap (achieved
		via the title's margin-top below). Dark glass body, 1px volt
		border at the alias's 28% alpha, volt text + dot at full chroma.
		The halo (--shadow-glow-volt) reads as ambient signal rather than
		a screaming dashboard chip. */
	.innov8-csid-status-pill {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 7px 14px 7px 12px;
		margin-bottom: 24px;
		border-radius: var(--radius-pill);
		background: var(--color-status-active-soft);
		border: 1px solid var(--color-status-active-border);
		box-shadow: var(--shadow-glow-volt);
		font-family: var(--font-mono);
		font-size: var(--text-overline);
		font-weight: 600;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--color-status-active);
	}

	.innov8-csid-status-pill-dot {
		position: relative;
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: var(--radius-pill);
		background: var(--color-status-active);
		box-shadow: 0 0 10px rgba(204, 255, 0, 0.9);
		animation: innov8-csid-dot-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	}

	/* The pulse ring — sibling element inside the dot, sized by its
		parent's box. Expands 8px (parent) → 24px (3x) on the same
		loop the dot dims to 35%, fading out as it expands. */
	.innov8-csid-status-pill-ring {
		position: absolute;
		inset: -1px;
		border-radius: var(--radius-pill);
		border: 1px solid var(--color-status-active);
		animation: innov8-csid-ring-expand 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) infinite;
		pointer-events: none;
	}

	@keyframes innov8-csid-dot-pulse {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0.35;
		}
	}

	@keyframes innov8-csid-ring-expand {
		0% {
			transform: scale(1);
			opacity: 0.6;
		}
		80%,
		100% {
			transform: scale(2.6);
			opacity: 0;
		}
	}

	/* ─── Title tagline ───────────────────────────────────────────────
		The optional `tagline` frontmatter field renders inline after the
		project name in the H1 (e.g. "Phlip — an AI-native marketplace
		operator."). The completed-engagement case-study.njk layout
		doesn't render this — the bare `title` survives there for
		filter / listing parity. */
	.innov8-csid-title-tagline {
		font-weight: 600;
		color: var(--fg-secondary);
	}

	/* ─── B. Metadata strip — URL column ─────────────────────────────
		The variant's metadata strip has a URL column that the completed-
		engagement layout doesn't. Styled as a cyan link inside the
		.innov8-cs-meta-value cell so it picks up the metadata-strip's
		baseline typography but reads as a clickable affordance. */
	.innov8-csid-meta-url {
		color: var(--accent-spark);
		text-decoration: none;
		transition:
			color var(--duration-base) var(--ease-out),
			gap var(--duration-base) var(--ease-out);
	}

	.innov8-csid-meta-url:hover,
	.innov8-csid-meta-url:focus-visible {
		color: var(--color-cyan-200);
		outline: none;
	}

	.innov8-csid-meta-url-arrow {
		display: inline-block;
		margin-left: 4px;
		transition: transform var(--duration-base) var(--ease-out);
	}

	.innov8-csid-meta-url:hover .innov8-csid-meta-url-arrow,
	.innov8-csid-meta-url:focus-visible .innov8-csid-meta-url-arrow {
		transform: translate(2px, -2px);
	}

	/* ─── C. Metrics strip — "Where we are now" eyebrow ──────────────
		The variant's eyebrow tints volt-400 instead of the default
		cyan-300 to carry the present-tense / live-status framing into
		the metrics section. Only the dot + label color change — the
		eyebrow shape inherits from the shared `.eyebrow` styling. */
	.innov8-csid .innov8-cs-eyebrow .innov8-csid-eyebrow {
		color: var(--color-status-active);
	}

	.innov8-csid .innov8-cs-eyebrow .innov8-csid-eyebrow .eyebrow-dot {
		background: var(--color-status-active);
	}

	/* ─── Outcome card — `--active` modifier ─────────────────────────
		The last outcome card carries the "live" status — for Phlip,
		that's the "Series Seed / Currently raising Q2 2026" card. It
		picks up a volt border + relative positioning so the LIVE chip
		can anchor to its top-right corner. */
	.innov8-cs-metric--active {
		position: relative;
		border-color: var(--color-status-active-border);
	}

	.innov8-cs-metric--active:hover {
		border-color: var(--color-status-active);
	}

	/* ─── LIVE chip ───────────────────────────────────────────────────
		Reused on:
			- The final outcome card (top-right corner, absolute-positioned)
			- The Project URL sidebar block (inline next to the label)
		Both anchors are handled by the parent's positioning — the chip
		itself just lays out its dot + label horizontally. */
	.innov8-csid-live-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 3px 10px 3px 8px;
		border-radius: var(--radius-pill);
		background: var(--color-status-active-soft);
		border: 1px solid var(--color-status-active-border);
		font-family: var(--font-mono);
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--color-status-active);
	}

	.innov8-cs-metric--active .innov8-csid-live-chip {
		position: absolute;
		top: clamp(14px, 1.4vw, 18px);
		right: clamp(14px, 1.4vw, 18px);
	}

	.innov8-csid-live-chip-dot {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: var(--radius-pill);
		background: var(--color-status-active);
		box-shadow: 0 0 6px rgba(204, 255, 0, 0.9);
		animation: innov8-csid-dot-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	}

	/* The sidebar label-row is a flex container that puts the section
		title ("Project URL") next to the LIVE chip. */
	.innov8-cs-side-label-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	/* ─── D. Latest update sidebar block ──────────────────────────────
		The new variant-only sidebar block. Date + one-line note with a
		volt-tinted eyebrow. Only renders when frontmatter populates
		`latest_update.date`, so a new in-dev case study can ship before
		there's anything to update. */
	.innov8-csid-latest-update-label {
		color: var(--color-status-active);
	}

	.innov8-csid-latest-update-date {
		font-family: var(--font-mono);
		font-size: var(--text-caption);
		letter-spacing: 0.08em;
		color: var(--fg-tertiary);
	}

	.innov8-csid-latest-update-note {
		margin: 0;
		font-family: var(--font-sans);
		font-size: var(--text-body);
		line-height: var(--leading-snug);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	/* ─── E. CTA banner — variant copy ────────────────────────────────
		The variant CTA uses the existing `.innov8-cs-cta-*` chrome but
		adds an eyebrow above the title and a soft-secondary span for
		the title's second line. The structural CTA flex layout, button
		styling, and ambient glow all inherit unchanged. */
	.innov8-csid-cta-eyebrow {
		margin-bottom: 16px;
	}

	.innov8-csid-cta-title-soft {
		color: var(--fg-secondary);
		font-weight: 600;
	}

	/* ─── F. Two-circles hero background ──────────────────────────────
		The kit's IN-DEVELOPMENT CASE STUDY hero pairs cyan + amber radial
		glow blobs (blurred, soft) behind the page chrome — the canonical
		two-accent semantic-duality treatment per #164. The shared
		.innov8-cs-hero rule in pages/case-study.css paints SUBTLE blue +
		cyan radial-gradients (0.16 + 0.08 alpha) directly on the
		background property; here we OVERLAY a stronger cyan + amber pair
		(cyan upper-left, amber lower-right) via ::before / ::after
		pseudo-elements — the cyan + amber semantic-duality signature the
		Animated Hero kit ships and Mass Effect's Paragon/Renegade UI
		canonicalized in the cultural reference pool.

		Implementation notes:
			• overflow: hidden caps the blur radius at the hero box edge
				so the amber glow doesn't bleed into the metadata strip below.
			• Hero inner content gets position: relative + z-index: 1 so it
				renders above the absolutely-positioned blobs.
			• opacity: 0.5 + blur(80px) is the soft-glow signature; harder
				values read as solid pucks of color, not ambient signal.
			• The completed-engagement variant (.innov8-cs without
				.innov8-csid) keeps its existing subtle two-blue-tone
				treatment — this scope override is in-dev only.
			• prefers-reduced-motion doesn't apply (blobs are static, not
				animated) — same surface across all motion preferences. */
	.innov8-csid .innov8-cs-hero {
		overflow: hidden;
	}

	.innov8-csid .innov8-cs-hero::before,
	.innov8-csid .innov8-cs-hero::after {
		content: '';
		position: absolute;
		border-radius: 50%;
		filter: blur(80px);
		pointer-events: none;
		opacity: 0.5;
		z-index: 0;
	}

	/* Cyan blob — upper-left, large. Carries the "interactive / live /
		current" semantic that the cyan-spark token represents. */
	.innov8-csid .innov8-cs-hero::before {
		width: 640px;
		height: 640px;
		background: radial-gradient(circle, rgba(95, 236, 253, 0.4), transparent 60%);
		top: -20%;
		left: -10%;
	}

	/* Amber blob — lower-right, slightly smaller. Carries the
		"categorical metadata / structured information" semantic that the
		amber-data token represents. The size + position imbalance is
		intentional — perfect symmetry would read as decorative wallpaper,
		not ambient signal. */
	.innov8-csid .innov8-cs-hero::after {
		width: 520px;
		height: 520px;
		background: radial-gradient(circle, rgba(245, 166, 35, 0.35), transparent 60%);
		bottom: -15%;
		right: -8%;
	}

	/* Hero inner content needs to render above the absolutely-positioned
		blobs — without explicit positioning + z-index, the breadcrumb +
		status pill + title + lead render at the document-flow z-index
		(below the pseudo-elements painted by the rules above). */
	.innov8-csid .innov8-cs-hero-inner {
		position: relative;
		z-index: 1;
	}

	/* ─── Reduced motion fallback ─────────────────────────────────────
		Static dot + ring at full opacity (no pulse animation). The
		signal is still legible — just doesn't breathe. */
	@media (prefers-reduced-motion: reduce) {
		.innov8-csid-status-pill-dot,
		.innov8-csid-status-pill-ring,
		.innov8-csid-live-chip-dot {
			animation: none;
		}

		.innov8-csid-status-pill-ring {
			opacity: 0;
		}

		.innov8-csid-meta-url,
		.innov8-csid-meta-url-arrow,
		.innov8-csid-meta-url:hover .innov8-csid-meta-url-arrow,
		.innov8-csid-meta-url:focus-visible .innov8-csid-meta-url-arrow {
			transition: none;
			transform: none;
		}
	}
}