/*
 * Growth Xpert — hand-written theme CSS.
 *
 * main.css is the compiled Tailwind output from the original Next.js build and
 * is not edited by hand. Everything that was a scoped <style> block or React
 * state in the original lives here instead. Motion is always gated behind
 * prefers-reduced-motion: no-preference; without it every state is simply its
 * final, visible value.
 */

/* ── Fonts (the @font-face rules live in main.css; this names the stacks) ── */
:root {
	--font-geist-sans: "Geist", "Geist Fallback", system-ui, sans-serif;
	--font-geist-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
}

/* Tailwind's `contents` utility was never used on the original pages' compiled output; the testimonial duplicate set needs it. */
.contents { display: contents; }

/* next/image `fill` equivalent */
.gx-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: transparent;
}

/* ── Page enter + progressive-enhancement reveals ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	@keyframes gx-page-enter {
		from { opacity: 0; transform: translate3d(0, 18px, 0); }
		to   { opacity: 1; transform: none; }
	}
	.gx-page-enter { animation: gx-page-enter .55s cubic-bezier(.22, 1, .36, 1) both; }

	/* Hidden only once the JS flag is set (it self-removes if the script fails),
	   so content can never be stranded invisible. */
	html.js .gx-reveal {
		opacity: 0;
		transform: translateY(12px);
		transition: opacity .5s ease-out, transform .5s ease-out;
	}
	html.js .gx-reveal--fade { transform: none; }
	html.js .is-in .gx-reveal { opacity: 1; transform: none; transition-delay: var(--d, 0ms); }

	/* Targets of the GSAP entrances (hero, final CTA): hidden until motion.js takes over. */
	html.js .gx-pre,
	html.js [data-gx-fade-item] { opacity: 0; }

	/* Founders card: fade + rise once. */
	html.js .gx-founder-scene {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
	}
	html.js .gx-founder-scene.is-in { opacity: 1; transform: none; }
}

/* ── Navbar hide / show (one unit: opacity + transform on the wrapper) ──── */
[data-gx-nav-wrap] {
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s cubic-bezier(.22, 1, .36, 1);
}
[data-gx-nav-wrap].is-hidden {
	opacity: 0;
	transform: translateY(-140%);
	pointer-events: none;
}
/* Scrolled state of the capsule and the WhatsApp button */
#gx-nav-list.is-scrolled { transform: scale(.9); background-color: rgba(255, 255, 255, .11); backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5); }
[data-gx-nav-wa].is-scrolled { width: 2.75rem; height: 2.75rem; backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5); }

/* ── Final CTA button (hover was React state in the original) ───────────── */
.gx-cta-btn {
	border-color: rgba(255, 255, 255, .18);
	background-color: rgba(255, 255, 255, .07);
	box-shadow: 0 14px 45px -12px rgba(0, 0, 0, .6), 0 2px 24px -4px rgba(63, 140, 224, .35);
	transform: translateY(0) scale(1);
	transition: transform .45s ease-out, box-shadow .45s ease-out, border-color .45s ease-out;
}
.gx-cta-btn:hover,
.gx-cta-btn:focus-visible {
	border-color: rgba(255, 255, 255, .32);
	box-shadow: 0 22px 55px -14px rgba(0, 0, 0, .65), 0 0 40px -6px rgba(63, 140, 224, .55);
	transform: translateY(-5px) scale(1.03);
}
.gx-cta-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 3px; }

/* ── Our Clients: two opposing CSS marquees ─────────────────────────────── */
.cl-scope {
	/* Six cards span ~61vw at this size, so the repeating unit is twelve cards. */
	--cl-card: max(152px, 10.24vw);
	--cl-gap: clamp(8px, 0.81vw, 14px);
}
.cl-row {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.cl-sheen { opacity: 0; }
.cl-card {
	border-color: var(--cl-edge-rest);
	box-shadow: var(--cl-glow-rest);
}
@media (prefers-reduced-motion: reduce) {
	/* No travel — let people scroll the rows themselves instead. */
	.cl-row { overflow-x: auto; scrollbar-width: none; }
	.cl-row::-webkit-scrollbar { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	@keyframes cl-marquee-left {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(-50%, 0, 0); }
	}
	@keyframes cl-marquee-right {
		from { transform: translate3d(-50%, 0, 0); }
		to   { transform: translate3d(0, 0, 0); }
	}
	.cl-track { will-change: transform; }
	.cl-left  { animation: cl-marquee-left 58s linear infinite; }
	.cl-right { animation: cl-marquee-right 68s linear infinite; }

	.cl-card { transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s cubic-bezier(.22, 1, .36, 1); }
	.cl-logo { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
	.cl-sheen { transition: opacity .55s cubic-bezier(.22, 1, .36, 1); }

	@media (hover: hover) {
		/* Pausing holds the exact position, so resuming continues from there. */
		.cl-row:hover .cl-track { animation-play-state: paused; }
		.cl-item:hover .cl-card {
			transform: translateY(-5px);
			border-color: var(--cl-edge-hover);
			box-shadow: var(--cl-glow-hover);
		}
		.cl-item:hover .cl-logo { transform: scale(1.04); }
		.cl-item:hover .cl-sheen { opacity: 1; }
	}
}

/* ── Our Services (home): artwork cards, glow, stage rail ───────────────── */
/* The card row is wider than the 1240px text column but stays centred: a
   symmetric negative margin (px, not vw — vw counts the scrollbar). */
.sv-row { margin-inline: -32px; }
@media (min-width: 1420px) { .sv-row { margin-inline: -58px; } }

.sv-glow { opacity: .34; }
.sv-glow[data-active="true"] { opacity: 1; }
.sv-glow[data-dimmed="true"] { opacity: .1; }

.sv-stage { color: rgba(255, 255, 255, .34); }
.sv-stage-line { background: var(--rail); transform: scaleX(0); transform-origin: left; }
.sv-stage[data-active="true"] { color: #fff; }
.sv-stage[data-active="true"] .sv-stage-line { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
	html.js .sv-reveal {
		opacity: 0;
		transform: translateY(26px) scale(.985);
		transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
	}
	html.js .is-in .sv-reveal { opacity: 1; transform: none; transition-delay: var(--d, 0ms); }

	.sv-panel { transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .5s cubic-bezier(.22, 1, .36, 1); }
	.sv-panel[data-active="true"] { transform: translateY(-6px); }
	.sv-panel[data-dimmed="true"] { opacity: .5; }

	/* The drift: transform only, parked by the section gate when offscreen. */
	@keyframes sv-bob {
		0%, 100% { transform: translate3d(0, 0, 0); }
		50%      { transform: translate3d(0, -9px, 0); }
	}
	.sv-float {
		animation-name: sv-bob;
		animation-timing-function: cubic-bezier(.45, 0, .55, 1);
		animation-iteration-count: infinite;
		will-change: transform;
	}
	.gx-offscreen .sv-float { will-change: auto; }

	/* One accent dissolving into the next IS the colour transition — only opacity moves. */
	.sv-glow { transition: opacity .65s cubic-bezier(.22, 1, .36, 1); }
	.sv-stage, .sv-stage-line { transition: color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1); }

	.sv-cta-chip { transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .5s; }
	.sv-cta:hover .sv-cta-chip, .sv-cta:focus-visible .sv-cta-chip { transform: translateX(4px); }
}

/* ── Legal pages: the editor content, styled like LegalContent.tsx ──────── */
.gx-legal { counter-reset: gx-sec; }
.gx-legal h2 {
	counter-increment: gx-sec;
	position: relative;
	font-size: 19px;
	font-weight: 600;
	color: #fff;
}
.gx-legal h2::before {
	content: counter(gx-sec, decimal-leading-zero);
	margin-right: .5rem;
	color: rgba(173, 212, 232, .6);
}
.gx-legal h2:not(:first-child) { margin-top: calc(5rem + 1px); } /* 40px + the 1px divider + 40px, as in the original */
.gx-legal h2:not(:first-child)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-2.5rem - 1px);
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, .08), transparent);
}
.gx-legal p { margin-top: .75rem; font-size: 14.5px; line-height: 1.625; color: rgba(255, 255, 255, .6); }
.gx-legal a {
	color: var(--color-brand-light);
	text-decoration: underline;
	text-decoration-color: rgba(173, 212, 232, .4);
	text-underline-offset: 2px;
	transition: color .3s;
}
.gx-legal a:hover { color: rgba(255, 255, 255, .9); }
@media (min-width: 640px) { .gx-legal h2 { font-size: 21px; } }