/*
 * VAIDIKX Studio — the homepage card, the Studio page, and the interactive card they share.
 *
 * Colours are design tokens from style.css, plus four capability accents declared on the
 * component itself (blue / gold / violet / cyan). Those four are used for light and type only
 * — a travelling border highlight, a numeral, an icon — and never as a fill, so the card stays
 * near-black and the accents read as illumination rather than paint.
 *
 * Motion is transitions and transforms. The only continuous animation is the border light, it
 * runs on transform alone, and it only runs while the component is on screen (studio.js toggles
 * .is-live). No loop, no canvas, no glow, no neon.
 */

/* ========================================================= the Studio card ===== */

/*
 * A wide editorial panel that tilts a few degrees toward the pointer. Replaces the earlier
 * radial "nexus" diagram.
 *
 * THE WHOLE EFFECT IS FOUR CUSTOM PROPERTIES. studio.js writes --mh-rx / --mh-ry (tilt) and
 * --mh-gx / --mh-gy (light position) on pointermove and nothing else; every transition below
 * runs on the compositor. There is no animation loop anywhere in this component — the sprung
 * feel comes from a CSS transition trailing the pointer, not from a physics step.
 */

.mh-comet {
	--mh-rx: 0deg;
	--mh-ry: 0deg;
	--mh-gx: 50%;
	--mh-gy: 0%;
	--mh-lift: 0;

	position: relative;
	width: 100%;
	/* The stage, not the card: perspective has to live on the parent of the thing that turns. */
	perspective: 1400px;
	perspective-origin: 50% 50%;
}

.mh-comet__surface {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid var( --mh-color-rule, #1f2124 );
	background: var( --mh-color-paper, #0e0f12 );
	transform-style: preserve-3d;

	/*
	 * 8deg maximum, not the 17.5 a demo can afford: this panel carries a headline and four
	 * readable labels, and past about eight degrees type on the far edge starts to smear.
	 */
	transform:
		rotateX( var( --mh-rx ) )
		rotateY( var( --mh-ry ) )
		scale( calc( 1 + var( --mh-lift ) * 0.012 ) );

	/* The trailing transition IS the spring. Long enough to feel weighted, short enough to track. */
	transition: transform 420ms cubic-bezier( 0.16, 1, 0.3, 1 ), box-shadow 420ms ease;
	box-shadow:
		0 1px 0 rgba( 255, 255, 255, 0.03 ) inset,
		0 40px 80px -40px rgba( 0, 0, 0, 0.9 );
	will-change: transform;
}

.mh-comet.is-engaged .mh-comet__surface {
	box-shadow:
		0 1px 0 rgba( 255, 255, 255, 0.05 ) inset,
		0 60px 110px -45px rgba( 0, 0, 0, 0.95 );
}

/* ------------------------------------------------------------ depth layers ----- */

/* Layer 2: the ground. A single wash, no image dependency — the card brings its own light. */
.mh-comet__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient( 120% 140% at 12% 0%, rgba( 48, 110, 255, 0.10 ) 0%, transparent 55% ),
		radial-gradient( 90% 120% at 100% 100%, rgba( 232, 176, 75, 0.06 ) 0%, transparent 60% ),
		linear-gradient( 160deg, #0c0e13 0%, #08090c 55%, #060708 100% );
}

/* A hairline grid, barely there — structure rather than decoration. */
.mh-comet__grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient( to right, rgba( 255, 255, 255, 0.022 ) 1px, transparent 1px ),
		linear-gradient( to bottom, rgba( 255, 255, 255, 0.022 ) 1px, transparent 1px );
	background-size: 64px 64px;
	mask-image: radial-gradient( 100% 100% at 30% 0%, #000 0%, transparent 75% );
	-webkit-mask-image: radial-gradient( 100% 100% at 30% 0%, #000 0%, transparent 75% );
}

/*
 * Layer 5: reflected studio lighting, not a neon bloom. Low opacity, soft falloff, and clipped
 * by the surface's own overflow so it can never spill past the card edge.
 */
.mh-comet__glare {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		42% 60% at var( --mh-gx ) var( --mh-gy ),
		rgba( 214, 230, 255, 0.16 ) 0%,
		rgba( 160, 190, 255, 0.06 ) 38%,
		transparent 72%
	);
	transition: opacity 420ms ease;
}

.mh-comet.is-engaged .mh-comet__glare { opacity: 1; }

/* ---------------------------------------------------------------- the grid ----- */

.mh-comet__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 0.95fr );
	gap: clamp( 1.5rem, 3vw, 3.5rem );
	align-items: center;
	padding: clamp( 1.5rem, 3.2vw, 3.25rem );
	/* Layer 3+4 sit forward of the ground so the tilt reads as depth rather than a picture turning. */
	transform: translateZ( 34px );
}

/*
 * The wide proportion, held only where there is room for it. Desktop is roughly 2:1; the
 * stacked layout below drops the ratio entirely rather than squeezing a tall column into it.
 */
@media ( min-width: 61.25em ) {
	.mh-comet__surface { aspect-ratio: 16 / 8; }
	.mh-comet__inner {
		height: 100%;
		/*
		 * stretch, not center: with a single auto row, centring sizes that row to its content
		 * and the capability column then has nothing to stretch into. The left column stays
		 * vertically centred via align-items on the base rule.
		 */
		align-content: stretch;
	}

	/*
	 * The four panels share the column height rather than stacking at their minimum and
	 * leaving a band of dead space under the last one.
	 */
	.mh-comet__caps {
		/* align-self, because the parent centres its items and would otherwise collapse this
		   column to its content height and leave 1fr with nothing to divide. */
		align-self: stretch;
		grid-auto-rows: 1fr;
	}

	/* The row stretches the <li>; these two carry that height down to the button itself. */
	.mh-comet__cap-item { display: grid; }
	.mh-comet__cap { height: 100%; }
}

/* ------------------------------------------------------------- left column ----- */

.mh-comet__left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	transform: translateZ( 18px );
}

.mh-comet__content {
	position: relative;
	min-width: 0;
}

.mh-comet__kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 clamp( 0.75rem, 1.5vw, 1.25rem );
	font-family: var( --mh-font-ui );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --mh-studio-gold, #e8b04b );
}

.mh-comet__kicker-rule {
	display: block;
	width: clamp( 24px, 4vw, 46px );
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

.mh-comet__headline {
	margin: 0 0 clamp( 0.75rem, 1.6vw, 1.35rem );
	font-family: var( --mh-font-display );
	font-size: clamp( 1.75rem, 1rem + 2.6vw, 3.25rem );
	line-height: 1.06;
	letter-spacing: var( --mh-track-display, -0.028em );
	color: var( --mh-color-heading, #fdffff );
	text-wrap: balance;
}

.mh-comet--page .mh-comet__headline { font-size: clamp( 2rem, 1.1rem + 3vw, 3.75rem ); }

/* The half of the sentence the section exists to say. */
.mh-comet__headline-accent {
	color: var( --mh-studio-gold, #e8b04b );
	display: inline-block;
}

.mh-comet__dek {
	margin: 0 0 clamp( 1.25rem, 2.4vw, 2rem );
	max-width: 46ch;
	font-size: clamp( 0.9375rem, 0.9rem + 0.2vw, 1.0625rem );
	line-height: 1.6;
	color: var( --mh-color-muted, #96989b );
}

/* ------------------------------------------------------------------- CTA ------- */

/*
 * Two actions, one hierarchy. "Inquire Now" is the conversion and takes the warm fill;
 * "Explore VaidikX Studio" is the doorway and stays a quiet outline, so the pair reads as a
 * decision rather than two equal buttons.
 */
.mh-comet__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp( 0.6rem, 1.2vw, 0.9rem );
}

.mh-comet__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.7rem 1.35rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var( --mh-font-ui );
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

/* Gold fill takes near-black type: gold-on-dark is a kicker colour, not a label on a fill. */
.mh-comet__cta--primary {
	background: var( --mh-studio-gold, #e8b04b );
	border-color: var( --mh-studio-gold, #e8b04b );
	color: #12100b;
}

.mh-comet__cta--ghost {
	border-color: rgba( 48, 110, 255, 0.45 );
	background: rgba( 37, 89, 230, 0.10 );
	color: var( --mh-color-heading, #fdffff );
}

.mh-comet__cta-icon {
	display: grid;
	place-items: center;
	width: 1.05em;
	height: 1.05em;
	transition: transform 220ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

.mh-comet__cta-icon svg { width: 100%; height: 100%; }

.mh-comet__cta .mh-studiocard__arrow {
	transition: transform 220ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* Focus is never dependent on hover, and each button outlines in its own colour. */
.mh-comet__cta--primary:focus-visible {
	outline: 2px solid var( --mh-studio-gold, #e8b04b );
	outline-offset: 3px;
}

.mh-comet__cta--ghost:focus-visible {
	outline: 2px solid var( --mh-color-accent-text, #306eff );
	outline-offset: 3px;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mh-comet__cta--primary:hover {
		background: #f0bf63;
		border-color: #f0bf63;
		transform: translateY( -1px );
		box-shadow: 0 10px 28px -12px rgba( 232, 176, 75, 0.75 );
	}
	.mh-comet__cta--primary:hover .mh-comet__cta-icon { transform: translateX( -2px ); }

	.mh-comet__cta--ghost:hover {
		background: rgba( 37, 89, 230, 0.20 );
		border-color: rgba( 48, 110, 255, 0.75 );
		box-shadow: 0 0 24px -8px rgba( 48, 110, 255, 0.6 );
	}
	.mh-comet__cta--ghost:hover .mh-studiocard__arrow { transform: translateX( 4px ); }
}

/* ---------------------------------------------------------- capability cards --- */

.mh-comet__caps {
	position: relative;
	display: grid;
	gap: clamp( 0.5rem, 1vw, 0.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	transform: translateZ( 46px );
}

.mh-comet__cap-item { min-width: 0; }

/*
 * Horizontal panels, never tiles: icon on the left, number/name/blurb stacked beside it. The
 * minimum height keeps the proportion wide even when the blurb wraps to one line.
 */
.mh-comet__cap {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp( 0.75rem, 1.4vw, 1.1rem );
	width: 100%;
	min-height: clamp( 68px, 8vw, 92px );
	padding: clamp( 0.7rem, 1.2vw, 1rem ) clamp( 0.9rem, 1.4vw, 1.25rem );
	border: 0;
	border-radius: 14px;
	background: rgba( 255, 255, 255, 0.018 );
	text-align: left;
	cursor: pointer;
	color: var( --mh-color-ink, #f4f6fa );
	font: inherit;
	transition: background 260ms ease, transform 260ms cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* Each capability's own colour. Used for light and type only — never as a fill. */
.mh-comet__cap--blue   { --cap: #306eff; }
.mh-comet__cap--gold   { --cap: #e8b04b; }
.mh-comet__cap--violet { --cap: #7c6cf5; }
.mh-comet__cap--cyan   { --cap: #2fd4c4; }

/*
 * THE TRAVELLING BORDER.
 *
 * A conic gradient on an oversized square, spun with transform, and masked down to a 1px ring.
 * Transform-only animation, so it runs on the compositor and never repaints the gradient —
 * animating background-position or a gradient angle would repaint every frame, four times over,
 * on a surface that is already 3D-transformed.
 *
 * The mask is the xor trick: paint the whole box, punch out the content box, keep the 1px frame.
 */
.mh-comet__cap-border {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	pointer-events: none;
	overflow: hidden;
	/* The resting frame, visible before any light reaches it. */
	background: rgba( 255, 255, 255, 0.08 );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	mask-composite: exclude;
	transition: background 260ms ease;
}

.mh-comet__cap-border::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 170%;
	aspect-ratio: 1;
	transform: translate( -50%, -50% ) rotate( 0deg );
	opacity: 0;
	transition: opacity 400ms ease;
	/*
	 * One luminous segment, not a full ring: transparent for most of the sweep, rising to the
	 * capability colour with a small white core, then gone again.
	 */
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 250deg,
		color-mix( in srgb, var( --cap ) 55%, transparent ) 292deg,
		var( --cap ) 316deg,
		#ffffff 324deg,
		var( --cap ) 332deg,
		color-mix( in srgb, var( --cap ) 55%, transparent ) 352deg,
		transparent 360deg
	);
}

/* Only spins while the component is on screen — studio.js owns .is-live. */
.mh-comet.is-live .mh-comet__cap-border::before {
	opacity: 1;
	animation: mh-comet-travel 5.5s linear infinite;
}

/* Staggered so the four lights never march in formation. */
.mh-comet__cap-item:nth-child( 2 ) .mh-comet__cap-border::before { animation-delay: -1.375s; }
.mh-comet__cap-item:nth-child( 3 ) .mh-comet__cap-border::before { animation-delay: -2.75s; }
.mh-comet__cap-item:nth-child( 4 ) .mh-comet__cap-border::before { animation-delay: -4.125s; }

@keyframes mh-comet-travel {
	from { transform: translate( -50%, -50% ) rotate( 0deg ); }
	to   { transform: translate( -50%, -50% ) rotate( 360deg ); }
}

/* ------------------------------------------------------------- cap contents ---- */

.mh-comet__cap-mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: clamp( 38px, 4.4vw, 52px );
	height: clamp( 38px, 4.4vw, 52px );
	border-radius: 11px;
	border: 1px solid color-mix( in srgb, var( --cap ) 26%, transparent );
	background: color-mix( in srgb, var( --cap ) 9%, transparent );
	color: var( --cap );
	transition: transform 260ms cubic-bezier( 0.16, 1, 0.3, 1 ), background 260ms ease, border-color 260ms ease;
}

.mh-comet__cap-icon {
	width: 55%;
	height: 55%;
}

.mh-comet__cap-body {
	display: block;
	min-width: 0;
}

.mh-comet__cap-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.15rem;
}

.mh-comet__cap-num {
	font-family: var( --mh-font-mono );
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	color: var( --mh-color-faint, #7d7f82 );
	transition: color 260ms ease;
}

.mh-comet__cap-hair {
	display: block;
	width: 22px;
	height: 1px;
	background: var( --mh-color-rule, #1f2124 );
	transition: background 260ms ease;
}

.mh-comet__cap-name {
	display: block;
	font-family: var( --mh-font-display );
	font-size: clamp( 0.9375rem, 0.85rem + 0.35vw, 1.125rem );
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var( --mh-color-heading, #fdffff );
}

.mh-comet__cap-blurb {
	display: block;
	margin-top: 0.15rem;
	font-size: clamp( 0.75rem, 0.72rem + 0.14vw, 0.8125rem );
	line-height: 1.45;
	color: var( --mh-color-muted, #96989b );
	transition: color 260ms ease;
}

/* ------------------------------------------------------------- active state ---- */

/*
 * One capability becomes dominant; the others go quiet rather than disappearing. Applied by
 * class so hover, tap and keyboard all arrive at the same visual state.
 */
.mh-comet__cap.is-active {
	background: rgba( 255, 255, 255, 0.045 );
	transform: translateY( -2px );
}

.mh-comet__cap.is-active .mh-comet__cap-border { background: color-mix( in srgb, var( --cap ) 38%, transparent ); }
.mh-comet__cap.is-active .mh-comet__cap-mark {
	transform: translateY( -1px ) scale( 1.04 );
	background: color-mix( in srgb, var( --cap ) 16%, transparent );
	border-color: color-mix( in srgb, var( --cap ) 50%, transparent );
}
.mh-comet__cap.is-active .mh-comet__cap-num   { color: var( --cap ); }
.mh-comet__cap.is-active .mh-comet__cap-hair  { background: color-mix( in srgb, var( --cap ) 45%, transparent ); }
.mh-comet__cap.is-active .mh-comet__cap-blurb { color: var( --mh-color-ink, #f4f6fa ); }

/* The quiet others. */
.mh-comet.has-active .mh-comet__cap:not( .is-active ) { opacity: 0.62; }

.mh-comet__cap:focus-visible {
	outline: 2px solid var( --cap );
	outline-offset: 3px;
}

@media ( hover: hover ) and ( pointer: fine ) {
	.mh-comet__cap:hover { background: rgba( 255, 255, 255, 0.045 ); }
}

/* ------------------------------------------------------------------ stacked ---- */

@media ( max-width: 61.1875em ) {
	/*
	 * Stacked order is message -> capability cards -> CTA. `display: contents` dissolves the
	 * left column so its two children become siblings of the capability list and `order` can
	 * actually reach across them; nesting would otherwise pin the CTA above the cards.
	 */
	.mh-comet__inner {
		display: flex;
		flex-direction: column;
		/* The base rule centres on the cross axis, which in a column means children shrink to
		   their content width instead of filling the card. */
		align-items: stretch;
		transform: none; /* No parallax offset once the card is a plain stacked block. */
	}

	.mh-comet__left { display: contents; }

	.mh-comet__content { order: 1; }
	.mh-comet__caps    { order: 2; }
	.mh-comet__actions { order: 3; align-self: flex-start; }

	.mh-comet__content,
	.mh-comet__caps { transform: none; }

	/* The dek's bottom margin was spacing the CTA; the flex gap does that now. */
	.mh-comet__dek { margin-bottom: 0; }

	/* The tilt is pointer-only; without it the perspective would just skew a scrolling page. */
	.mh-comet__surface { transform: none; }
}

@media ( max-width: 30em ) {
	.mh-comet__surface { border-radius: 16px; }

	.mh-comet__cap {
		gap: 0.7rem;
		min-height: 64px;
		padding: 0.7rem 0.8rem;
	}

	.mh-comet__cap-mark { width: 36px; height: 36px; border-radius: 9px; }
}

/* ---------------------------------------------------------- reduced motion ----- */

/*
 * Everything that moves stops. The card keeps its hierarchy, its colours and its active state —
 * only the motion is removed, so nothing becomes unusable or invisible.
 */
@media ( prefers-reduced-motion: reduce ) {
	.mh-comet__surface {
		transform: none !important;
		transition: none;
	}

	.mh-comet__glare { display: none; }

	.mh-comet.is-live .mh-comet__cap-border::before,
	.mh-comet__cap-border::before {
		animation: none;
		opacity: 0;
	}

	.mh-comet__cap,
	.mh-comet__cap-mark,
	.mh-comet__cap-border,
	.mh-comet__cta,
	.mh-comet__cta-icon,
	.mh-comet__cta .mh-studiocard__arrow { transition: none; }

	/* The buttons keep their colour, their focus ring and their click target — only the
	   lift is removed, so nothing becomes harder to find or to operate. */
	.mh-comet__cta:hover { transform: none; }

	.mh-comet__cap.is-active { transform: none; }
	.mh-comet__cap.is-active .mh-comet__cap-mark { transform: none; }
}

/* ==================================================== the homepage card ======== */

/*
 * Only the band and its container survive here. The kicker, headline and CTA all moved inside
 * the card itself (.mh-comet), because the reference composition puts them on the panel rather
 * than stacked above it. .mh-studiocard__cta / __arrow are kept as the CTA's class names — the
 * card reuses them so there is one CTA style, not two.
 */

.mh-studiocard {
	padding: clamp( 2.5rem, 6vw, 5rem ) 0;
	background: var( --mh-color-bg, #050505 );
}

.mh-studiocard__inner { position: relative; }

.mh-studiocard__arrow { display: inline-block; }

/* ====================================================== the Studio page ======== */

/*
 * The hero is now the card and nothing else — the kicker/headline/dek it used to stack above
 * the diagram are the card's own content at the 'page' variant. The supporting sections below
 * carry everything the teaser cannot.
 */

.mh-studio-hero {
	padding: clamp( 2.5rem, 6vw, 5rem ) 0 clamp( 2rem, 4vw, 3.5rem );
	background: var( --mh-color-bg, #050505 );
}

.mh-studio-hero__inner { position: relative; }

.mh-studio-caps {
	padding-block: clamp( 2.5rem, 6vw, 5rem );
	background: var( --mh-color-bg, #050505 );
	border-top: var( --mh-hairline );
}

.mh-studio-caps__kicker {
	font-family: var( --mh-font-ui );
	font-size: var( --mh-size-meta, 0.75rem );
	font-weight: 600;
	letter-spacing: var( --mh-track-meta, 0.08em );
	text-transform: uppercase;
	color: var( --mh-color-faint, #8a8a8a );
	margin: 0 0 0.6rem;
}

.mh-studio-caps__title {
	font-family: var( --mh-font-display );
	font-size: clamp( 1.5rem, 1.2rem + 1.6vw, 2.25rem );
	line-height: 1.1;
	color: var( --mh-color-heading );
	margin: 0 0 clamp( 1.5rem, 4vw, 2.25rem );
}

.mh-studio-caps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

@media ( min-width: 720px ) {
	.mh-studio-caps__list { grid-template-columns: 1fr 1fr; column-gap: clamp( 2rem, 5vw, 4rem ); }
}

.mh-studio-caps__item {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding-block: clamp( 0.85rem, 2vw, 1.15rem );
	border-bottom: var( --mh-hairline );
	font-family: var( --mh-font-display );
	font-size: clamp( 1.0625rem, 0.95rem + 0.7vw, 1.375rem );
	line-height: 1.25;
	color: var( --mh-color-heading );
}

.mh-studio-caps__num {
	font-family: var( --mh-font-ui );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var( --mh-color-accent-text );
	flex: 0 0 auto;
}