/**
 * Home Page — About Section
 *
 * Two-column layout: animated node graph (left) + text content (right).
 * Graph features SVG connecting lines, animated data pulses, and floating nodes.
 *
 * Dependencies: home-base.css, child theme design tokens
 *
 * @package BlockskyChild
 */

/* ============================================
   SECTION BACKGROUND
   ============================================ */

.home-about {
	--section-bg: var(--color-bg-primary);
}

/* ============================================
   LAYOUT
   ============================================ */

.home-about__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 768px) {
	.home-about__container {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

/* ============================================
   NODE GRAPH — Container
   ============================================ */

.home-about__visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-about__graph {
	position: relative;
	width: 100%;
	max-width: 460px;
	aspect-ratio: 1;
}

/* Subtle radial glow behind center */
.home-about__graph::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: 55%;
	height: 55%;
	background: radial-gradient(circle, rgba(96, 165, 250, 0.06), transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

/* ============================================
   SVG LAYER — Lines & Pulses
   ============================================ */

.home-about__graph-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* --- Connection lines --- */

.home-about__line {
	stroke: var(--color-border);
	stroke-width: 0.4;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-about__visual.home-reveal--visible .home-about__line:nth-of-type(1) { stroke-dashoffset: 0; transition-delay: 0.35s; }
.home-about__visual.home-reveal--visible .home-about__line:nth-of-type(2) { stroke-dashoffset: 0; transition-delay: 0.43s; }
.home-about__visual.home-reveal--visible .home-about__line:nth-of-type(3) { stroke-dashoffset: 0; transition-delay: 0.51s; }
.home-about__visual.home-reveal--visible .home-about__line:nth-of-type(4) { stroke-dashoffset: 0; transition-delay: 0.59s; }
.home-about__visual.home-reveal--visible .home-about__line:nth-of-type(5) { stroke-dashoffset: 0; transition-delay: 0.67s; }

/* --- Pulse dots --- */

.home-about__pulses {
	opacity: 0;
	transition: opacity 0.5s ease 1.2s;
}

.home-about__visual.home-reveal--visible .home-about__pulses {
	opacity: 1;
}

.home-about__pulse {
	fill: var(--color-accent);
}

/* ============================================
   NODES — Shared base
   ============================================ */

.home-about__node {
	position: absolute;
	translate: -50% -50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	z-index: 1;
}

/* ============================================
   CENTER NODE
   ============================================ */

.home-about__node--center {
	left: 50%;
	top: 50%;
	width: 88px;
	height: 88px;
	background: #0f172a;
	color: var(--color-accent);
	font-size: 2rem;
	box-shadow: 0 0 30px rgba(96, 165, 250, 0.1),
	            0 0 0 1px rgba(255, 255, 255, 0.06);
	scale: 0;
	transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-about__visual.home-reveal--visible .home-about__node--center {
	scale: 1;
	transition-delay: 0.15s;
	animation: centerGlow 4s ease-in-out 1.5s infinite;
}

@keyframes centerGlow {
	0%, 100% { box-shadow: 0 0 30px rgba(96, 165, 250, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.06); }
	50%      { box-shadow: 0 0 50px rgba(96, 165, 250, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); }
}

/* ============================================
   SATELLITE NODES — Shared
   ============================================ */

.home-about__node--satellite {
	background: var(--section-bg, var(--color-bg-primary));
	border: 2px solid var(--color-accent);
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--color-text-primary);
	text-align: center;
	line-height: 1.2;
	scale: 0;
	transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] .home-about__node--satellite {
	background: #ffffff;
}

/* --- Size variants --- */

.home-about__node--sm { width: 56px;  height: 56px; }
.home-about__node--md { width: 76px;  height: 76px; }
.home-about__node--lg { width: 92px;  height: 92px; font-size: 0.6rem; }

/* --- Positions (match SVG viewBox coordinates) --- */

.home-about__node--recherche   { left: 38%; top:  8%; }
.home-about__node--ia          { left: 82%; top: 22%; }
.home-about__node--seo         { left: 80%; top: 78%; }
.home-about__node--publication { left: 42%; top: 92%; }
.home-about__node--social      { left: 10%; top: 48%; }

/* --- Staggered entrance --- */

.home-about__visual.home-reveal--visible .home-about__node--recherche   { scale: 1; transition-delay: 0.50s; }
.home-about__visual.home-reveal--visible .home-about__node--ia          { scale: 1; transition-delay: 0.58s; }
.home-about__visual.home-reveal--visible .home-about__node--seo         { scale: 1; transition-delay: 0.66s; }
.home-about__visual.home-reveal--visible .home-about__node--publication { scale: 1; transition-delay: 0.74s; }
.home-about__visual.home-reveal--visible .home-about__node--social      { scale: 1; transition-delay: 0.82s; }

/* ============================================
   FLOAT ANIMATION — Satellites
   ============================================ */

.home-about__node--recherche   { --float-dur: 3.5s; --float-delay: 1.5s; }
.home-about__node--ia          { --float-dur: 4.2s; --float-delay: 2.0s; }
.home-about__node--seo         { --float-dur: 3.8s; --float-delay: 2.7s; }
.home-about__node--publication { --float-dur: 4.5s; --float-delay: 1.8s; }
.home-about__node--social      { --float-dur: 3.3s; --float-delay: 2.3s; }

.home-about__visual.home-reveal--visible .home-about__node--satellite {
	animation: nodeFloat var(--float-dur, 4s) ease-in-out var(--float-delay, 0s) infinite;
}

@keyframes nodeFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

/* ============================================
   CONTENT (Right) — Kicker, Title, Text
   ============================================ */

.home-about__content {
	display: flex;
	flex-direction: column;
}

.home-about__kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 1rem;
}

.home-about__kicker-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
}

.home-about__title {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin: 0 0 1.5rem;
}

.home-about__text {
	font-size: var(--font-size-base);
	color: var(--color-text-secondary);
	line-height: 1.75;
	margin: 0 0 1rem;
}

.home-about__text:last-child {
	margin-bottom: 0;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

.home-about .home-reveal {
	opacity: 0;
	transform: translateY(2rem);
	filter: blur(4px);
}

.home-about .home-reveal.home-reveal--visible {
	animation: aboutReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.home-about__visual.home-reveal--visible  { animation-delay: 0s; }
.home-about__content.home-reveal--visible { animation-delay: 0.15s; }

@keyframes aboutReveal {
	from {
		opacity: 0;
		transform: translateY(2rem);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
	.home-about__graph {
		max-width: 340px;
	}

	.home-about__node--center { width: 72px; height: 72px; font-size: 1.6rem; }
	.home-about__node--sm     { width: 48px; height: 48px; font-size: 0.58rem; }
	.home-about__node--md     { width: 64px; height: 64px; font-size: 0.58rem; }
	.home-about__node--lg     { width: 78px; height: 78px; font-size: 0.55rem; }

	.home-about__node--social { left: 14%; }

	.home-about__title {
		text-align: center;
	}

	.home-about__kicker {
		justify-content: center;
	}

	.home-about__text {
		text-align: center;
	}
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.home-about .home-reveal {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.home-about .home-reveal.home-reveal--visible {
		animation: none;
	}

	.home-about__line {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		transition: none;
	}

	.home-about__pulses {
		display: none;
	}

	.home-about__node--center,
	.home-about__node--satellite {
		scale: 1;
		transition: none;
		animation: none !important;
	}
}