/* Homepage "Technology" section: numbered list + hex network diagram.
   See inc/tech-section.php for why this isn't a shared template-part. */

.tech-section {
	padding-block: var(--section-pad);
	background: var(--navy);
	color: var(--paper);
}

.tech-section h2,
.tech-section h3 {
	color: var(--paper);
}

.tech-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: 64px;
	align-items: center;
}

.tech-section__intro {
	max-width: 34em;
	color: rgba(255, 255, 255, 0.75);
	margin: 0.75em 0 40px;
}

.tech-section__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.tech-section__item {
	display: flex;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tech-section__item:first-child {
	padding-top: 0;
	border-top: none;
}

.tech-section__number {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--cyan);
}

.tech-section__item-body h3 {
	font-size: 1.0625rem;
	margin: 0 0 0.4em;
}

.tech-section__item-body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9375rem;
}

.tech-section__figure {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
}

.tech-section__hex {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.tech-section__spoke {
	stroke: rgba(255, 255, 255, 0.35);
	stroke-width: 0.6;
}

.tech-section__cell {
	fill: rgba(255, 255, 255, 0.06);
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 0.8;
	opacity: 0.5;
}

.tech-section__cell--active {
	fill: rgba(0, 159, 226, 0.25);
	stroke: var(--cyan);
	stroke-width: 1.2;
	opacity: 1;
}

.tech-section__node {
	fill: var(--paper);
	opacity: 0.4;
}

.tech-section__node--active {
	fill: var(--cyan);
	opacity: 1;
}

/* ---- Idle motion (§5.2) — gated on prefers-reduced-motion, same as every
   other animated component on the site. ---- */
@media (prefers-reduced-motion: no-preference) {
	.tech-section__cell {
		animation: unlock-hex-glow 5s ease-in-out infinite;
	}

	.tech-section__node {
		animation: unlock-hex-pulse 2.8s ease-in-out infinite;
	}

	.tech-section__node--active {
		animation: unlock-hex-pulse-active 2.8s ease-in-out infinite;
	}
}

@keyframes unlock-hex-glow {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 0.9; }
}

@keyframes unlock-hex-pulse {
	0%, 100% { opacity: 0.4; transform: scale(1); }
	50%      { opacity: 0.9; transform: scale(1.3); }
}

@keyframes unlock-hex-pulse-active {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.7; transform: scale(1.4); }
}

/* transform-origin/box for SVG shape animation — scaling from each
   element's own center rather than the viewport's. */
.tech-section__node,
.tech-section__node--active {
	transform-box: fill-box;
	transform-origin: center;
}

/* ---- Responsive (§6) --------------------------------------------------- */
@media (max-width: 900px) {
	.tech-section__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.tech-section__figure {
		max-width: 320px;
		order: -1;
	}
}