/**
 * Homepage-only sections: hero, about preview.
 * Loaded only on the front page — see inc/enqueue.php.
 */

@keyframes niranjan-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes niranjan-node-pulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.85;
	}
	50% {
		transform: scale(1.35);
		opacity: 1;
	}
}

.hero {
	position: relative;
	padding-block: var(--space-8) var(--space-7);
	isolation: isolate;
}

/* Extremely subtle decorative glow behind the hero content only. */
.hero::before {
	content: "";
	position: absolute;
	top: -10%;
	left: 50%;
	width: 1100px;
	max-width: 170vw;
	height: 520px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(var(--color-violet-rgb), 0.16), rgba(var(--color-accent-rgb), 0.1) 45%, transparent 72%);
	z-index: -1;
	pointer-events: none;
}

/* Faint dot-grid texture, faded out toward the edges via a mask so it
   reads as texture rather than a repeating pattern with a hard edge. */
.hero::after {
	content: "";
	position: absolute;
	inset: -10% 0 0 0;
	height: 420px;
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: radial-gradient(ellipse 70% 65% at 50% 20%, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 20%, black 30%, transparent 75%);
	z-index: -1;
	pointer-events: none;
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: var(--space-7);
}

.hero__title {
	font-size: var(--fs-3xl);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	max-width: 18ch;
	animation: niranjan-fade-up var(--transition-base) ease-out both;
}

.hero__title span {
	background: var(--gradient-brand-diagonal);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero__desc {
	margin-top: var(--space-5);
	max-width: 56ch;
	font-size: var(--fs-md);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	animation: niranjan-fade-up var(--transition-base) ease-out both;
	animation-delay: 80ms;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
	animation: niranjan-fade-up var(--transition-base) ease-out both;
	animation-delay: 140ms;
}

.btn--hero {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.8125rem;
	padding: 0.85rem 1.5rem;
}

.hero__socials {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-6);
	animation: niranjan-fade-up var(--transition-base) ease-out both;
	animation-delay: 200ms;
}

/* ---------- Hero visual: abstract network/system graph ---------- */
.hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: niranjan-fade-up var(--transition-base) ease-out both;
	animation-delay: 100ms;
}

.hero-visual::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: radial-gradient(ellipse at center, rgba(var(--color-cyan-rgb), 0.12), transparent 70%);
	z-index: -1;
	pointer-events: none;
}

.hero-visual__graph {
	width: 100%;
	max-width: 420px;
	height: auto;
}

.hero-visual__graph #hero-graph-gradient stop:nth-child(1) {
	stop-color: var(--color-violet);
}

.hero-visual__graph #hero-graph-gradient stop:nth-child(2) {
	stop-color: var(--color-purple);
}

.hero-visual__graph #hero-graph-gradient stop:nth-child(3) {
	stop-color: var(--color-accent);
}

.hero-visual__graph #hero-graph-gradient stop:nth-child(4) {
	stop-color: var(--color-cyan);
}

.hero-visual__lines line {
	stroke-width: 1;
	stroke-opacity: 0.45;
}

.hero-visual__nodes circle {
	opacity: 0.9;
}

.hero-visual__node--core {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: niranjan-node-pulse 2.6s ease-in-out infinite;
}

@media (max-width: 900px) {
	.hero__grid {
		grid-template-columns: 1fr;
	}

	.hero-visual {
		display: none;
	}
}

@media (max-width: 640px) {
	.hero__title {
		font-size: var(--fs-2xl);
		max-width: none;
	}

	.hero::before {
		height: 320px;
		opacity: 0.8;
	}
}

/* ---------- About preview ---------- */
.about-preview {
	max-width: var(--content-max);
}

.about-preview__avatar {
	width: 72px;
	height: 72px;
	padding: 2px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--gradient-brand-diagonal);
	margin-bottom: var(--space-5);
}

.about-preview__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.about-preview__heading {
	font-size: var(--fs-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: var(--lh-tight);
	max-width: 20ch;
	margin-bottom: var(--space-4);
}

.about-preview__text p {
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	max-width: 66ch;
}

.about-preview__focus {
	margin-block: var(--space-5);
}

.about-preview__text .btn {
	margin-top: var(--space-2);
}