/* =========================================================
   CAPABILITY PAGES — Productivity, Coaching and Sales visual identity
   (deployed 2026-09-19). Loaded after ltc-programmes.css as a separate file (see
   enqueue_identity_styles() in the capability-page blocks class); covers
   only these three pages' own selectors. Ordering preserved from the source file.
   ========================================================= */

@media (max-width: 767px) {
	/* Sales motion pass 2026-09-19f — the stat card's desktop padding/
	   type scale left too little breathing room against a phone-width
	   copy of the same image (which is also proportionally narrower
	   once .ltc-category-hero collapses to 1fr above). */

	.sales-stat-card {
		left: var(--ltc-space-4, 16px);
		bottom: var(--ltc-space-4, 16px);
		padding: var(--ltc-space-3, 12px) var(--ltc-space-4, 14px);
		gap: var(--ltc-space-2, 6px);
		max-width: 72%;
	}

	.sales-stat-card__value {
		font-size: 22px;
	}

	.sales-stat-card__label {
		font-size: 11px;
	}
}

.prod-dashboard,
.coaching-impact,
.sales-trajectory {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.prod-dashboard__gear,
.prod-dashboard__chart,
.coaching-impact__dart,
.sales-trajectory__line,
.sales-trajectory__hand {
	position: absolute;
	height: auto !important;
	display: block;
}

.prod-dashboard__gear,
.coaching-impact__dart {
	transform-origin: 50% 50%;
	will-change: transform;
}

/* Default (reduced-motion-safe) state is the growth line fully drawn
   and fully visible — same "nothing to lose" contract as the
   checkmark above. Only when sales-line-draw is actually running does
   it cycle through the wipe-reveal loop. */

.sales-trajectory__line {
	clip-path: inset(0 0 0 0);
	opacity: 1;
}

/* Sales motion pass 2026-09-19f — REPLACES the 2026-09-19c dot/ring/
   flare decoration (rejected as generic glow/balloon decoration) and
   corrects a real bug in the 2026-09-19e spotlight (below). See
   render_sales_trajectory()'s docblock for the full rationale.

   Enlarge just this category's hero column — additive, scoped to the
   Sales-only --trajectory hook so no other capability page's layout
   (including the four approved/live ones sharing --network) is
   touched. Pushed further than the 2026-09-19e pass (0.85/1.15),
   which read as barely different from the 1.1/0.9 default.

   BUGFIX 2026-09-19f: this MUST stay inside the same min-width:1024px
   floor as .ltc-category-hero's own responsive collapse (see the
   max-width:1023px rule earlier in this file that sets
   .ltc-category-hero to a single 1fr column below that breakpoint).
   The first pass wrote this unconditionally, which — same class
   specificity, later in source order — silently overrode that
   collapse at every width, including mobile, leaving Sales stuck in a
   cramped 2-column layout below 1024px where every other capability
   page correctly stacks to one column. */

@media (min-width: 1024px) {
	.ltc-category-hero--trajectory {
		grid-template-columns: 0.75fr 1.25fr;
	}
}

.ltc-category-hero__image--trajectory {
	aspect-ratio: 1414 / 744;
}

/* Motion pass 2026-09-19i — the illustration's own flat pale-blue
   backdrop (part of the opaque artwork itself, not the transparent
   padding cropped above) was reading as a hard-edged rectangular card
   against the white page. A soft vignette mask feathers that backdrop
   into the page rather than redrawing or colour-keying the artwork
   itself, which risked cutting into the decorative icons/plants that
   are part of the intended scene.

   Applied to this INNER wrapper (photo + line + hand together, so
   they fade in sync), not to .ltc-category-hero__image--trajectory
   itself — that element also contains .sales-stat-card, and a mask on
   a parent clips its entire painted output including children, which
   would have faded the card near the corner along with the image.

   ellipse (not circle) because only ellipse supports percentage radii
   in radial-gradient — a circle with a percentage radius is invalid
   CSS, the same mistake fixed in the 2026-09-19f pass. */

.sales-visual-mask {
	position: absolute;
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 62%, transparent 100%);
	mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 62%, transparent 100%);
}

.ltc-category-hero__image--trajectory img {
	object-fit: cover;
	object-position: 50% 56%;
}

.sales-stat-card {
	position: absolute;
	left: var(--ltc-space-5, 20px);
	bottom: var(--ltc-space-5, 20px);
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: var(--ltc-space-3, 10px);
	background: #fff;
	border-radius: var(--ltc-radius-card, 14px);
	box-shadow: 0 8px 24px rgba(15, 30, 30, 0.14);
	padding: var(--ltc-space-4, 14px) var(--ltc-space-5, 18px);
	max-width: 62%;
}

.sales-stat-card__value {
	font-size: var(--ltc-type-h3, 28px);
	font-weight: var(--ltc-weight-numeral, 700);
	color: var(--ltc-ink-950, #0f1e1e);
	line-height: 1;
}

.sales-stat-card__label {
	font-size: 12px;
	font-weight: var(--ltc-weight-label, 600);
	color: var(--ltc-text-muted, #3E5457);
	line-height: 1.3;
}

/* Sales motion pass 2026-09-19h — REPLACES the 2026-09-19e/f/g
   spotlight (a masked, brightened duplicate of the same static
   pixels) with an actual extracted, independently-animated piece of
   the artwork: the bearded man's gesturing hand. See
   render_sales_trajectory()'s docblock for the extraction method.
   Same convention as every other sprite in this file: absolute,
   height:auto!important via the shared selector below, transform-
   origin at the wrist (roughly the sprite's own bottom-right, where
   the cuff meets the arm) so the rotation reads as a wrist pivot, not
   the whole hand swinging from its fingertips. */

.sales-trajectory__hand {
	transform-origin: 82% 88%;
	will-change: transform;
}

.prod-dashboard__ring-glow,
.coaching-impact__bulb-glow {
	position: absolute;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 182, 61, 0.75) 0%, rgba(244, 182, 61, 0) 68%);
	opacity: 0.28;
	/* Amber over an already-yellow/warm subject (the lit bulb) barely
	   registers as a plain alpha blend — same hue, low contrast. Screen
	   blend mode genuinely brightens the pixels underneath regardless
	   of hue, which is what "dim -> bright" actually needs to read. */
	mix-blend-mode: screen;
}

.prod-dashboard__ring-glow {
	width: 26%;
	height: 46%;
	background: radial-gradient(circle, rgba(29, 145, 149, 0.45) 0%, rgba(29, 145, 149, 0) 70%);
}

/* Individual chart bars (motion pass 2026-09-19b) — plain elements,
   not extracted sprites (see render_productivity_dashboard()'s
   docblock for why). Positioned/sized to their full resting height —
   the reduced-motion-safe "nothing to lose" state — and animated via
   a bottom-anchored scaleY so growth reads as the bar rising from its
   base rather than stretching from its centre. */

.prod-dashboard__bar {
	position: absolute;
	bottom: auto;
	background: linear-gradient(180deg, color-mix(in srgb, var(--bar-color) 100%, white 25%), var(--bar-color));
	border-radius: 3px 3px 0 0;
	transform-origin: 50% 100%;
	will-change: transform;
}

.prod-dashboard__track-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--ltc-teal-500, #00B7BE);
	box-shadow: 0 0 7px 2px rgba(29, 145, 149, 0.55);
	opacity: 0;
}

.ltc-category-hero__image--dashboard > img {
	filter: saturate(1.32) contrast(1.08) brightness(1.02);
}

.coaching-impact__bulb-glow {
	width: 13%;
	height: 26%;
}

.coaching-impact__ring {
	position: absolute;
	width: 10%;
	height: 10%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 3px solid rgba(230, 126, 74, 0.65);
	opacity: 0;
}

/* Coaching motion pass 2026-09-19k — REPLACES the 2026-09-19j two-
   panel diptych (correctly rejected: cutting the photo into two boxes
   with a gap read as two unrelated photos, not a considered choice
   about what the page is saying). See render_coaching_impact()'s
   docblock for the full rationale — this is back to ONE continuous
   photo, cropped to its own real content bounding box (x 35-1511,
   y 190-955 of 1536x1024 — measured via the transparent PNG's alpha
   channel, not estimated) instead of the tighter default crop that
   let the one-to-one pair dominate. Same technique as Sales's
   --trajectory crop: the wrapper owns the crop aspect-ratio, the img
   keeps its true native width/height attributes.

   Widen the hero column the same way Sales does — additive, scoped to
   the Coaching-only --impact hook, min-width:1024px floor to match
   .ltc-category-hero's own mobile single-column collapse. */

@media (min-width: 1024px) {
	.ltc-category-hero--impact {
		grid-template-columns: 0.8fr 1.2fr;
	}
}

.ltc-category-hero__image--impact {
	position: relative;
	background: transparent;
	border-radius: var(--ltc-radius-image, 20px);
	overflow: hidden;
	aspect-ratio: 1476 / 765;
}

.ltc-category-hero__image--impact img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media not (prefers-reduced-motion: reduce) {
	/* ---- Productivity: dashboard elements ---- */

	@keyframes prod-ring-breathe {
		0%, 100% { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
		50%      { opacity: 0.55; transform: translate(-50%, -50%) scale(1.06); }
	}

	@keyframes prod-chart-shimmer {
		0%, 40%   { filter: brightness(1) drop-shadow(0 0 0 rgba(244, 182, 61, 0)); }
		55%       { filter: brightness(1.28) drop-shadow(0 0 10px rgba(244, 182, 61, 0.55)); }
		70%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(244, 182, 61, 0)); }
	}

	@keyframes prod-bar-rise {
		0%, 100% { transform: scaleY(1); }
		45%      { transform: scaleY(0.72); }
		75%      { transform: scaleY(1.05); }
		88%      { transform: scaleY(0.97); }
	}

	@keyframes prod-scene-breathe {
		0%, 100% { transform: scale(1); }
		50%      { transform: scale(1.025); }
	}

	@keyframes prod-track-travel {
		0%        { left: 58.091%; opacity: 0; }
		8%        { opacity: 0.9; }
		45%       { left: 66.406%; opacity: 0.9; }
		55%       { opacity: 0.4; }
		60%, 100% { left: 58.091%; opacity: 0; }
	}

	.prod-dashboard__gear {
		animation:
			ps-intro-pop 550ms var(--ltc-ease, ease-out) both calc(var(--ltc-duration-image, 750ms) + 150ms),
			ps-gear-spin 9000ms linear infinite calc(var(--ltc-duration-image, 750ms) + 700ms);
	}

	.prod-dashboard__bar {
		animation: prod-bar-rise 4200ms ease-in-out infinite;
	}

	.prod-dashboard__bar--1 { animation-delay: calc(var(--ltc-duration-image, 750ms) + 600ms); }

	.prod-dashboard__bar--2 { animation-delay: calc(var(--ltc-duration-image, 750ms) + 1000ms); }

	.prod-dashboard__bar--3 { animation-delay: calc(var(--ltc-duration-image, 750ms) + 1400ms); }

	.prod-dashboard__bar--4 { animation-delay: calc(var(--ltc-duration-image, 750ms) + 1800ms); }

	.prod-dashboard__ring-glow {
		animation: prod-ring-breathe 5400ms ease-in-out infinite calc(var(--ltc-duration-image, 750ms) + 500ms);
	}

	.prod-dashboard__track-dot {
		animation: prod-track-travel 3800ms ease-in-out infinite calc(var(--ltc-duration-image, 750ms) + 2200ms);
	}

	.ltc-category-hero__image--dashboard > img {
		animation: prod-scene-breathe 22000ms ease-in-out infinite;
	}

	/* ---- Coaching: dart impact cycle ---- */

	@keyframes coaching-dart-impact {
		0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
		8%       { transform: translate(-6%, -6%) rotate(-6deg) scale(0.96); }
		20%      { transform: translate(0, 0) rotate(2deg) scale(1.06); }
		32%      { transform: translate(0, 0) rotate(0deg) scale(1); }
	}

	@keyframes coaching-impact-ring {
		0%, 17%  { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
		22%      { opacity: 0.6; transform: translate(-50%, -50%) scale(0.9); }
		40%      { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
		100%     { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
	}

	@keyframes coaching-bulb-breathe {
		0%, 100% { opacity: 0.24; transform: translate(-50%, -50%) scale(1); }
		50%      { opacity: 0.6; transform: translate(-50%, -50%) scale(1.08); }
	}

	.coaching-impact__dart {
		animation:
			ps-intro-pop 550ms var(--ltc-ease, ease-out) both calc(var(--ltc-duration-image, 750ms) + 150ms),
			coaching-dart-impact 3400ms ease-in-out infinite calc(var(--ltc-duration-image, 750ms) + 900ms);
	}

	.coaching-impact__ring {
		animation: coaching-impact-ring 3400ms ease-out infinite calc(var(--ltc-duration-image, 750ms) + 900ms);
	}

	.coaching-impact__bulb-glow {
		animation: coaching-bulb-breathe 4600ms ease-in-out infinite calc(var(--ltc-duration-image, 750ms) + 500ms);
	}

	/* ---- Sales: growth-line draw cycle ----
	   Kept from the 2026-09-19c pass — the one animated element that
	   isn't decoration, it's the page's own claim playing out. Draw
	   0-55%, hold 55-85%, reset. */

	@keyframes sales-line-draw {
		0%        { clip-path: inset(0 100% 0 0); opacity: 0.9; }
		55%       { clip-path: inset(0 0% 0 0); opacity: 1; }
		85%       { clip-path: inset(0 0% 0 0); opacity: 1; }
		100%      { clip-path: inset(0 100% 0 0); opacity: 0.9; }
	}

	@keyframes sales-line-glow {
		0%, 52%   { filter: drop-shadow(0 0 0 rgba(244, 182, 61, 0)); }
		62%       { filter: drop-shadow(0 0 8px rgba(244, 182, 61, 0.7)); }
		85%, 100% { filter: drop-shadow(0 0 0 rgba(244, 182, 61, 0)); }
	}

	.sales-trajectory__line {
		animation:
			sales-line-draw 5000ms ease-in-out infinite calc(var(--ltc-duration-image, 750ms) + 600ms),
			sales-line-glow 5000ms ease-in-out infinite calc(var(--ltc-duration-image, 750ms) + 600ms);
	}

	/* ---- Sales: hand gesture, motion pass 2026-09-19h ----
	   REPLACES the 2026-09-19e/f/g spotlight. This is the actual
	   extracted hand (see render_sales_trajectory()'s docblock and the
	   .sales-trajectory__hand rule above) rotating from the wrist in an
	   uneven, talking-gesture pattern — irregular amplitude/timing on
	   purpose, a real hand emphasizing points doesn't move on a clean
	   sine wave. Continuous, not narrative-gated, same "a gesture mid-
	   conversation never fully stops" judgement already applied to the
	   gears elsewhere in this file. Base (0deg) state is the sprite's
	   own real original angle — reduced-motion visitors see the exact
	   unedited photo. */

	@keyframes sales-hand-gesture {
		0%, 100% { transform: rotate(0deg); }
		15%      { transform: rotate(-7deg); }
		35%      { transform: rotate(4deg); }
		50%      { transform: rotate(-3deg); }
		68%      { transform: rotate(6deg); }
		85%      { transform: rotate(-2deg); }
	}

	.sales-trajectory__hand {
		animation: sales-hand-gesture 4200ms ease-in-out infinite calc(var(--ltc-duration-image, 750ms) + 600ms);
	}
}