/* ==========================================================================
   AGYATVYAKTI — COMPONENTS
   Hero composition · architectural backdrop
   Stage 02 — visual foundation. Final hero content/motion comes later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
.agy-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(4rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6.5rem);
	border-bottom: 1px solid var(--agy-gray-200);
}

.agy-hero__inner {
	position: relative;
	z-index: 2;
}

/* --- Architectural backdrop: measured grid, very low opacity --- */
.agy-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--agy-rule-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--agy-rule-soft) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 78%);
}

/* --- Corner brackets: the drawing sheet --- */
.agy-hero__corner {
	position: absolute;
	z-index: 1;
	width: 34px;
	height: 34px;
	pointer-events: none;
}

.agy-hero__corner::before,
.agy-hero__corner::after {
	content: "";
	position: absolute;
	background: var(--agy-purple);
	opacity: 0.4;
}

.agy-hero__corner::before { width: 1px; height: 34px; }
.agy-hero__corner::after { width: 34px; height: 1px; }

.agy-hero__corner--tl { left: var(--gutter); top: 2.5rem; }
.agy-hero__corner--tr { right: var(--gutter); top: 2.5rem; transform: rotate(90deg); }
.agy-hero__corner--bl { left: var(--gutter); bottom: 2.5rem; transform: rotate(-90deg); }
.agy-hero__corner--br { right: var(--gutter); bottom: 2.5rem; transform: rotate(180deg); }

/* --- Coordinates --- */
.agy-hero__coord {
	position: absolute;
	z-index: 1;
	font-size: var(--fs-caption);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--agy-gray-500);
	text-transform: uppercase;
}

.agy-hero__coord--a { left: var(--gutter); top: 5rem; }
.agy-hero__coord--b { right: var(--gutter); bottom: 5rem; }

/* --------------------------------------------------------------------------
   2. WORDMARK — AGYAT | VYAKTI
   Point → line → structure, built from the logo's own geometry.
   -------------------------------------------------------------------------- */
.agy-wordmark {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: clamp(1rem, 2.4vw, 2rem);
	font-family: var(--font-wordmark);
	font-size: clamp(1.6rem, 9.5vw, 7.5rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: 0.005em;
	color: var(--agy-black);
	white-space: nowrap;
	padding-bottom: 0.5rem;
	margin-bottom: var(--space-md);
}

.agy-wordmark__word {
	position: relative;
	z-index: 1;
}

/* Accent panel behind VYAKTI, matching the logo lockup. */
.agy-wordmark__word--right::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -0.09em;
	right: -0.07em;
	top: 6%;
	bottom: 4%;
	border-radius: 0.08em;
	background: linear-gradient(100deg, var(--agy-tint), rgba(142, 18, 158, 0.15) 55%, var(--agy-tint));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.8s var(--ease-firm) 0.25s;
}

.agy-wordmark.is-visible .agy-wordmark__word--right::before {
	transform: scaleX(1);
}

/* Vertical divider + node. */
.agy-wordmark__divider {
	position: relative;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.agy-wordmark__line {
	width: 2px;
	height: clamp(3.5rem, 7vw, 6.5rem);
	background: var(--agy-purple);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.7s var(--ease-firm) 0.1s;
}

.agy-wordmark.is-visible .agy-wordmark__line {
	transform: scaleY(1);
}

.agy-wordmark__node {
	width: 11px;
	height: 11px;
	margin-top: -1px;
	border-radius: 50%;
	background: var(--agy-amber);
	box-shadow: 0 0 0 6px rgba(215, 174, 113, 0.16);
	transform: scale(0);
	transition: transform 0.5s var(--ease) 0.05s;
}

.agy-wordmark.is-visible .agy-wordmark__node {
	transform: scale(1);
}

/* Foundation baseline spreading from the node. */
.agy-wordmark__baseline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5rem;
	height: 1px;
	background: var(--agy-rule);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.8s var(--ease-firm) 0.3s;
}

.agy-wordmark.is-visible .agy-wordmark__baseline {
	transform: scaleX(1);
}

/* .studio, set against the baseline. */
.agy-hero__studio {
	display: block;
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(0.8rem, 1.1vw, 1rem);
	font-weight: 600;
	letter-spacing: 0.45em;
	color: var(--agy-purple);
	margin-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   3. HERO CONTENT
   -------------------------------------------------------------------------- */
.agy-hero__content {
	text-align: center;
	max-width: 780px;
	margin-inline: auto;
}

.agy-hero__content .agy-eyebrow {
	justify-content: center;
}

.agy-hero__content .agy-lead {
	margin-inline: auto;
}

.agy-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   4. RESPONSIVE
   Backdrop detail is simplified rather than shrunk.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.agy-hero__coord,
	.agy-hero__corner--bl,
	.agy-hero__corner--br {
		display: none;
	}

	.agy-hero__grid {
		background-size: 56px 56px;
	}
}

@media (max-width: 600px) {
	.agy-hero__corner {
		display: none;
	}

	.agy-wordmark {
		gap: 0.75rem;
		letter-spacing: -0.05em;
	}

	.agy-hero__studio {
		letter-spacing: 0.32em;
		margin-bottom: var(--space-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.agy-wordmark__word--right::before,
	.agy-wordmark__line,
	.agy-wordmark__node,
	.agy-wordmark__baseline {
		transform: none;
	}

	.agy-wordmark__line {
		transform: scaleY(1);
	}
}