/* ==========================================================================
   Meghna — Lego growth hero
   Loads alongside home.css on the Lego homepage variant only. Everything below
   the hero is shared with the original homepage and styled by home.css.
   ========================================================================== */

/* The Lego hero needs width for the figure, the shop and the cash stack, so it
   stacks the copy above a full-width stage instead of sitting beside it. */
.hero--lego .hero__inner {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: clamp(.5rem, 1.5vw, 1.25rem);
}
/* The baseplate sits on the bottom edge of the scene, so the hero needs less
   padding underneath it than the sun variant does. */
.hero--lego { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hero--lego .hero__copy { max-width: 46rem; }
.hero--lego .hero__eyebrow,
.hero--lego .hero__cta,
.hero--lego .hero__badges { justify-content: center; }
.hero--lego .hero__lede { margin-inline: auto; }
.hero--lego .hero__title { font-size: clamp(2.4rem, 5.6vw, 4.1rem); }
.hero--lego .hero__stage { width: 100%; }

/* --- Stage -------------------------------------------------------------- */
.lego {
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
}
.lego__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* --- Minifigure --------------------------------------------------------- */
.lego__shadow { fill: #05030f; opacity: .38; }

.lego-navy    { fill: #2b3459; }
.lego-navy-d  { fill: #222a4a; }
.lego-blazer  { fill: #2f3a63; }
.lego-blazer-d { fill: #273153; }
.lego-shirt   { fill: #eef1fb; }
.lego-lapel   { fill: #384573; }
.lego-tie     { fill: #ef5a24; }
.lego-skin    { fill: #d2996f; }
.lego-hand    { fill: #d2996f; stroke: #b07c54; stroke-width: 1.5; }
.lego-eye     { fill: #1a1224; }
.lego-smile   { fill: none; stroke: #1a1224; stroke-width: 2; stroke-linecap: round; }
.lego-hair    { fill: #1d1726; }
.lego-hair-c  { fill: #241d30; }
.lego-stud-top { fill: #241d30; }

/* The raised arm gives a small lift as each brick is handed over. */
.lego__arm-r {
	transform-origin: 19px -103px;
	transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.lego__arm-r.is-lifting { transform: rotate(-19deg); }

/* --- Head ---------------------------------------------------------------
   Her photograph clipped into the head brick, with a warm rim so it still
   reads as a moulded piece rather than a cut-out pasted on the body. */
.lego__head-back { fill: #1d1726; }
.lego__head-edge {
	fill: none;
	stroke: rgba(255, 190, 130, .45);
	stroke-width: 1.5;
}
.lego__head { filter: drop-shadow(0 3px 8px rgba(4, 2, 16, .5)); }

/* --- Mind-map branches --------------------------------------------------- */
.lego__branch {
	fill: none;
	stroke: var(--tint);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-opacity: .3;
	transition: stroke-opacity .3s var(--ease), stroke-width .3s var(--ease);
}
.lego__branch.is-active {
	stroke-opacity: .85;
	stroke-width: 3;
}

/* --- Channel nodes ------------------------------------------------------- */
.lego__node { color: var(--tint); }
.lego__node .icon { color: var(--tint); }
.lego__node-disc {
	fill: #14112c;
	stroke: rgba(255, 255, 255, .16);
	stroke-width: 1;
	filter: drop-shadow(0 4px 10px rgba(4, 2, 16, .55));
}
.lego__node-label {
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	fill: rgba(214, 220, 244, .62);
	transition: fill .3s var(--ease);
}
.lego__node.is-sending .lego__node-disc {
	animation: lego-pulse .6s ease-out;
}
.lego__node.is-sending .lego__node-label { fill: var(--tint); }
@keyframes lego-pulse {
	0%   { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
	40%  { stroke: var(--tint); stroke-width: 3; }
	100% { stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
}

/* --- Customers ---------------------------------------------------------- */
.lego__cust { filter: drop-shadow(0 2px 5px rgba(4, 2, 16, .5)); }

/* --- Shop --------------------------------------------------------------- */
.lego__course.is-new {
	animation: lego-drop .42s cubic-bezier(.34, 1.4, .64, 1);
	transform-box: fill-box;
	transform-origin: center bottom;
}
/* Starts partly visible rather than at zero: if the animation stalls — a
   throttled tab, a backgrounded window — a brick that began at opacity 0 would
   simply be missing from the stack. */
@keyframes lego-drop {
	0%   { transform: translateY(-26px) scaleY(.82); opacity: .3; }
	60%  { transform: translateY(0) scaleY(1.06); opacity: 1; }
	100% { transform: none; opacity: 1; }
}

.lego__awning { animation: lego-fade .5s ease-out; }
.lego__sign   { animation: lego-fade .5s ease-out; }
.lego__sign-text {
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .18em;
}
@keyframes lego-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- Cash --------------------------------------------------------------- */
.lego__note.is-new {
	animation: lego-slide .42s cubic-bezier(.34, 1.4, .64, 1);
	transform-box: fill-box;
	transform-origin: center;
}
@keyframes lego-slide {
	0%   { opacity: .35; transform: translate(22px, -14px); }
	100% { opacity: 1; transform: none; }
}
.lego__note-text {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 700;
}

/* --- Cycle states ------------------------------------------------------- */
/* A brief flourish when the shop tops out… */
.lego.is-complete .lego__shop { animation: lego-celebrate .9s ease-in-out; }
@keyframes lego-celebrate {
	0%, 100% { filter: none; }
	50%      { filter: brightness(1.22) drop-shadow(0 0 18px rgba(255, 194, 74, .55)); }
}

/* …then everything clears before the next cycle. */
.lego.is-resetting .lego__shop,
.lego.is-resetting .lego__cash {
	animation: lego-clear .6s ease-in forwards;
	transform-box: fill-box;
	transform-origin: center bottom;
}
@keyframes lego-clear {
	to { opacity: 0; transform: translateY(14px) scaleY(.9); }
}

/* --- Caption / progress ------------------------------------------------- */
.lego__caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .9rem;
	margin: .25rem 0 0;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(214, 220, 244, .6);
}
.lego__caption-bar {
	position: relative;
	width: clamp(90px, 18vw, 190px);
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}
.lego__caption-fill {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--gold), var(--brand) 55%, var(--magenta));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--ease);
}

/* --- Small screens ------------------------------------------------------ */
@media (max-width: 1024px) {
	/* home.css flips the sun hero so the portrait leads on mobile. The Lego
	   scene is a wide, short band, so the headline should stay first here. */
	.hero--lego .hero__copy { order: 1; }
	.hero--lego .hero__stage { order: 2; }
}

@media (max-width: 700px) {
	/* Let the scene use the full viewport width — it is wide by nature, and the
	   wrapper's side padding costs it noticeable size at this width. */
	.hero--lego .hero__stage {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
	.lego { max-width: none; }
	/* At this scale the labels render around 4px tall — unreadable rather than
	   informative. The icons still identify each channel, and the toolkit
	   section below names them all in real text. */
	.lego__node-label { display: none; }
	.lego__caption {
		flex-direction: column;
		gap: .5rem;
		padding-inline: 1.25rem;
		font-size: .72rem;
		text-align: center;
	}
}

/* --- Motion preferences ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.lego__course.is-new,
	.lego__note.is-new,
	.lego__awning,
	.lego__sign,
	.lego.is-complete .lego__shop,
	.lego.is-resetting .lego__shop,
	.lego.is-resetting .lego__cash {
		animation: none !important;
	}
	.lego__arm-r { transition: none; }
}