/*
 * Motion variants only (premium, final). Never loaded on lean.
 * Pairs with assets/js/motion.js and assets/js/scene/{variant}/.
 */

/* ---------- Lenis (vendor CSS, lenis 1.3.26) ---------- */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Nav shrinks 76 → 60px ---------- */
.site-header,
.site-header__inner,
.site-header__logo img {
	transition:
		height var(--t-state) var(--ease-state),
		background-color var(--t-state) var(--ease-state);
}
.site-header.is-compact { background: rgba(6, 19, 41, .9); }
.site-header.is-compact .site-header__inner { height: 60px; }
.site-header.is-compact .site-header__logo img { height: 28px; }
@media (max-width: 819.98px) {
	.site-header.is-compact .site-header__inner { height: 56px; }
	.site-header.is-compact .site-header__logo img { height: 24px; }
}

/* ---------- Hero: captions under the 3D objects ---------- */
.hero__labels.hero__captions { opacity: 1; }
.hero__caption {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-200);
	opacity: 0;
	transition:
		opacity 400ms var(--ease-in) calc(var(--i, 0) * 60ms),
		color var(--t-hover) var(--ease-state);
}
.hero__captions.is-visible .hero__caption { opacity: 1; }
.hero__caption.is-hover { color: var(--green-300); }
.variant-premium .hero__svg-label,
.variant-final .hero__svg-label { fill: var(--ink-200); }
/* Footer logo: on motion variants it's a bare <img> (lazy-loaded) inside the flex-column brand block,
   which stretched it to the column width (694px). Lean wraps it in <picture>, so it never did. */
.site-footer__brand > img { align-self: flex-start; width: auto; }

/* Phones: no poster captions (they showed through the copy). */
@media (max-width: 819.98px) {
	.hero__svg-label { display: none; }
}

/* "$500 a month." never breaks across lines. */
.hero__price strong { white-space: nowrap; }

/* Nav CTA: short label on phones, full label from 820px. */
.site-header__cta .cta-short { display: none; }
@media (max-width: 819.98px) {
	.site-header__cta .cta-full { display: none; }
	.site-header__cta .cta-short { display: inline; }
}

/* ---------- Bento website card: tilt + moving highlight (desktop, fine pointer) ---------- */
@media (min-width: 820px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.feature--website {
		position: relative;
		transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
		transition: transform 600ms var(--ease-in);
		will-change: transform;
	}
	.feature--website.is-tilting { transition-duration: var(--t-hover); }
	.feature--website::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
		background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(95, 213, 138, .12), transparent 60%);
		opacity: 0;
		transition: opacity var(--t-state) var(--ease-state);
	}
	.feature--website.is-tilting::after { opacity: 1; }
}

/* ---------- Cards and buttons: hover / active / focus ---------- */
@media (prefers-reduced-motion: no-preference) {
	.feature:not(.feature--website),
	.plan,
	.review figure,
	.story,
	.work .mini {
		transition: transform var(--t-hover) var(--ease-state), box-shadow var(--t-hover) var(--ease-state);
	}
	@media (hover: hover) {
		.feature:not(.feature--website):hover,
		.review figure:hover,
		.work .mini:hover { transform: translateY(-2px); }
		.plan:hover { transform: translateY(-3px); box-shadow: var(--el-2); }
		.plan--featured:hover { box-shadow: 0 28px 70px rgba(11, 29, 63, .32); }
	}
	.plan:active,
	.review figure:active { transform: translateY(0) scale(.995); transition-duration: var(--t-press); }
}
.btn:focus-visible { box-shadow: 0 0 0 6px rgba(95, 213, 138, .18); }
.faq__q:hover h3,
.bench__summary:hover .bench__title { color: var(--green-600); }
.faq__q:focus-visible,
.bench__summary:focus-visible { outline: 3px solid var(--green-300); outline-offset: 4px; }
.plan-toggle a { transition: background-color var(--t-state) var(--ease-state), color var(--t-state) var(--ease-state); }
.plan-toggle a:focus-visible { outline-offset: -3px; }

/* ---------- How it works: line fills on scroll, light pulse on its leading edge ---------- */
.steps.is-scrubbed::after { width: calc(var(--p, 1) * 50%); }
.steps__pulse {
	position: absolute;
	top: 24.5px;
	left: calc(var(--p, 1) * 50%);
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 18%, var(--green-300) 38%, rgba(95, 213, 138, 0) 70%);
	box-shadow: 0 0 14px 5px rgba(95, 213, 138, .55);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--t-state) var(--ease-state);
}
.steps.is-filling .steps__pulse { opacity: 1; }
@media (max-width: 1099.98px) and (min-width: 820px) {
	.steps__pulse { display: none; } /* 2×2 grid: no line */
}
@media (max-width: 819.98px) {
	.steps.is-scrubbed::after { width: 3px; height: calc(var(--p, 1) * 42%); }
	.steps__pulse { top: calc(24px + var(--p, 1) * 42%); left: 24.5px; }
}

/* ---------- Final CTA: hub drop + ripple ---------- */
.final__stage {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	pointer-events: none;
	overflow: hidden;
}
.final__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 400ms var(--ease-in);
}
.final__canvas.is-visible { opacity: 1; }
.final__static {
	position: absolute;
	left: 50%;
	top: 80%;
	width: 112px;
	height: 112px;
	transform: translate(-50%, -50%);
	transition: opacity 400ms var(--ease-state);
}
.final__stage.has-canvas .final__static { opacity: 0; }
.final__static::before {
	content: "";
	position: absolute;
	inset: -60%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(35, 162, 79, .45), rgba(35, 162, 79, 0) 65%);
}
.final__hex {
	position: absolute;
	inset: 0;
	clip-path: polygon(0 50%, 25% 2.3%, 75% 2.3%, 100% 50%, 75% 97.7%, 25% 97.7%);
	background: linear-gradient(160deg, var(--green-500), var(--green-600));
	padding: 5px;
}
.final__hex img {
	width: 100%;
	height: 100%;
	clip-path: inherit;
	background: var(--navy-900);
}
.final__ripple {
	position: absolute;
	left: 50%;
	top: 100%;
	width: 140px;
	height: 34px;
	margin: -17px 0 0 -70px;
	border: 2px solid var(--green-300);
	border-radius: 50%;
	opacity: 0;
}
.final.is-in .final__ripple { animation: ilm-ripple 1.8s var(--ease-in) .2s 1 forwards; }
@keyframes ilm-ripple {
	0% { opacity: .9; transform: scale(.4); }
	100% { opacity: 0; transform: scale(4); }
}
@media (max-width: 819.98px) {
	/* Static hub behind the copy, upper right. */
	.final__stage { width: 100%; height: 420px; bottom: auto; opacity: .55; }
	.final__static { left: auto; right: 4px; top: 150px; width: 84px; height: 84px; transform: none; }
}

/* ---------- Mobile sticky bar ---------- */
.sticky-cta { display: none; }
@media (max-width: 819.98px) {
	.sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		height: calc(56px + env(safe-area-inset-bottom, 0px));
		padding: 0 16px env(safe-area-inset-bottom, 0px);
		background: var(--navy-900);
		border-top: 1px solid rgba(255, 255, 255, .1);
		color: var(--white);
		font-size: 15px;
		font-weight: 600;
		transform: translateY(100%);
		transition: transform var(--t-state) var(--ease-state);
	}
	.sticky-cta.is-visible { transform: none; }
	.sticky-cta__btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
	body.has-sticky { padding-bottom: 56px; }
}

/* ---------- Audit round 2 (premium, final; body.fix-v2) ---------- */

/* Pricing cards never move: no hover lift or shadow change. */
.fix-v2 .plan:hover,
.fix-v2 .plan:active { transform: none; box-shadow: var(--el-1); }
.fix-v2 .plan--featured:hover,
.fix-v2 .plan--featured:active { box-shadow: var(--el-2); }

/* Phones: the static hub sits above the headline (in .final__copy), never behind text. */
@media (max-width: 819.98px) {
	.fix-v2 .final__stage { display: none; }
	.fix-v2 .final__art--hub { display: block; position: relative; height: 112px; margin-bottom: 4px; }
	.fix-v2 .final__art--hub::before {
		content: "";
		position: absolute;
		left: -30px; top: -20px;
		width: 150px; height: 140px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(35, 162, 79, .4), rgba(35, 162, 79, 0) 65%);
	}
	.fix-v2 .final__art--hub .final__hex { inset: auto; left: 0; top: 4px; width: 88px; height: 88px; }
	.fix-v2 .final__art--hub .final__ripple { left: 44px; top: 96px; }
}

/* ---------- Reduced motion: no ripple, no pulse, no tilt ---------- */
@media (prefers-reduced-motion: reduce) {
	.final.is-in .final__ripple { animation: none; }
	.steps__pulse { display: none; }
}