/* ==========================================================================
   Caracal Studio — sito multipagina
   Visual language modeled on antigravity.google
   ========================================================================== */

@layer reset, tokens, base, components, layout, animations, responsive;

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */
@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	html, body {
		height: 100%;
	}

	img, svg {
		max-width: 100%;
		height: auto;
	}

	ul[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	input, textarea, select, button {
		font-family: inherit;
		font-size: inherit;
	}

	a:focus-visible,
	button:focus-visible {
		outline-offset: 0.2rem;
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}

/* --------------------------------------------------------------------------
   TOKENS — exact Antigravity palette + Caracal accent
   -------------------------------------------------------------------------- */
@layer tokens {
	:root {
		--palette-grey-0: #FFFFFF;
		--palette-grey-10: #F8F9FC;
		--palette-grey-15: #F0F1F5;
		--palette-grey-20: #EFF2F7;
		--palette-grey-50: #E6EAF0;
		--palette-grey-100: #E1E6EC;
		--palette-grey-300: #B2BBC5;
		--palette-grey-400-rgb: 183, 191, 217;
		--palette-grey-800: #45474D;
		--palette-grey-900: #2F3034;
		--palette-grey-1000-rgb: 33, 34, 38;
		--palette-grey-1100: #18191D;
		--palette-grey-1200: #121317;

		--surface: var(--palette-grey-0);
		--on-surface: var(--palette-grey-1200);
		--on-surface-variant: var(--palette-grey-800);
		--surface-container: var(--palette-grey-10);

		--outline: rgba(var(--palette-grey-1000-rgb), .12);
		--outline-variant: rgba(var(--palette-grey-1000-rgb), .06);

		--nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
		--secondary-button: rgba(var(--palette-grey-400-rgb), .1);
		--secondary-button-hover: var(--palette-grey-15);
		--button-hover: var(--palette-grey-900);

		--accent: #1612FF;
		--accent-soft: rgba(22, 18, 255, .08);

		--radius-card: 2em;
		--radius-pill: 999px;

		--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
		--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
	}
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
@layer base {
	html {
		background: var(--surface);
		color: var(--on-surface);
		font-family: "Google Sans Flex", "Google Sans", Inter, system-ui, sans-serif;
		font-size: 16px;
		font-weight: 400;
		scroll-behavior: smooth;
		overscroll-behavior-y: contain;
	}

	body {
		margin: 0;
	}

	section {
		min-height: 100dvh;
		scroll-margin-top: 3.5rem;

		&.auto {
			min-height: auto;
		}

		&.center {
			place-content: safe center;
			justify-items: center;
		}
	}

	h1 {
		font-size: 4.5em;
		font-weight: 500;
		line-height: 1.05;
		text-align: center;
		margin: 0;
	}

	h2 {
		font-size: 2.5em;
		font-weight: 350;
		line-height: 1;
		margin: 0.5rem 0;
	}

	h3 {
		font-weight: 350;
		font-size: 1.25em;
		line-height: 1.1;
		margin: 0 0 0.5rem;
	}

	p {
		color: var(--on-surface-variant);
	}

	a {
		color: inherit;
	}
}

/* --------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */
@layer components {

	/* --- Buttons ---------------------------------------------------------- */
	.button {
		display: inline-flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 0.4rem;

		background: var(--palette-grey-1200);
		color: var(--palette-grey-0);
		border: 0;
		border-radius: var(--radius-pill);
		padding: 0.6em 1.5em;

		font-size: 0.9em;
		text-decoration: none;
		cursor: pointer;
		transition: background .15s ease-out, color .15s ease-out;

		&:hover,
		&:focus-visible {
			background: var(--accent);
		}

		&.secondary {
			color: var(--on-surface);
			background: var(--secondary-button);
			border: 1px solid var(--outline-variant);

			&:hover,
			&:focus-visible {
				background: var(--secondary-button-hover);
			}
		}

		/* on dark cards */
		&.inverse {
			background: var(--palette-grey-0);
			color: var(--on-surface);

			&:hover,
			&:focus-visible {
				background: var(--palette-grey-15);
				color: var(--on-surface);
			}
		}

		&.ghost {
			background: rgba(var(--palette-grey-400-rgb), .12);
			color: var(--palette-grey-0);
			border: 1px solid rgba(230, 234, 240, .12);

			&:hover,
			&:focus-visible {
				background: rgba(var(--palette-grey-400-rgb), .24);
			}
		}
	}

	.cta .button {
		font-size: 1.15em;
	}

	/* --- Navbar ----------------------------------------------------------- */
	.header-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: var(--surface);
		z-index: 10;
	}

	header {
		display: flex;
		flex-direction: row;
		gap: 2rem;
		align-items: center;

		padding-inline: 3rem;
		padding-block: 0.5rem;

		.button, .menu-button {
			margin-left: auto;
		}
	}

	.logo {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		font-weight: 500;
		font-size: 1.05em;
		letter-spacing: 0.01em;
		text-decoration: none;
		color: var(--on-surface);
		height: 15px;
		width: auto;
	}

	.menu-checkbox {
		display: none;
	}

	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	nav a {
		color: var(--on-surface-variant);
		text-decoration: none;
		white-space: nowrap;
		transition: color .15s ease-out, background .15s ease-out;

		&:hover,
		&:focus-visible {
			color: #000;
			background: var(--nav-button-hover);
		}

		&[aria-current="page"] {
			color: #000;
		}
	}

	/* --- Hero ------------------------------------------------------------- */
	#hero {
		position: relative;
		display: grid;
		gap: 1.25rem;
		text-align: center;
		overflow: clip;
	}

	#bg3d {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100dvh;
		z-index: -1;
		pointer-events: none;
	}

	#hero .subtitle {
		font-size: 2.1em;
		font-weight: 350;
		line-height: 1.15;
		max-width: 24ch;
		margin: 0 auto;
		color: var(--on-surface-variant);
		text-wrap: balance;
	}

	#hero .cta {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.4em;
		justify-content: center;
		margin-top: 0.75rem;
	}

	/* --- Statement section: icons row + big text --------------------------- */
	#studio {
		align-content: center;
	}

	.icons {
		height: max(16em, 28vb);
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		align-items: center;
		justify-content: center;
		overflow-x: clip;
	}

	.icon {
		flex: 0 0 clamp(4rem, 9vw, 6rem);
		aspect-ratio: 1;
		border-radius: 50%;

		background: rgba(183, 191, 217, .09);
		border: 1px solid var(--outline-variant);
		backdrop-filter: blur(5px);

		display: grid;
		place-content: center;
		color: var(--on-surface);

		svg {
			width: clamp(1.5rem, 2.3vw, 2rem);
			fill: none;
			stroke: currentColor;
			stroke-width: 1.7;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		&.accent {
			color: var(--accent);
		}
	}

	.statement {
		font-size: 2.5em;
		font-weight: 350;
		line-height: 1.15;
		max-width: 28ch;
		margin: 1rem 0 0;
	}

	/* --- Feature rows (servizi) -------------------------------------------- */
	.features {
		display: grid;
		gap: 2rem;
		margin-top: 2rem;
	}

	.feature {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		align-items: center;
		padding-block: 8vb;
	}

	.feature-content {
		h3 {
			font-size: 1.75em;
			margin-bottom: 1rem;
		}

		p {
			font-weight: 300;
			line-height: 1.35;
			max-width: 44ch;
			margin: 0;
			text-wrap: pretty;
		}
	}

	.feature-visual {
		position: relative;
		aspect-ratio: 4 / 3;
		border-radius: var(--radius-card);
		border: 1px solid var(--outline-variant);
		background: var(--palette-grey-0);
		overflow: hidden;

		display: grid;
		place-items: center;

		/* soft Google-style multicolor glow */
		&::before {
			content: '';
			position: absolute;
			inset: -25%;
			background: conic-gradient(
				from 210deg,
				rgba(22, 18, 255, .16),
				rgba(66, 133, 244, .12),
				rgba(52, 168, 83, .08),
				rgba(251, 188, 5, .10),
				rgba(234, 67, 53, .08),
				rgba(22, 18, 255, .16)
			);
			filter: blur(52px);
		}

		/* dark "screenshot" panel */
		&::after {
			content: '';
			position: absolute;
			inset: 5.5%;
			border-radius: 1.5em;
			background: #0B0C10;
			border: 1px solid rgba(230, 234, 240, .08);
		}

		svg {
			position: relative;
			z-index: 1;
			width: 84%;
		}
	}

	/* --- Section shells ---------------------------------------------------- */
	.section-intro {
		font-weight: 320;
		font-size: 1.1em;
		line-height: 1.2;
		max-width: 44ch;
	}

	/* --- Studio demo (Figma-like animation) -------------------------------- */
	.demo-wrapper {
		margin-top: 3rem;
	}

	.studio-demo {
		position: relative;
		border: 1px solid var(--outline);
		border-radius: var(--radius-card);
		background: var(--surface-container);
		overflow: hidden;
		aspect-ratio: 16 / 9.5;
		max-height: 76vh;
		width: 100%;
	}

	.demo-titlebar {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		padding: 0.8rem 1.4rem;
		border-bottom: 1px solid var(--outline-variant);
		background: var(--palette-grey-0);

		.dot {
			width: 0.65em;
			height: 0.65em;
			border-radius: 50%;
			background: var(--palette-grey-100);
		}

		.demo-filename {
			margin-left: 0.6rem;
			font-size: 0.8em;
			color: var(--on-surface-variant);
			font-weight: 300;
		}
	}

	.demo-body {
		display: grid;
		grid-template-columns: minmax(9.5rem, 22%) 1fr;
		height: calc(100% - 2.6rem);
	}

	.demo-layers {
		background: var(--palette-grey-0);
		border-right: 1px solid var(--outline-variant);
		padding: 1rem 1.1rem;
		overflow: hidden;

		.demo-panel-title {
			font-size: 0.72em;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			color: var(--palette-grey-300);
			margin: 0 0 0.8rem;
		}
	}

	.layer-row {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.82em;
		font-weight: 350;
		color: var(--on-surface-variant);
		padding: 0.42rem 0.5rem;
		border-radius: 0.5rem;

		.layer-glyph {
			width: 0.7em;
			height: 0.7em;
			border: 1.5px solid var(--palette-grey-300);
			border-radius: 0.2em;
			flex: none;

			&.accent {
				border-color: var(--accent);
			}
		}
	}

	.demo-canvas {
		display: grid;
		place-items: center;
		padding: clamp(1rem, 3vw, 2.5rem);
		background:
			radial-gradient(rgba(33, 34, 38, .07) 1px, transparent 1px) 0 0 / 22px 22px;
	}

	.site-frame {
		position: relative;
		width: min(34rem, 92%);
		aspect-ratio: 4 / 3;
		background: var(--palette-grey-0);
		border-radius: 0.9rem;
		border: 1px solid var(--outline);
		box-shadow: 0 20px 45px -18px rgba(18, 19, 23, .18);
		padding: 6.5% 7%;
	}

	.blk {
		position: absolute;
		border-radius: 0.45rem;
		background: var(--palette-grey-20);
	}

	.blk-nav {
		top: 5%;
		left: 7%;
		right: 7%;
		height: 7%;
		background: transparent;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.blk-nav-logo {
			width: 18%;
			height: 55%;
			border-radius: 999px;
			background: var(--palette-grey-1200);
		}
		.blk-nav-links {
			width: 38%;
			height: 45%;
			border-radius: 999px;
			background: var(--palette-grey-20);
		}
	}

	.blk-title {
		top: 19%;
		left: 7%;
		width: 48%;
		height: 16%;
		background: transparent;
		display: grid;
		align-content: center;
		gap: 12%;

		.blk-line {
			height: 26%;
			border-radius: 999px;
			background: var(--palette-grey-100);

			&.w-70 { width: 92%; }
			&.w-45 { width: 60%; }
		}
	}

	.blk-visual {
		top: 16%;
		right: 7%;
		width: 32%;
		height: 26%;
		background: var(--accent);
	}

	.blk-cols {
		position: absolute;
		top: 50%;
		left: 7%;
		right: 7%;
		height: 22%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 4%;
	}

	.blk-col {
		position: relative;
		inset: auto;
		background: var(--palette-grey-20);
		border: 1px solid var(--outline-variant);
	}

	.blk-btn {
		bottom: 12%;
		left: 7%;
		width: 20%;
		height: 6.5%;
		border-radius: 999px;
		background: var(--accent);
	}

	.blk-footer {
		bottom: 5%;
		left: 7%;
		right: 7%;
		height: 3.5%;
		background: var(--palette-grey-15);
	}

	.select-box {
		position: absolute;
		top: 14.5%;
		right: 5.5%;
		width: 35%;
		height: 29%;
		border: 1.5px solid var(--accent);
		border-radius: 0.55rem;
		background: transparent;

		&::before, &::after {
			content: '';
			position: absolute;
			width: 7px;
			height: 7px;
			background: #fff;
			border: 1.5px solid var(--accent);
		}
		&::before { top: -4px; left: -4px; }
		&::after { bottom: -4px; right: -4px; }
	}

	.demo-cursor {
		position: absolute;
		top: 50%;
		left: 55%;
		z-index: 2;
		filter: drop-shadow(0 2px 4px rgba(18, 19, 23, .25));
	}

	.demo-caption {
		text-align: center;
		font-weight: 320;
		margin-top: 1.5rem;
	}

	/* --- Liftoff: dark card with particles ---------------------------------- */
	#liftoff {
		padding-block: 3rem 5rem;
	}

	.liftoff-card {
		position: relative;
		width: 100%;
		aspect-ratio: 4 / 3;
		max-height: 80vh;
		border-radius: var(--radius-card);
		background: var(--palette-grey-1200);
		color: var(--palette-grey-0);
		overflow: hidden;

		display: grid;
		align-content: center;
		justify-items: start;
		gap: 1.5rem;
		padding: 4em;
	}

	.liftoff-canvas {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.liftoff-card > *:not(.liftoff-canvas) {
		position: relative;
	}

	.liftoff-logo {
		display: inline-flex;
		align-items: center;
		gap: 0.65rem;
		font-weight: 500;
		font-size: 1.15em;
	}

	.liftoff-title {
		--tw-color: var(--palette-grey-0);
		font-size: 3em;
		font-weight: 350;
		line-height: 1.1;
		max-width: 18ch;
		margin: 0;
		color: var(--palette-grey-0);
	}

	.liftoff-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		font-size: 1.15em;
	}

	/* --- Footer ------------------------------------------------------------ */
	footer {
		border-top: 1px solid var(--outline);
		padding: 4rem 3rem 0;
		overflow: clip;
	}

	.footer-top {
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;
		justify-content: space-between;
		align-items: flex-start;
	}

	.footer-heading {
		font-size: 1.75em;
		font-weight: 350;
		line-height: 1.1;
		max-width: 14ch;
		margin: 0;
		color: var(--on-surface);
	}

	.footer-cols {
		display: flex;
		gap: 5rem;

		ul {
			display: grid;
			gap: 0.35rem;
		}

		a {
			display: inline-block;
			font-weight: 300;
			font-size: 0.95em;
			color: var(--on-surface-variant);
			text-decoration: none;
			padding: 0.15em 0;
			transition: color .15s ease-out;

			&:hover,
			&:focus-visible {
				color: #000;
			}
		}
	}

	.footer-wordmark {
		font-size: clamp(4.5rem, 18.5vw, 26rem);
		font-weight: 500;
		line-height: 0.8;
		letter-spacing: -0.04em;
		text-align: center;
		color: var(--on-surface);
		margin: 2rem 0 -0.14em;
		user-select: none;
	}

	.footer-note {
		font-size: 0.8em;
		font-weight: 300;
		color: var(--palette-grey-300);
		margin: 3rem 0 0;
	}

	/* --- Subpages ----------------------------------------------------------- */
	.page-hero {
		padding-block: 11rem 2rem;

		h1 {
			font-size: 3.5em;
			font-weight: 400;
			text-align: left;
			margin: 0 0 1.25rem;
		}

		.lead {
			font-size: 1.35em;
			font-weight: 320;
			line-height: 1.3;
			max-width: 38ch;
			margin: 0;
		}
	}

	.prose {
		max-width: 62ch;

		p {
			font-weight: 320;
			line-height: 1.5;
		}
	}

	.cards-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		margin-block: 3rem;
	}

	.info-card {
		background: var(--surface-container);
		border: 1px solid var(--outline-variant);
		border-radius: var(--radius-card);
		padding: 2rem;

		transition: border-color .15s ease-out, background .15s ease-out, translate .15s ease-out;

		&:hover {
			border-color: var(--outline);
			background: var(--palette-grey-0);
			translate: 0 -4px;
		}

		p {
			font-weight: 300;
			line-height: 1.4;
			margin: 0;
		}

		a {
			color: var(--on-surface);
			text-decoration: none;
			transition: color .15s ease-out;

			&:hover { color: var(--accent); }
		}
	}

	.contact-cta {
		margin-block: 1rem 4rem;
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;

		.button { font-size: 1.15em; }
	}
}

/* --------------------------------------------------------------------------
   LAYOUT — the exact Antigravity grid
   -------------------------------------------------------------------------- */
@layer layout {
	body {
		display: grid;
		grid-template-columns:
			[fullbleed-start]
			3rem
			[main-start]
			1fr
			[main-end]
			3rem
			[fullbleed-end];
		grid-auto-rows: min-content;
	}

	body > * {
		grid-column: fullbleed;
	}

	main {
		display: grid;
		grid-template-columns: subgrid;
	}

	main > section {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: fullbleed;
		align-content: center;
		padding-block: 6rem;

		> * {
			grid-column: main;
		}
	}

	#hero {
		padding-block: 3rem;
	}

	#liftoff {
		padding-block: 3rem 5rem;
	}

	main > section.page-hero {
		padding-block: 11rem 2rem;
	}

	/* icon row spans edge to edge */
	#studio > .icons {
		grid-column: fullbleed;
	}

	footer {
		grid-column: fullbleed;
	}
}

/* --------------------------------------------------------------------------
   ANIMATIONS
   -------------------------------------------------------------------------- */
@layer animations {

	/* --- Hero entrance ------------------------------------------------------ */
	/* The headline/subtitle are revealed by the typewriter; only .lead on
	   subpages keeps the fade + slide entrance. */
	.page-hero .lead {
		transition: translate 0.5s var(--ease-out-cubic), opacity 0.5s ease;
		transition-delay: 0.08s;

		@starting-style {
			translate: 0 50%;
			opacity: 0;
		}
	}

	/* Antigravity-style sequence: JS adds .show to the CTA the moment the
	   subtitle finishes typing, and removes it when the hero is left */
	html.tw-enabled #hero .cta {
		opacity: 0;
	}

	#hero .cta.show {
		animation: fade-up 0.5s var(--ease-out-cubic) 0.15s both;
	}

	/* --- Scroll-driven reveals --------------------------------------------- */
	@keyframes fade-up {
		from {
			opacity: 0;
			translate: 0 1.5rem;
		}
		to {
			opacity: 1;
			translate: 0 0;
		}
	}

	@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
		.reveal {
			animation: fade-up 0.7s var(--ease-out-cubic) both;
			animation-timeline: view();
			animation-range: entry 15% entry 55%;
		}
	}

	@supports not ((animation-timeline: view()) and (animation-range: 0% 100%)) {
		.reveal {
			opacity: 0;
			translate: 0 1.5rem;
			transition: opacity 0.7s ease, translate 0.7s var(--ease-out-cubic);
		}
		.reveal.in-view {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* --- Icons row: slide in on scroll + wobble ----------------------------- */
	@keyframes icons-slide {
		from {
			opacity: 0;
			translate: 8% 0;
		}
	}

	@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
		.icons {
			animation: icons-slide 1s ease both;
			animation-timeline: view();
			animation-range: entry 20% entry 90%;
		}
	}

	@keyframes wobble {
		from { translate: 0 45%; }
		to { translate: 0 -45%; }
	}

	.icon {
		animation: wobble 4s ease-in-out infinite alternate;
	}

	.icons > :nth-child(5n + 1) { animation-delay: 0s; }
	.icons > :nth-child(5n + 2) { animation-delay: -1s; }
	.icons > :nth-child(5n + 3) { animation-delay: -2s; }
	.icons > :nth-child(5n + 4) { animation-delay: -3s; }
	.icons > :nth-child(5n + 5) { animation-delay: -4s; }

	/* --- Typewriter (JS-driven, char by char: the caret rides the text) ----- */
	@keyframes tw-blink {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	/* One span per character: the full text is laid out from the start and
	   characters just become visible — line breaks can never change. */
	.tw-ch {
		visibility: hidden;
		position: relative;
	}
	.tw-ch.tw-on {
		visibility: visible;
	}

	/* fixed line break in the hero subtitle */
	#hero .typewriter {
		white-space: pre-line;
	}

	/* the caret is an absolutely-positioned pseudo on the current character,
	   so it rides the text with zero layout impact */
	.tw-ch.tw-pos::after,
	.typewriter.tw-waiting .tw-ch:first-child::before {
		content: "|";
		position: absolute;
		left: 100%;
		top: 0;
		color: var(--accent);
		visibility: visible;
		opacity: 0;
	}

	.liftoff-title .tw-ch.tw-pos::after {
		color: var(--palette-grey-0);
	}

	/* hero: caret blinks alone before typing starts (Antigravity lead-in) */
	.typewriter.tw-waiting .tw-ch:first-child::before {
		left: auto;
		right: 100%;
		animation: tw-blink 0.4s ease infinite alternate;
	}

	/* hero texts: the caret is visible and rides along while typing */
	.tw-show-caret.tw-typing .tw-ch.tw-pos::after {
		opacity: 1;
	}

	/* everywhere else the caret only appears once typing has finished,
	   blinking briefly and then hiding */
	.typewriter.tw-done .tw-ch.tw-pos::after {
		animation: tw-blink 0.2s ease 12 alternate none;
	}

	/* --- Liftoff card: scale up while entering ------------------------------ */
	@keyframes scale-up {
		from { scale: 0.88; }
	}

	@supports (animation-timeline: view()) and (animation-range: 0% 100%) {
		.liftoff-card {
			animation: scale-up linear both;
			animation-timeline: view();
			animation-range: entry 40% entry 100%;
		}
	}

	/* --- Studio demo: 20s looping build ------------------------------------ */
	.studio-demo .layer-row,
	.studio-demo .blk,
	.studio-demo .blk-cols,
	.studio-demo .select-box,
	.studio-demo .demo-cursor {
		animation-duration: 20s;
		animation-timing-function: var(--ease-out-cubic);
		animation-iteration-count: infinite;
		animation-play-state: paused;
	}

	.studio-demo.playing .layer-row,
	.studio-demo.playing .blk,
	.studio-demo.playing .blk-cols,
	.studio-demo.playing .select-box,
	.studio-demo.playing .demo-cursor {
		animation-play-state: running;
	}

	@keyframes demo-in-a {
		0%, 3.9% { opacity: 0; scale: 0.96; }
		5.5%, 94% { opacity: 1; scale: 1; }
		98%, 100% { opacity: 0; scale: 0.96; }
	}
	@keyframes demo-in-b {
		0%, 11.9% { opacity: 0; scale: 0.96; }
		13.5%, 94% { opacity: 1; scale: 1; }
		98%, 100% { opacity: 0; scale: 0.96; }
	}
	@keyframes demo-in-c {
		0%, 23.9% { opacity: 0; scale: 0.5; }
		26%, 94% { opacity: 1; scale: 1; }
		98%, 100% { opacity: 0; scale: 0.5; }
	}
	@keyframes demo-in-d {
		0%, 37.9% { opacity: 0; translate: 0 18%; }
		40%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: 0 18%; }
	}
	@keyframes demo-in-e {
		0%, 41.9% { opacity: 0; translate: 0 18%; }
		44%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: 0 18%; }
	}
	@keyframes demo-in-f {
		0%, 45.9% { opacity: 0; translate: 0 18%; }
		48%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: 0 18%; }
	}
	@keyframes demo-in-g {
		0%, 57.9% { opacity: 0; scale: 0.4; }
		60%, 94% { opacity: 1; scale: 1; }
		98%, 100% { opacity: 0; scale: 0.4; }
	}
	@keyframes demo-in-h {
		0%, 65.9% { opacity: 0; }
		68%, 94% { opacity: 1; }
		98%, 100% { opacity: 0; }
	}

	.blk-nav { animation-name: demo-in-a; }
	.blk-title { animation-name: demo-in-b; }
	.blk-visual { animation-name: demo-in-c, demo-fill-accent; transform-origin: top right; }
	.blk-cols { animation-name: demo-in-d; }
	.blk-col.c-2 { animation-name: demo-in-e; }
	.blk-col.c-3 { animation-name: demo-in-f; }
	.blk-btn { animation-name: demo-in-g; transform-origin: bottom left; }
	.blk-footer { animation-name: demo-in-h; }

	@keyframes demo-fill-accent {
		0%, 73.9% { background: var(--palette-grey-100); }
		75%, 100% { background: var(--accent); }
	}

	@keyframes demo-select {
		0%, 69.9% { opacity: 0; }
		71%, 82% { opacity: 1; }
		85%, 100% { opacity: 0; }
	}
	.select-box { animation-name: demo-select; }

	@keyframes demo-layer-1 {
		0%, 3.9% { opacity: 0; translate: -0.75rem 0; }
		5.5%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: -0.75rem 0; }
	}
	@keyframes demo-layer-2 {
		0%, 11.9% { opacity: 0; translate: -0.75rem 0; }
		13.5%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: -0.75rem 0; }
	}
	@keyframes demo-layer-3 {
		0%, 23.9% { opacity: 0; translate: -0.75rem 0; }
		26%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: -0.75rem 0; }
	}
	@keyframes demo-layer-4 {
		0%, 37.9% { opacity: 0; translate: -0.75rem 0; }
		40%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: -0.75rem 0; }
	}
	@keyframes demo-layer-5 {
		0%, 57.9% { opacity: 0; translate: -0.75rem 0; }
		60%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: -0.75rem 0; }
	}
	@keyframes demo-layer-6 {
		0%, 65.9% { opacity: 0; translate: -0.75rem 0; }
		68%, 94% { opacity: 1; translate: 0 0; }
		98%, 100% { opacity: 0; translate: -0.75rem 0; }
	}

	.lr-1 { animation-name: demo-layer-1; }
	.lr-2 { animation-name: demo-layer-2; }
	.lr-3 { animation-name: demo-layer-3, demo-layer-active; }
	.lr-4 { animation-name: demo-layer-4; }
	.lr-5 { animation-name: demo-layer-5; }
	.lr-6 { animation-name: demo-layer-6; }

	@keyframes demo-layer-active {
		0%, 69.9% { background: transparent; }
		71%, 82% { background: var(--accent-soft); }
		85%, 100% { background: transparent; }
	}

	@keyframes demo-cursor-path {
		0% { top: 62%; left: 58%; }
		4% { top: 16%; left: 38%; }
		12% { top: 34%; left: 30%; }
		24% { top: 30%; left: 68%; }
		32% { top: 30%; left: 68%; }
		40% { top: 62%; left: 34%; }
		44% { top: 62%; left: 50%; }
		48% { top: 62%; left: 66%; }
		58% { top: 76%; left: 32%; }
		66% { top: 84%; left: 50%; }
		71% { top: 30%; left: 70%; }
		82% { top: 32%; left: 72%; }
		94% { top: 62%; left: 58%; }
		100% { top: 62%; left: 58%; }
	}
	.demo-cursor { animation-name: demo-cursor-path; }

	/* --- Animated service visuals (loop, transform/opacity only) ------------ */
	.feature-visual svg * {
		transform-box: fill-box;
	}

	/* the whole screenshot floats gently inside its dark panel */
	@keyframes viz-float {
		from { transform: translateY(5px) rotate(-0.4deg); }
		to { transform: translateY(-5px) rotate(0.4deg); }
	}
	.feature-visual svg {
		animation: viz-float 6s ease-in-out infinite alternate;
	}
	.feature:nth-child(2) .feature-visual svg { animation-delay: -2s; }
	.feature:nth-child(3) .feature-visual svg { animation-delay: -4s; }

	@keyframes viz-type {
		0%, 3% { transform: scaleX(0); }
		10%, 88% { transform: scaleX(1); }
		95%, 100% { transform: scaleX(0); }
	}
	@keyframes viz-fade {
		0%, 8% { opacity: 0; }
		16%, 88% { opacity: 1; }
		96%, 100% { opacity: 0; }
	}
	@keyframes viz-caret-blink {
		0%, 49% { opacity: 1; }
		50%, 100% { opacity: 0; }
	}
	@keyframes viz-pulse {
		from { opacity: 0.3; }
		to { opacity: 1; }
	}
	@keyframes viz-eq {
		from { transform: translateY(0); opacity: 0.7; }
		to { transform: translateY(-5px); opacity: 1; }
	}
	@keyframes viz-drift {
		0% { transform: translate(0, 0); opacity: 0.15; }
		50% { opacity: 0.8; }
		100% { transform: translate(-16px, 12px); opacity: 0.1; }
	}
	@keyframes viz-pop {
		from { transform: scale(0.75); opacity: 0.5; }
		to { transform: scale(1.18); opacity: 1; }
	}
	@keyframes viz-draw {
		0%, 5% { stroke-dashoffset: 1; }
		38%, 88% { stroke-dashoffset: 0; }
		100% { stroke-dashoffset: 1; }
	}
	@keyframes viz-halo {
		0%, 100% { transform: scale(0.5); opacity: 0.1; }
		50% { transform: scale(1.35); opacity: 0.45; }
	}
	@keyframes viz-grow {
		from { transform: scaleX(0.55); }
		to { transform: scaleX(1); }
	}
	@keyframes viz-breathe {
		from { transform: scale(0.985); opacity: 0.5; }
		to { transform: scale(1.012); opacity: 1; }
	}
	@keyframes viz-spin {
		0%, 55% { transform: rotate(0deg); }
		72%, 100% { transform: rotate(90deg); }
	}

	/* terminal: commands type, rows appear, caret blinks, pixels bounce
	   like an equalizer, stars drift across the dark */
	.viz-terminal rect[y="78"],
	.viz-terminal rect[y="164"] {
		transform-origin: left center;
		animation: viz-type 7s ease-out infinite;
	}
	.viz-terminal rect[y="164"] { animation-delay: 1.4s; }
	.viz-terminal rect[y="104"],
	.viz-terminal rect[y="120"],
	.viz-terminal rect[y="136"] { animation: viz-fade 7s ease infinite; }
	.viz-terminal rect[y="104"] { animation-delay: 0.4s; }
	.viz-terminal rect[y="120"] { animation-delay: 0.7s; }
	.viz-terminal rect[y="136"] { animation-delay: 1s; }
	.viz-terminal rect[y="190"] { animation: viz-caret-blink 0.9s steps(1) infinite; }
	.viz-terminal circle[opacity] { animation: viz-drift 7s linear infinite; }
	.viz-terminal circle[cx="356"] { animation-delay: -1.5s; }
	.viz-terminal circle[cx="298"] { animation-delay: -3s; }
	.viz-terminal circle[cx="344"] { animation-delay: -4.5s; }
	.viz-terminal circle[cx="316"] { animation-delay: -6s; }
	.viz-terminal rect[height="10"] {
		transform-origin: center bottom;
		animation: viz-eq 1.5s ease-in-out infinite alternate;
	}
	.viz-terminal rect[height="10"][fill="#9BB8F2"] { animation-delay: -0.3s; }
	.viz-terminal rect[height="10"][fill="#8FA0FF"] { animation-delay: -0.6s; }
	.viz-terminal rect[height="10"][fill="#5F7CFF"] { animation-delay: -0.9s; }
	.viz-terminal rect[height="10"][fill="#3D4DFF"] { animation-delay: -1.2s; }
	.viz-terminal rect[height="10"][fill="#1612FF"] { animation-delay: -0.45s; }

	/* dashboard: the chart redraws itself, stats stretch, menu cycles,
	   the button pulses */
	.viz-dash path[stroke-width="2.5"] {
		stroke-dasharray: 1 1;
		animation: viz-draw 6s ease-in-out infinite;
	}
	.viz-dash circle[opacity=".25"] {
		transform-origin: center;
		animation: viz-halo 1.8s ease-in-out infinite;
	}
	.viz-dash rect[x="126"][y="86"],
	.viz-dash rect[x="266"][y="86"] {
		transform-origin: left center;
		animation: viz-grow 2.6s ease-in-out infinite alternate;
	}
	.viz-dash rect[x="266"][y="86"] { animation-delay: -1.1s; }
	.viz-dash rect[x="30"] { animation: viz-pulse 3.2s ease-in-out infinite alternate; }
	.viz-dash rect[x="30"][y="86"] { animation-delay: -0.65s; }
	.viz-dash rect[x="30"][y="104"] { animation-delay: -1.3s; }
	.viz-dash rect[x="30"][y="122"] { animation-delay: -1.95s; }
	.viz-dash rect[x="30"][y="140"] { animation-delay: -2.6s; }
	.viz-dash rect[x="314"],
	.viz-dash rect[x="326"] { animation: viz-pulse 2.4s ease-in-out infinite alternate; }

	/* design canvas: bezier redraws, selection breathes, swatches bounce,
	   the active tool rotates */
	.viz-design rect[stroke-width="1.6"] {
		transform-origin: center;
		animation: viz-breathe 2.2s ease-in-out infinite alternate;
	}
	.viz-design rect[width="8"] { animation: viz-pulse 2.2s ease-in-out infinite alternate; }
	.viz-design path[stroke-width="2"] {
		stroke-dasharray: 1 1;
		animation: viz-draw 6s ease-in-out 0.8s infinite;
	}
	.viz-design circle[r="7"] {
		transform-origin: center;
		animation: viz-pop 2.2s ease-in-out infinite alternate;
	}
	.viz-design circle[r="7"][cx="66"] { animation-delay: -0.44s; }
	.viz-design circle[r="7"][cx="86"] { animation-delay: -0.88s; }
	.viz-design circle[r="7"][cx="106"] { animation-delay: -1.32s; }
	.viz-design circle[r="7"][cx="126"] { animation-delay: -1.76s; }
	.viz-design rect[rx="2.5"] {
		transform-origin: center;
		animation: viz-spin 3.2s ease-in-out infinite;
	}
	.viz-design circle[r="4"] { animation: viz-pulse 2.8s ease-in-out infinite alternate; }
	.viz-design circle[r="4"][cx="198"] { animation-delay: -0.7s; }
	.viz-design circle[r="4"][cx="250"] { animation-delay: -1.4s; }
	.viz-design circle[r="4"][cx="272"] { animation-delay: -2.1s; }
	.viz-design rect[width="56"][height="16"] {
		transform-origin: left center;
		animation: viz-grow 2.8s ease-in-out infinite alternate;
	}

	/* --- Reduced motion ----------------------------------------------------- */
	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		.icon,
		.icons,
		.liftoff-card,
		.studio-demo .layer-row,
		.studio-demo .blk,
		.studio-demo .blk-cols,
		.studio-demo .select-box,
		.studio-demo .demo-cursor {
			animation: none !important;
		}

		.reveal {
			animation: none !important;
			opacity: 1 !important;
			translate: 0 0 !important;
			transition: none !important;
		}

		.tw-ch::before,
		.tw-ch::after {
			display: none !important;
		}

		#hero .cta {
			animation: none !important;
			opacity: 1 !important;
		}

		.feature-visual svg,
		.feature-visual svg * {
			animation: none !important;
		}
	}
}

/* --------------------------------------------------------------------------
   RESPONSIVE — breakpoint 930px
   -------------------------------------------------------------------------- */
@layer responsive {

	/* Large screens */
	@media (width >= 930px) {
		nav ul {
			display: flex;
			flex-direction: row;
			gap: 0.2rem;
		}

		nav a {
			display: inline-block;
			padding: 0.6em 1.2em;
			border-radius: var(--radius-pill);
		}

		.menu-button {
			display: none;
		}

		h2 {
			max-width: 25ch;
		}
	}

	/* Small screens */
	@media (width < 930px) {
		h1 {
			font-size: clamp(2.6em, 11vw, 4.5em);
		}

		#hero .subtitle {
			font-size: clamp(1.3em, 5.5vw, 2.1em);
		}

		h2 {
			font-size: 2em;
		}

		.statement {
			font-size: 1.6em;
		}

		.icons {
			height: 12em;
			gap: 0.4rem;
		}

		.icon {
			flex-basis: clamp(3.2rem, 14vw, 4.5rem);
		}

		.feature {
			grid-template-columns: 1fr;
			padding-block: 3rem;
		}

		.feature-visual {
			order: -1;
		}

		.features {
			margin-top: 1rem;
		}

		.studio-demo {
			aspect-ratio: auto;
			height: 30rem;
		}

		.demo-body {
			grid-template-columns: 1fr;
		}

		.demo-layers {
			display: none;
		}

		.liftoff-card {
			aspect-ratio: auto;
			padding: 2.5em;
			gap: 1.25rem;
		}

		.liftoff-title {
			font-size: 2em;
		}

		.cards-3 {
			grid-template-columns: 1fr;
		}

		.page-hero {
			padding-block: 8rem 1rem;

			h1 { font-size: 2.6em; }
			.lead { font-size: 1.15em; }
		}

		.footer-cols {
			gap: 3rem;
		}

		/* mobile nav */
		.menu-button {
			cursor: pointer;
			width: 3.5em;
			height: 2.4em;
			border-radius: var(--radius-pill);
			display: grid;
			place-content: center;
			transition: background .15s ease-out;

			&:hover {
				background: rgba(var(--palette-grey-1000-rgb), .04);
			}
		}

		header nav {
			display: none;
		}

		header > .button {
			display: none;
		}

		.menu-checkbox:checked ~ nav {
			position: fixed;
			inset: 0;
			top: 3.4em;
			display: block;
			background: var(--palette-grey-0);
			transition: opacity .15s ease-in;

			@starting-style {
				opacity: 0;
			}

			li {
				font-size: 1.85em;
				font-weight: 350;
				border-bottom: 1px solid var(--palette-grey-50);

				&:first-child {
					border-top: 1px solid var(--palette-grey-50);
				}
			}

			a {
				display: block;
				padding-inline: 3rem;
				padding-block: 1.5rem;
			}
		}

		.menu-checkbox:checked ~ .menu-button [data-show-when="closed"] { display: none; }
		.menu-checkbox:not(:checked) ~ .menu-button [data-show-when="open"] { display: none; }

		footer {
			padding: 2.5rem 1.5rem 0;
		}
	}
}