/* Legacy Modernisation hero illustration.
   See inc/hero-illustration-legacy.php. Base styles draw the finished
   migration (legacy modules ghosted, all tiles live, new capability lit,
   progress full, no blocks in flight); all motion is inside the no-preference
   media query. One 12s master timeline: module i migrates at 6/18/30/42/54%
   (ghost out, block travels ~8%, tile pops in), the new tile lands at
   70–76%, hold, reset 92–97%. */

.lm-hero {
	position: absolute;
	inset: 0;
}

.lm-hero svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	font-family: var(--font-heading);
}

.lm-hero__glow { fill: var(--cyan-tint); opacity: 0.5; }

.lm-hero__ring {
	fill: none;
	stroke: var(--cyan-tint);
	stroke-width: 12;
}

.lm-hero__ring-dash {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.5;
	stroke-dasharray: 2 10;
	stroke-linecap: round;
	opacity: 0.35;
}

.lm-hero__dot--a { fill: #b9e4f7; }
.lm-hero__dot--b { fill: var(--navy); opacity: 0.4; }
.lm-hero__dot--c { fill: var(--cyan); }

/* ---- Lanes ---- */
.lm-hero__lane {
	fill: none;
	stroke: var(--line);
	stroke-width: 1.5;
	stroke-dasharray: 2 6;
	stroke-linecap: round;
}

.lm-hero__lane--new { stroke: var(--cyan); }

/* ---- Legacy rack ---- */
.lm-hero__rack { filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.1)); }

.lm-hero__chassis {
	fill: var(--mist);
	stroke: var(--line);
	stroke-width: 1.5;
}

.lm-hero__chassis-bar { fill: var(--slate-light); opacity: 0.6; }

.lm-hero__slab-bg {
	fill: var(--mist-dark);
	stroke: var(--slate-light);
	stroke-width: 1.2;
}

.lm-hero__vent {
	stroke: var(--slate-light);
	stroke-width: 1.5;
	stroke-linecap: round;
}

.lm-hero__led       { fill: var(--slate-light); }
.lm-hero__slab-btn  { fill: var(--slate-light); opacity: 0.55; }

.lm-hero__ghost {
	fill: none;
	stroke: var(--slate-light);
	stroke-width: 1.2;
	stroke-dasharray: 4 5;
	opacity: 1;
}

/* Static end state: the modules have migrated, only ghosts remain. */
.lm-hero__slab { opacity: 0; }

/* ---- Modern tiles ---- */
.lm-hero__tile,
.lm-hero__chip,
.lm-hero__new { filter: drop-shadow(0 10px 16px rgba(1, 36, 126, 0.14)); }

.lm-hero__tile-bg {
	fill: var(--paper);
	stroke: var(--line);
	stroke-width: 1;
}

.lm-hero__glyph {
	fill: none;
	stroke: var(--navy);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lm-hero__status { fill: var(--cyan); }

.lm-hero__flash {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	opacity: 0;
}

.lm-hero__new-bg { fill: var(--cyan); }
.lm-hero__spark  { fill: var(--paper); }

.lm-hero__burst {
	fill: none;
	stroke: var(--cyan);
	stroke-width: 2;
	opacity: 0;
}

/* ---- Chip ---- */
.lm-hero__live { fill: var(--cyan); }
.lm-hero__chip-text {
	fill: var(--navy);
	font-size: 13px;
	font-weight: 600;
}

/* ---- Blocks in flight (hidden when static) ---- */
.lm-hero__packet {
	fill: var(--cyan);
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(0, 159, 226, 0.7));
	offset-rotate: 0deg;
}

/* ---- Phase track ---- */
.lm-hero__track { fill: var(--mist-dark); }
.lm-hero__fill  { fill: var(--cyan); }

.lm-hero__phase {
	fill: var(--cyan);
	stroke: var(--paper);
	stroke-width: 2;
}

.lm-hero__label {
	fill: var(--slate);
	font-size: 11.5px;
	font-weight: 500;
	text-anchor: middle;
}

/* ---- Motion ---- */
.lm-hero__ring-dash { transform-box: view-box; transform-origin: 260px 260px; }

.lm-hero__tile,
.lm-hero__new,
.lm-hero__flash,
.lm-hero__burst,
.lm-hero__status,
.lm-hero__live,
.lm-hero__dot,
.lm-hero__phase {
	transform-box: fill-box;
	transform-origin: center;
}

.lm-hero__fill { transform-box: fill-box; transform-origin: left center; }

@media (prefers-reduced-motion: no-preference) {
	.lm-hero__ring-dash { animation: lm-spin 90s linear infinite; }
	.lm-hero__dot       { animation: lm-drift 7s ease-in-out infinite; }
	.lm-hero__dot--b    { animation-delay: -3s; }
	.lm-hero__dot--c    { animation-delay: -5s; }
	.lm-hero__status    { animation: lm-status 2.4s ease-in-out infinite; }
	.lm-hero__live      { animation: lm-status 1.8s ease-in-out infinite; }
	.lm-hero__lane      { animation: lm-flow 2s linear infinite; }

	.lm-hero__fill      { animation: lm-fill 12s ease-in-out infinite; }
	.lm-hero__phase--2  { animation: lm-phase-2 12s ease-out infinite; }
	.lm-hero__phase--3  { animation: lm-phase-3 12s ease-out infinite; }
	.lm-hero__new       { animation: lm-new 12s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.lm-hero__burst     { animation: lm-burst 12s ease-out infinite; }

	.lm-hero__slab--0  { animation: lm-slab-0 12s ease-in-out infinite; }
	.lm-hero__ghost--0 { animation: lm-ghost-0 12s ease-in-out infinite; }
	.lm-hero__packet--0 { animation: lm-packet-0 12s ease-in-out infinite; }
	.lm-hero__tile--0  { animation: lm-tile-0 12s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.lm-hero__flash--0 { animation: lm-flash-0 12s ease-out infinite; }
	.lm-hero__slab--1  { animation: lm-slab-1 12s ease-in-out infinite; }
	.lm-hero__ghost--1 { animation: lm-ghost-1 12s ease-in-out infinite; }
	.lm-hero__packet--1 { animation: lm-packet-1 12s ease-in-out infinite; }
	.lm-hero__tile--1  { animation: lm-tile-1 12s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.lm-hero__flash--1 { animation: lm-flash-1 12s ease-out infinite; }
	.lm-hero__slab--2  { animation: lm-slab-2 12s ease-in-out infinite; }
	.lm-hero__ghost--2 { animation: lm-ghost-2 12s ease-in-out infinite; }
	.lm-hero__packet--2 { animation: lm-packet-2 12s ease-in-out infinite; }
	.lm-hero__tile--2  { animation: lm-tile-2 12s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.lm-hero__flash--2 { animation: lm-flash-2 12s ease-out infinite; }
	.lm-hero__slab--3  { animation: lm-slab-3 12s ease-in-out infinite; }
	.lm-hero__ghost--3 { animation: lm-ghost-3 12s ease-in-out infinite; }
	.lm-hero__packet--3 { animation: lm-packet-3 12s ease-in-out infinite; }
	.lm-hero__tile--3  { animation: lm-tile-3 12s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.lm-hero__flash--3 { animation: lm-flash-3 12s ease-out infinite; }
	.lm-hero__slab--4  { animation: lm-slab-4 12s ease-in-out infinite; }
	.lm-hero__ghost--4 { animation: lm-ghost-4 12s ease-in-out infinite; }
	.lm-hero__packet--4 { animation: lm-packet-4 12s ease-in-out infinite; }
	.lm-hero__tile--4  { animation: lm-tile-4 12s cubic-bezier(0.2, 0.9, 0.3, 1.2) infinite; }
	.lm-hero__flash--4 { animation: lm-flash-4 12s ease-out infinite; }
}

@keyframes lm-spin  { to { transform: rotate(360deg); } }
@keyframes lm-flow  { to { stroke-dashoffset: -8; } }

@keyframes lm-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(6px, -10px); }
}

@keyframes lm-status {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.5); opacity: 0.5; }
}

@keyframes lm-slab-0 {
	0%, 6% { opacity: 1; transform: translateX(0); }
	9%, 92% { opacity: 0; transform: translateX(10px); }
	96%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes lm-ghost-0 {
	0%, 6% { opacity: 0; }
	9%, 92% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

@keyframes lm-packet-0 {
	0%, 6% { offset-distance: 0%; opacity: 0; }
	7% { offset-distance: 0%; opacity: 1; }
	15% { offset-distance: 100%; opacity: 1; }
	16%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes lm-tile-0 {
	0%, 14% { opacity: 0; transform: scale(0.5); }
	18% { opacity: 1; transform: scale(1); }
	92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes lm-flash-0 {
	0%, 14% { opacity: 0; transform: scale(1); }
	15% { opacity: 0.9; transform: scale(1); }
	23%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes lm-slab-1 {
	0%, 18% { opacity: 1; transform: translateX(0); }
	21%, 92% { opacity: 0; transform: translateX(10px); }
	96%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes lm-ghost-1 {
	0%, 18% { opacity: 0; }
	21%, 92% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

@keyframes lm-packet-1 {
	0%, 18% { offset-distance: 0%; opacity: 0; }
	19% { offset-distance: 0%; opacity: 1; }
	27% { offset-distance: 100%; opacity: 1; }
	28%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes lm-tile-1 {
	0%, 26% { opacity: 0; transform: scale(0.5); }
	30% { opacity: 1; transform: scale(1); }
	92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes lm-flash-1 {
	0%, 26% { opacity: 0; transform: scale(1); }
	27% { opacity: 0.9; transform: scale(1); }
	35%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes lm-slab-2 {
	0%, 30% { opacity: 1; transform: translateX(0); }
	33%, 92% { opacity: 0; transform: translateX(10px); }
	96%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes lm-ghost-2 {
	0%, 30% { opacity: 0; }
	33%, 92% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

@keyframes lm-packet-2 {
	0%, 30% { offset-distance: 0%; opacity: 0; }
	31% { offset-distance: 0%; opacity: 1; }
	39% { offset-distance: 100%; opacity: 1; }
	40%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes lm-tile-2 {
	0%, 38% { opacity: 0; transform: scale(0.5); }
	42% { opacity: 1; transform: scale(1); }
	92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes lm-flash-2 {
	0%, 38% { opacity: 0; transform: scale(1); }
	39% { opacity: 0.9; transform: scale(1); }
	47%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes lm-slab-3 {
	0%, 42% { opacity: 1; transform: translateX(0); }
	45%, 92% { opacity: 0; transform: translateX(10px); }
	96%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes lm-ghost-3 {
	0%, 42% { opacity: 0; }
	45%, 92% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

@keyframes lm-packet-3 {
	0%, 42% { offset-distance: 0%; opacity: 0; }
	43% { offset-distance: 0%; opacity: 1; }
	51% { offset-distance: 100%; opacity: 1; }
	52%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes lm-tile-3 {
	0%, 50% { opacity: 0; transform: scale(0.5); }
	54% { opacity: 1; transform: scale(1); }
	92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes lm-flash-3 {
	0%, 50% { opacity: 0; transform: scale(1); }
	51% { opacity: 0.9; transform: scale(1); }
	59%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes lm-slab-4 {
	0%, 54% { opacity: 1; transform: translateX(0); }
	57%, 92% { opacity: 0; transform: translateX(10px); }
	96%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes lm-ghost-4 {
	0%, 54% { opacity: 0; }
	57%, 92% { opacity: 1; }
	96%, 100% { opacity: 0; }
}

@keyframes lm-packet-4 {
	0%, 54% { offset-distance: 0%; opacity: 0; }
	55% { offset-distance: 0%; opacity: 1; }
	63% { offset-distance: 100%; opacity: 1; }
	64%, 100% { offset-distance: 100%; opacity: 0; }
}

@keyframes lm-tile-4 {
	0%, 62% { opacity: 0; transform: scale(0.5); }
	66% { opacity: 1; transform: scale(1); }
	92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0.5); }
}

@keyframes lm-flash-4 {
	0%, 62% { opacity: 0; transform: scale(1); }
	63% { opacity: 0.9; transform: scale(1); }
	71%, 100% { opacity: 0; transform: scale(1.4); }
}

@keyframes lm-fill {
	0%, 6% { transform: scaleX(0.03); }
	66%, 92% { transform: scaleX(1); }
	97%, 100% { transform: scaleX(0.03); }
}

@keyframes lm-phase-2 {
	0%, 34% { fill: var(--paper); stroke: var(--line); }
	38%, 92% { fill: var(--cyan); stroke: var(--paper); }
	97%, 100% { fill: var(--paper); stroke: var(--line); }
}

@keyframes lm-phase-3 {
	0%, 66% { fill: var(--paper); stroke: var(--line); }
	70%, 92% { fill: var(--cyan); stroke: var(--paper); }
	97%, 100% { fill: var(--paper); stroke: var(--line); }
}

@keyframes lm-new {
	0%, 68% { opacity: 0; transform: scale(0.4); }
	75% { opacity: 1; transform: scale(1.12); }
	78%, 92% { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0.4); }
}

@keyframes lm-burst {
	0%, 70% { opacity: 0; transform: scale(0.9); }
	72% { opacity: 0.8; transform: scale(1); }
	84%, 100% { opacity: 0; transform: scale(1.8); }
}

@media (max-width: 1024px) {
	.lm-hero__lane { animation: none; }
}