/**
 * infographics.css — Lumovex 2.0 diagrammatic systems (Phase 5).
 *
 * The Studio Toolset radial orbit, the Production Floor pipeline flow with numbered
 * nodes and connectors, and the Talent waveform treatment. These build on the
 * generic grids from layout.css and the scene accents from scenes.css. Orbit and
 * connector geometry are desktop-only (>=980px) and degrade to the Phase 4 grids on
 * smaller screens; rotation/animation is added in Phase 6.
 *
 * @package Lumovex_2
 * @since   2.0 (Phase 5)
 */

/* ---------------------------------------------------------------------------
 * Scene 03 — Pipeline flow: numbered nodes + connectors
 * ------------------------------------------------------------------------- */
.lvx-pipeline-station .lvx-step-no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--lvx-scene-accent) 50%, transparent);
	color: var(--lvx-scene-accent);
	font-size: 0.8rem;
}

@media (min-width: 980px) {
	.lvx-pipeline-station {
		position: relative;
	}

	/* Forward connector chevron in the inter-card gap */
	.lvx-pipeline-station:not(:last-child)::after {
		content: "";
		position: absolute;
		right: calc(-1 * var(--lvx-sp-40) - 5px);
		top: 56px;
		width: 12px;
		height: 12px;
		border-top: 2px solid var(--lvx-scene-accent);
		border-right: 2px solid var(--lvx-scene-accent);
		transform: rotate(45deg);
		opacity: 0.7;
	}
}

/* ---------------------------------------------------------------------------
 * Scene 04 — Studio Toolset radial orbit
 * ------------------------------------------------------------------------- */
@media (min-width: 980px) {
	.lvx-tool-orbit {
		display: block;
		position: relative;
		min-height: 760px;
		max-width: 820px;
		margin-inline: auto;
	}

	/* Concentric guide ring */
	.lvx-tool-orbit::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 72%;
		aspect-ratio: 1;
		transform: translate(-50%, -50%);
		border: 1px dashed color-mix(in srgb, var(--lvx-scene-accent) 35%, transparent);
		border-radius: 50%;
		pointer-events: none;
	}

	/* Central glow */
	.lvx-tool-orbit::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 72%;
		aspect-ratio: 1;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		background: radial-gradient(circle, color-mix(in srgb, var(--lvx-scene-accent) 12%, transparent) 0%, transparent 62%);
		pointer-events: none;
	}

	.lvx-tool-orbit > .lvx-tool-node {
		position: absolute;
		width: 200px;
		margin: 0;
		transform: translate(-50%, -50%);
	}

	.lvx-tool-orbit > .lvx-tool-node--center {
		left: 50%;
		top: 50%;
		width: 232px;
		z-index: 2;
	}

	/* Six rails at hexagon points around the center */
	.lvx-tool-orbit > .lvx-tool-node:nth-child(2) {
		left: 50%;
		top: 14%;
	}
	.lvx-tool-orbit > .lvx-tool-node:nth-child(3) {
		left: 85%;
		top: 32%;
	}
	.lvx-tool-orbit > .lvx-tool-node:nth-child(4) {
		left: 85%;
		top: 68%;
	}
	.lvx-tool-orbit > .lvx-tool-node:nth-child(5) {
		left: 50%;
		top: 86%;
	}
	.lvx-tool-orbit > .lvx-tool-node:nth-child(6) {
		left: 15%;
		top: 68%;
	}
	.lvx-tool-orbit > .lvx-tool-node:nth-child(7) {
		left: 15%;
		top: 32%;
	}
}

/* ---------------------------------------------------------------------------
 * Scene 07 — Waveform treatment
 * ------------------------------------------------------------------------- */
.lvx-waveform svg {
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lvx-scene-accent) 50%, transparent));
}

/* ---------------------------------------------------------------------------
 * Scene 08 — Rights seals (icon emphasis already state-tinted in scenes.css)
 * ------------------------------------------------------------------------- */
.lvx-rights-card__icon svg {
	width: 100%;
	height: 100%;
}