/* Home scene 01: drawn example plates (flagship layers, orders pipeline, reports chart, scope). CSS and SVG only. */

.pplate {
	width: min(var(--w, 520px), 82vw);
}

.pplate .part {
	perspective: 900px;
	overflow: hidden;
}

/* flagship: four layers that pull apart on hover or when the plate is centred */
.iso {
	position: relative;
	width: clamp(240px, 26vw, 360px);
	height: clamp(160px, 17vw, 230px);
	transform-style: preserve-3d;
	transform: rotateX(62deg) rotateZ(-38deg);
	transition: transform 1.2s var(--ease);
}

.plate:hover .iso,
.plate.live .iso {
	transform: rotateX(62deg) rotateZ(-38deg) scale(0.92);
}

.ly {
	position: absolute;
	inset: 0;
	border: var(--hairline) solid rgb(var(--gold-300-rgb) / 0.7);
	border-radius: 4px;
	transform: translateZ(calc(var(--z) * 1px));
	transition: transform 1.1s var(--ease);
	background: rgb(var(--ink-900-rgb) / 0.72);
}

.plate:hover .ly,
.plate.live .ly {
	transform: translateZ(calc(var(--z) * 2.9px));
}

.ly.l1 {
	--z: 0;
	background:
		repeating-linear-gradient(0deg, rgb(var(--blue-300-rgb) / 0.18) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(90deg, rgb(var(--blue-300-rgb) / 0.18) 0 1px, transparent 1px 14px), rgb(var(--ink-900-rgb) / 0.8);
	border-color: rgb(var(--blue-300-rgb) / 0.7);
}

.ly.l2 {
	--z: 22;
	background:
		radial-gradient(circle at 30% 40%, var(--blue-500) 0 7px, transparent 8px),
		radial-gradient(circle at 66% 58%, var(--gold-300) 0 5px, transparent 6px),
		radial-gradient(circle at 80% 28%, var(--blue-300) 0 4px, transparent 5px), color-mix(in srgb, var(--ink-700) 80%, transparent);
}

.ly.l3 {
	--z: 44;
	background:
		linear-gradient(90deg, transparent 0 12%, rgb(var(--blue-500-rgb) / 0.55) 12% 38%, transparent 38% 46%, rgb(var(--gold-300-rgb) / 0.5) 46% 62%, transparent 62%) 0 62% / 100% 18% no-repeat,
		linear-gradient(90deg, var(--blue-500) 0 40%, transparent 40%) 14px 20px / 70% 10px no-repeat, color-mix(in srgb, var(--ink-800) 82%, transparent);
}

.ly.l4 {
	--z: 66;
	background:
		linear-gradient(var(--gold-300), var(--gold-300)) 16px 16px / 60px 8px no-repeat,
		linear-gradient(rgb(var(--white-rgb) / 0.7), rgb(var(--white-rgb) / 0.7)) 16px 34px / 110px 6px no-repeat,
		repeating-linear-gradient(90deg, rgb(var(--blue-500-rgb) / 0.9) 0 18px, transparent 18px 26px) 16px 100% / calc(100% - 32px) 44px no-repeat, rgb(var(--ink-900-rgb) / 0.86);
}

.lb {
	position: absolute;
	inset-inline-start: calc(100% + 24px);
	inset-block-start: calc(50% - 50px + var(--y) * 1px);
	color: var(--gold-300);
	font: 500 10.5px var(--font-mono);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transform: translateZ(1px) rotateZ(38deg) rotateX(-62deg);
	transition: opacity 0.6s 0.15s;
}

.plate:hover .lb,
.plate.live .lb {
	opacity: 1;
}

/* orders pipeline */
.pipe {
	width: 100%;
	padding: 20px 24px;
	display: grid;
	gap: 14px;
}

.pipe svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.pipe .pg {
	fill: none;
	stroke: rgb(var(--blue-300-rgb) / 0.5);
	stroke-width: 1.2;
}

.pipe .nd {
	animation: nd 4s ease-in-out infinite;
}

@keyframes nd {
	0%,
	100% {
		fill: transparent;
		stroke: rgb(var(--blue-300-rgb) / 0.5);
	}

	25%,
	45% {
		fill: rgb(var(--gold-300-rgb) / 0.16);
		stroke: var(--gold-300);
	}
}

.pipe .pt {
	font: 11px var(--font-mono);
	letter-spacing: 1.4px;
	fill: var(--gray-300);
}

.pipe .pd {
	fill: var(--gold-300);
}

.pipe .pd .b {
	fill: var(--blue-300);
}

.pipe .pr {
	fill: none;
	stroke: rgb(var(--gold-300-rgb) / 0.5);
}

.pipe .meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--gray-300);
}

.pipe .meta b {
	color: var(--white);
	font-weight: 500;
}

/* reports chart */
.chart {
	width: 100%;
	padding: 12px 18px 6px;
	position: relative;
}

.chart svg {
	width: 100%;
	height: auto;
	overflow: visible;
	touch-action: pan-y;
}

.chart .ro {
	position: absolute;
	inset-inline-start: 22px;
	inset-block-start: 16px;
	color: var(--gray-300);
}

.chart .ro b {
	display: block;
	font: 300 34px/1 var(--font-display);
	color: var(--white);
	letter-spacing: -0.03em;
}

.chart .s1 {
	stop-color: var(--blue-500);
	stop-opacity: 0.5;
}

.chart .s2 {
	stop-color: var(--blue-500);
	stop-opacity: 0;
}

.chart .grid {
	stroke: rgb(var(--blue-300-rgb) / 0.18);
}

.chart .area {
	fill: url("#home-chart-fill");
	opacity: 0;
	transition: opacity 1.4s 0.8s;
}

.chart .line {
	fill: none;
	stroke: var(--gold-300);
	stroke-width: 2;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.8s var(--ease-io);
}

.chart.drawn .line {
	stroke-dashoffset: 0;
}

.chart.drawn .area {
	opacity: 1;
}

.chart .cs {
	opacity: 0;
}

.chart .cs path {
	stroke: var(--gold-300);
	stroke-dasharray: 3 3;
}

.chart .cs circle {
	fill: var(--ink-900);
	stroke: var(--gold-300);
	stroke-width: 2;
}

/* AI marketing: scope canvas on a hatched plate */
.scope {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hatch {
	background: repeating-linear-gradient(135deg, rgb(var(--gold-300-rgb) / 0.1) 0 2px, transparent 2px 10px);
}

.rm .iso,
.rm .ly,
.rm .lb,
.rm .chart .line,
.rm .chart .area {
	transition: none;
}

.rm .pipe .nd {
	animation: none;
}

.rm .chart .line {
	stroke-dashoffset: 0;
}

.rm .chart .area {
	opacity: 1;
}