/* ============================================================
   Homepage hero: split layout. Copy on the left, the floating
   laptop dashboard on the right, over a light field with turning
   orbit rings, a drifting plum glow and film grain.
   Markup: template-parts/sections/hero.php. Pointer depth: assets/js/abs-hero.js.
   ============================================================ */

/* Larger hero buttons (the shared .btn system lives in buttons.css) */
.abs-hero .btn--lg { --btn-h: 60px; --btn-circle: 50px; --btn-pad: 5px; font-size: 1.0625rem; padding-left: 32px; }
.abs-hero .btn--lg:hover,
.abs-hero .btn--lg:focus-visible { padding-left: calc(var(--btn-circle) + var(--btn-pad) + 14px); padding-right: 24px; }
.abs-hero .btn-ghost:not(:hover):not(:focus-visible) { background: rgba(255, 255, 255, 0.5); }

.abs-hero {
	--hero-ink: #000000;
	--hero-muted: #4a4a4a;
	--hero-line: #d0d0d0;
	--hero-bg: #f4f4f4;
	--px: 0;
	--py: 0;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--hero-bg);
	color: var(--hero-ink);
	padding-block: clamp(150px, 11vw, 176px) clamp(56px, 6vw, 88px); /* top clears the fixed header */
	padding-inline: 24px;
}

/* ---------- Motion background ---------- */
.abs-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 70% at 78% 45%, #fbfbfb 0%, rgba(251, 251, 251, 0) 70%),
		linear-gradient(180deg, #f6f6f6 0%, #f1f1f1 100%);
}

/* Plum glow from the gradient you chose, now a soft drifting accent */
.abs-hero__aurora {
	position: absolute;
	width: 62vmax;
	aspect-ratio: 1;
	right: -16vmax;
	bottom: -30vmax;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(98, 32, 76, 0.22) 0%, rgba(98, 32, 76, 0.1) 38%, rgba(98, 32, 76, 0) 68%);
	filter: blur(20px);
}

.abs-hero__aurora--two {
	width: 40vmax;
	right: auto;
	left: -14vmax;
	bottom: auto;
	top: -18vmax;
	background: radial-gradient(circle at 50% 50%, rgba(57, 5, 31, 0.08) 0%, rgba(57, 5, 31, 0) 66%);
}

.abs-hero__orbits {
	position: absolute;
	top: 50%;
	left: 72%;
	width: min(1100px, 96vw);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	overflow: visible;
}

.abs-hero__ring {
	fill: none;
	stroke: #cfcfcf;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.abs-hero__ring--dash { stroke-dasharray: 2 6; stroke: #c4c4c4; }
.abs-hero__ring--long { stroke-dasharray: 60 14 2 14; stroke: #d6d6d6; }

.abs-hero__disc { fill: #fafafa; }

.abs-hero__spin {
	transform-box: view-box;
	transform-origin: 500px 500px;
}

.abs-hero__dot { fill: #000; }
.abs-hero__dot--soft { fill: #c9c9c9; }

.abs-hero__grain {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.22;
	mix-blend-mode: overlay;
}

.abs-hero__layer {
	transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px));
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Layout ---------- */
.abs-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(24px, 3vw, 48px);
	max-width: 1360px;
	margin-inline: auto;
}

.abs-hero__copy { min-width: 0; max-width: 640px; }

.abs-hero__label {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--font-body, "Geist", system-ui, sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #2b2b2b;
}

.abs-hero__label::before {
	content: "";
	flex: none;
	width: 34px;
	height: 1px;
	background: currentColor;
}

.abs-hero__title {
	margin: 26px 0 0;
	font-family: var(--font-head, "Geist", system-ui, sans-serif);
	font-size: clamp(2.6rem, 5.1vw, 5rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.05em;
	color: var(--hero-ink);
	text-wrap: balance;
}

.abs-hero__title em {
	font-family: "Instrument Serif", "Times New Roman", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.1em;
	letter-spacing: -0.02em;
	line-height: 0.9;
}

.abs-hero__sub {
	max-width: 36em;
	margin: 26px 0 0;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	line-height: 1.6;
	color: var(--hero-muted);
	text-wrap: pretty;
}

.abs-hero__sub strong { font-weight: 600; color: #2b2b2b; }

.abs-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 36px;
}

.abs-hero__stats {
	display: flex;
	flex-wrap: wrap;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.abs-hero__stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 4px clamp(18px, 2.6vw, 40px);
	border-left: 1px solid var(--hero-line);
	text-align: center;
}

.abs-hero__stats li:first-child { padding-left: 10px; border-left: 0; }

.abs-hero__stats strong {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head, "Geist", system-ui, sans-serif);
	font-size: clamp(1.4rem, 1.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.abs-hero__stats span { font-size: 0.9375rem; color: var(--hero-muted); }

.abs-hero__stars { display: inline-flex; gap: 3px; }
.abs-hero__stars svg { width: 17px; height: 17px; }

/* ---------- Visual ---------- */
.abs-hero__visual {
	position: relative;
	min-width: 0;
	margin-right: clamp(-48px, -2vw, 0px);
}

.abs-hero__float {
	transform: translate(calc(var(--px) * 12px), calc(var(--py) * 8px));
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.abs-hero__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.12));
}

/* soft floor shadow under the laptop */
.abs-hero__visual::after {
	content: "";
	position: absolute;
	left: 14%;
	right: 10%;
	bottom: 2%;
	height: 7%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 70%);
	z-index: -1;
}

/* ---------- Motion (only when welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.abs-hero__copy > * { animation: abs-hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
	.abs-hero__copy > :nth-child(2) { animation-delay: 0.08s; }
	.abs-hero__copy > :nth-child(3) { animation-delay: 0.16s; }
	.abs-hero__copy > :nth-child(4) { animation-delay: 0.24s; }
	.abs-hero__copy > :nth-child(5) { animation-delay: 0.32s; }

	.abs-hero__visual { animation: abs-hero-arrive 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
	.abs-hero__img { animation: abs-hero-hover 7s ease-in-out 1.6s infinite alternate; }

	.abs-hero__spin--a { animation: abs-hero-turn 140s linear infinite; }
	.abs-hero__spin--b { animation: abs-hero-turn 90s linear infinite reverse; }
	.abs-hero__spin--c { animation: abs-hero-turn 60s linear infinite; }
	.abs-hero__spin--d { animation: abs-hero-turn 45s linear infinite reverse; }

	.abs-hero__aurora { animation: abs-hero-drift 22s ease-in-out infinite alternate; }
	.abs-hero__aurora--two { animation-duration: 28s; animation-direction: alternate-reverse; }
	.abs-hero__disc-g { animation: abs-hero-breathe 9s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 500px 500px; }

	.abs-hero__rings-in .abs-hero__ring {
		stroke-dashoffset: 0;
		animation: abs-hero-fade 1.6s ease 0.3s both;
	}
}

@keyframes abs-hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes abs-hero-arrive { from { opacity: 0; transform: translateY(40px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes abs-hero-hover { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-14px) rotate(-0.4deg); } }
@keyframes abs-hero-turn { to { transform: rotate(360deg); } }
@keyframes abs-hero-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vmax, -4vmax, 0) scale(1.12); } }
@keyframes abs-hero-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes abs-hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
	.abs-hero { padding-top: 160px; }
	.abs-hero__inner { grid-template-columns: 1fr; gap: 24px; }
	.abs-hero__copy { max-width: 720px; }
	.abs-hero__visual { margin: 0 -24px 0 4%; max-width: 860px; }
	.abs-hero__orbits { left: 70%; top: 72%; width: 130vw; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
	.abs-hero { padding-top: 140px; padding-bottom: 28px; }

	.abs-hero__label {
		gap: 0;
		padding: 9px 16px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.7);
		font-size: 12px;
		letter-spacing: 0.02em;
		text-transform: none;
	}

	.abs-hero__label::before { display: none; }

	.abs-hero__title { margin-top: 22px; font-size: clamp(2.5rem, 11.5vw, 3.2rem); }
	.abs-hero__sub { margin-top: 18px; font-size: 1.0625rem; }

	.abs-hero__cta { flex-direction: column; gap: 12px; margin-top: 28px; }
	.abs-hero__cta .btn { width: 100%; justify-content: flex-start; }

	.abs-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
	.abs-hero__stats li, .abs-hero__stats li:first-child { padding: 2px 6px; }
	.abs-hero__stats strong { font-size: 1.3rem; gap: 6px; }
	.abs-hero__stats span { font-size: 0.8125rem; }
	.abs-hero__stars svg { width: 12px; height: 12px; }
	.abs-hero__stars { gap: 1px; }

	.abs-hero__visual { margin: 12px -96px 0 -40px; }
	.abs-hero__aurora { width: 120vw; right: -40vw; bottom: -50vw; }
}

@media (prefers-reduced-motion: reduce) {
	.abs-hero__layer, .abs-hero__float { transition: none; }
}